# Widget web

Inserta un widget de chat con IA en el sitio web de un cliente, conectado desde el catálogo de Integraciones

> Full REST + WebSocket API reference: https://api.happ.tools/reference

Conectar el widget web pone una burbuja de chat con IA en el sitio de tu cliente para que los visitantes hablen con el asistente sin salir de la página. Se crea y gestiona desde el catálogo de **Integraciones** mediante un modal, como cualquier otro canal.

<WidgetPageDemo />

## Conectar [#connect]

1. En **Integraciones**, en la sección **Mensajeros**, haz clic en el mosaico **Widget**.
2. En el diálogo de conexión del widget, rellena:
   * **Nombre del widget**: una etiqueta para reconocer este widget.
   * **Descripción** (opcional): dónde se usa.
   * **Origins permitidos**: sitios autorizados a cargar el widget, cada uno con su dirección completa (`https://example.com`), añadidos con el botón de añadir o Enter. Deja la lista vacía para permitir cualquier sitio.
3. Haz clic en **Conectar** para crear el widget.
4. Obtén el código de inserción desde la tarjeta del widget en **Mis integraciones**: **Copiar código** en su menú lo copia al instante y **Editar** lo muestra en el bloque **Código de inserción**. Pégalo antes de `</body>` en cada página donde deba aparecer el widget.
5. Asigna un asistente de IA al widget.

## Personalizar [#customize]

El aspecto y la instalación se configuran en el agente al que está asignado el widget: abre el agente → **Widget**. La página **Web widget** tiene cuatro pestañas — **Appearance**, **Voice & content**, **Behaviour** e **Install** (por ahora solo en inglés). **Install** da el fragmento para HTML, Google Tag Manager, WordPress o Shopify y guarda la lista de **Allowed domains** (añade dominios sin protocolo como `example.com` con **Add domain**); cada dominio indica si el widget ya se ha visto funcionando allí.

## Campos [#fields]

| Campo              | Valor                                                                                                                                                                   |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Nombre del widget  | Etiqueta del widget                                                                                                                                                     |
| Descripción        | Nota opcional sobre dónde se usa                                                                                                                                        |
| Origins permitidos | Sitios autorizados a cargarlo. Lista vacía o `*`: cualquier sitio. Un dominio cubre también sus subdominios; `localhost` siempre funciona. Los demás sitios se rechazan |

**API:** [api.happ.tools/reference](https://api.happ.tools/reference)

## Siguiente [#next]

* [Canales](/docs/integrations/messengers): todas las aplicaciones de mensajería
* [Agentes](/docs/agents): configura quién responde