> For the complete documentation index, see [llms.txt](https://whatcrm.gitbook.io/whatcrm-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://whatcrm.gitbook.io/whatcrm-docs/produkty/whatsapp/bitriks24/knopka-messendzhera-na-sait.md).

# Кнопка мессенджера на сайт

1. **Вход в Контакт Центр**

* Зайдите в ваш аккаунт Битрикс24
* Перейдите в раздел "Контакт Центр".

2. **Выбор виджета**

* В Контакт Центре нажмите на плитку "Виджет на сайт".
* Выберите пункт "Добавить новый виджет".<br>

  <figure><img src="/files/RoRdkr59J4cYpfZsWPIL" alt=""><figcaption></figcaption></figure>

3. **Создание нового виджета**

* Задайте название вашему виджету.
* Установите чекбокс на опцию "WhatsApp".<br>

  <figure><img src="/files/bjJRk8uGpxn2L1YdMNDc" alt=""><figcaption></figcaption></figure>
* Настройте остальные параметры виджета по вашему усмотрению.

4. **Сохранение виджета**

* Нажмите кнопку "Сохранить".
* Битрикс24 выдаст код для вставки на ваш сайт.<br>

  <figure><img src="/files/DXd6VTHKIH1WN4qAvIJE" alt=""><figcaption></figcaption></figure>
* Если вы не будете заниматься вставкой кода самостоятельно, передайте этот код вашим программистам для интеграции на сайт.

5. **Измените цвет кнопки WhatsApp (по умолчанию оранжевый)**:

* Если вы хотите изменить цвет кнопки WhatsApp на зеленый, используйте следующий код и добавьте его на ваш сайт:

```html
<style>
    [class*=ui-icon-service-bitrix_whatcrm_net]  > i {
      background-image: url(https://api.whatcrm.net/img/whatsapp.svg);
}
</style>
```

6. **Изменение цвета иконки для Telegram**:

* Если нужно изменить цвет иконки для Telegram, используйте следующий код и добавьте его на ваш сайт:

```html
<style>
    [class*=ui-icon-service-telegram_whatcrm_net]  > i {
      background-image: url(https://api.whatcrm.net/img/telegram.svg);
}
</style>
```