# Instalar el chat en tu web

> Agrega a tu sitio web un botón de chat flotante (el globo que aparece en una esquina de la página). Cuando un visitante lo toca, conversa con tu agente.

Guía del Centro de ayuda de Bravilo · Tema: Canales de comunicación · Fuente: https://help.braviloai.com/a/chat-web

## ¿Para qué sirve?

Agrega a tu sitio web un botón de chat flotante (el globo que aparece en una esquina de la página). Cuando un visitante lo toca, conversa con tu agente.

## Antes de empezar

- El agente tiene que estar **publicado**. Se decide en **Ajustes** del agente, sección **Comportamiento**, en **Visibilidad del agente**: el interruptor tiene que estar prendido y decir **Público**.

  ![Ajustes del agente, sección Comportamiento: Visibilidad del agente con el interruptor prendido en Público](https://help.braviloai.com/capturas/chat-web-00-publico.png?v=acedfed227)

- Poder editar tu sitio web, o pedirle a quien lo administra que pegue un código.

## Cómo configurarlo

1. Entrá al agente y abrí **Integraciones**.
2. En la tarjeta **Web / Bubble – Chat Bubble**, hacé clic en **Configurar**.

   ![Ventana Web / Bubble – Chat Bubble: el aviso de que el agente tiene que estar publicado, la personalización (título de la ventana, mensajes iniciales y sugerencias), la vista previa y el botón Guardar](https://help.braviloai.com/capturas/chat-web-01-configurar.png?v=8328ddde2c)

3. Elegí cómo se ve y qué dice:
   - **Título de la ventana**, **mensajes iniciales** (lo primero que lee el visitante) y **sugerencias** (botones con preguntas listas para tocar).
   - **Color de marca** y **posición**: a la izquierda o a la derecha de la página.
   - **Guardar de qué página vino:** el agente sabe en qué parte de tu sitio estaba el visitante y puede responder distinto en la página de precios que en el blog.
   - En **Más opciones** podés sacar el globo de bienvenida, la opción de pedir una persona, el pedido de email o la marca «Con Bravilo».
4. Hacé clic en **Guardar**.
5. Bajá hasta **Código de instalación**, hacé clic en **Copiar** y pegá el código en tu sitio, al final de la página, justo antes de la etiqueta `</body>` (la línea que cierra el contenido de la página). Si no sabés dónde está, pasale el código a quien administra tu sitio.

   ![Código de instalación: el código del chat con el botón Copiar arriba a la derecha](https://help.braviloai.com/capturas/chat-web-02-codigo.png?v=09ec806ea7)

## Dónde pegar el código según tu sitio

| Plataforma | Dónde |
|---|---|
| **WordPress** | Apariencia → Editor de temas → `footer.php`, antes de `</body>`. O con un plugin para insertar código en el pie, como «Insert Headers and Footers» |
| **Wix** | Configuración del sitio → Código personalizado → al final del Body |
| **Shopify** | Tienda online → Temas → Editar código → `theme.liquid`, antes de `</body>` |
| **Webflow** | Project Settings → Custom Code → Footer Code |
| **HTML** | En tu archivo `.html`, justo antes de `</body>` |
| **Next.js / React** | En el componente que se carga en todas las páginas (el layout) |

Los menús de cada plataforma pueden cambiar con el tiempo. Si no encontrás la opción, buscá en su ayuda «agregar código personalizado al pie de página».

> Usá siempre el código que te da esta ventana. Si instalaste el chat hace tiempo con otro código, reemplazalo por este.

## Cómo comprobar que funciona

1. Abrí tu sitio: en la esquina que elegiste aparece el globo del chat.
2. Hacé clic, escribí una pregunta y fijate que el agente responda.
3. La conversación aparece en la sección **Conversaciones**.

## Preguntas frecuentes

**No aparece el globo del chat.**
Revisá que hayas pegado el código completo y en el lugar correcto, guardá los cambios de tu sitio y recargá la página sin usar la memoria del navegador (**Ctrl + Shift + R** en Windows, **Cmd + Shift + R** en Mac).

**Pegué el código y el chat no contesta.**
Revisá que el agente esté **publicado**: en **Ajustes**, **Visibilidad del agente** tiene que decir **Público**.

## Guías relacionadas

- [Página alojada en Bravilo](https://help.braviloai.com/a/pagina-alojada.md)
- [El menú de Bravilo y las pestañas del agente](https://help.braviloai.com/a/menu-y-secciones.md)