# Widget web — chat de tu agente de IA en tu sitio

> Agrega a tu sitio web una burbuja de chat atendida por tu agente de IA de watsi. Cómo crear el widget, personalizarlo, limitarlo a tu dominio e instalarlo.

Source: https://docs.watsi.ai/channels/web-widget

El **widget web** pone en tu sitio una burbuja de chat atendida por tu agente de IA de watsi. Lo creas en **Integraciones → Widget Web**, eliges colores, título y posición, autorizas tu dominio y pegas un código antes de la etiqueta `</body>` de tu sitio. Las conversaciones llegan a la misma bandeja que WhatsApp, y el agente responde con su configuración del canal Web.

> **Note**
> El widget web no aparece en Integraciones para las cuentas del giro inmobiliario.

## Crea tu widget

### Abre Widget Web
    En **Integraciones**, en la tarjeta **Widget Web** («Chat en tu sitio web»), pulsa
    **Configurar**.
### Ponle nombre
    Escribe el **Nombre del widget** (por ejemplo, «Chat del sitio principal») y pulsa **Crear
    Widget**.
### Personaliza la apariencia
    En **Apariencia** eliges **Color**, **Título**, **Subtítulo**, **Posición** (**Izquierda** o
    **Derecha**), **Estilo** (**Suave** o **Suave + Cristal**), **Tema** (**Automático**, **Claro**
    u **Oscuro**) y si quieres **Sonido** al enviar y recibir mensajes. La **Vista previa** se
    actualiza al momento y puedes **Simular conversación**.
### Autoriza tu dominio
    En **Dónde puede aparecer**, agrega el dominio de tu sitio (por ejemplo, `tudominio.com`). La
    versión con `www.` se incluye automáticamente.

> **Warning**
  Sin un dominio autorizado, cualquiera podría usar tu widget en otra web. Agrega siempre el dominio
  de tu sitio.

## Instálalo en tu sitio

### Copia tu código
En **Código para tu sitio**, pulsa **Copiar**.
### Pégalo en tu web
Colócalo justo antes de `</body>` en tu sitio (en tu plantilla, en Wix, WordPress o el constructor que uses).
### Verifica que cargó
La burbuja aparece en la esquina que elegiste. En watsi, el widget pasa de **Esperando instalación** a **Conectado**, y verás **Detectado en vivo en tu sitio** en cuanto cargue por primera vez.

## Activa el agente del canal Web

Si el widget muestra **Sin agente activo**, el agente todavía no responde en tu sitio. Pulsa **Activar en el Playground** y activa el agente para el canal Web.

## Relacionado

- [Instagram y Messenger](/channels/instagram-messenger)
    Responde también los mensajes directos de Meta.
- [Canales de origen](/channels/source-links)
    Enlaces de WhatsApp rastreables por campaña.