> 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/portugues/produtos/whatsapp/bitrix24/boton-de-mensajeria-en-el-sitio-web.md).

# Botón de mensajería en el sitio web

1. **Iniciar sesión en el Centro de Contacto**

* Inicie sesión en su cuenta Bitrix24
* Vaya a la sección «Centro de Contacto

2. **Seleccionar un widget**

* En el Centro de contacto, haga clic en la ficha «Widget de sitio web».
* Seleccione «Añadir un nuevo widget».

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

3. **Crear un nuevo widget**

* Pon un nombre a tu widget.
* Marca la casilla de la opción «WhatsApp».

  <figure><img src="/files/UEHN9LlK6eN4mZTovjRn" alt=""><figcaption></figcaption></figure>
* Personaliza el resto de la configuración del widget a tu gusto.

4. **Guardar el widget**

* Haz clic en el botón «Guardar».

* Bitrix24 le dará un código para pegar en su sitio.

  <figure><img src="/files/0iJOexY1as7l6xkbW2Ld" alt=""><figcaption></figcaption></figure>

* Si no va a insertar el código usted mismo, facilite este código a sus programadores para que lo integren en el sitio.

5. **Cambia el color del botón de WhatsApp (naranja por defecto):**

* Si quieres cambiar el color del botón de WhatsApp a verde, utiliza el siguiente código y añádelo a tu página web:

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

6. **Cambiar el color del icono de Telegram:**&#x20;

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