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

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

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

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

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

  <figure><img src="https://878054689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2xW4G1Pkq9SjzXSwvrKS%2Fuploads%2F95VFa84Cr2NuDap6w6c0%2F%D0%B2%D0%B41.png?alt=media&#x26;token=276466f2-fbcd-4a3a-b0e0-89f2af382f63" alt=""><figcaption></figcaption></figure>

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

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

  <figure><img src="https://878054689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2xW4G1Pkq9SjzXSwvrKS%2Fuploads%2FkEOUssYmlgyLKJpalHO2%2F%D0%B2%D0%B42.png?alt=media&#x26;token=72e8e2b4-f4b1-44ee-959f-020c0b5b8902" alt=""><figcaption></figcaption></figure>
* Настройте остальные параметры виджета по вашему усмотрению.

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

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

  <figure><img src="https://878054689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2xW4G1Pkq9SjzXSwvrKS%2Fuploads%2F0qGgE5AuhGP74TUgUFxL%2F%D0%B2%D0%B43.png?alt=media&#x26;token=bb78f5f6-a240-49eb-ac7e-2c5808c68ecd" 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>
```