> ## Documentation Index
> Fetch the complete documentation index at: https://docs.juryo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget web

> Añade el chat de tu agente a la web del despacho con una línea de código

El widget muestra un botón flotante en tu web que abre el chat con el agente
del despacho. El visitante escribe y el agente responde en tiempo real; la
conversación aparece en tu bandeja de **Conversaciones** como cualquier otro
canal.

## 1. Obtén tu clave

En la plataforma, ve a **Ajustes → Integraciones → Canales** y añade un canal
de tipo **Widget (API)**. Se genera una clave publicable con el formato
`pk_live_…`. Esta clave identifica a tu despacho: está pensada para ser
visible en el código de tu página.

## 2. Añade el script

Pega esta línea antes del cierre de `</body>` en tu web:

```html theme={null}
<script
  src="https://widget.juryo.ai/embed.js"
  data-key="pk_live_TU_CLAVE"
  defer
></script>
```

Con eso el botón de chat ya aparece en la esquina inferior derecha.

## Personalización

Todos los atributos son opcionales salvo `data-key`:

| Atributo           | Descripción                                                                                   | Por defecto          |
| ------------------ | --------------------------------------------------------------------------------------------- | -------------------- |
| `data-key`         | Clave publicable del canal (obligatorio)                                                      | —                    |
| `data-name`        | Nombre del despacho, mostrado en la cabecera del chat                                         | —                    |
| `data-title`       | Título accesible del panel                                                                    | `data-name` o «Chat» |
| `data-color`       | Color principal del widget, en hexadecimal                                                    | `#053531`            |
| `data-privacy-url` | Política de privacidad del despacho, enlazada en el aviso de bienvenida (debe ser `https://`) | —                    |
| `data-position`    | Lado de la pantalla: `right` o `left`                                                         | `right`              |

Ejemplo completo:

```html theme={null}
<script
  src="https://widget.juryo.ai/embed.js"
  data-key="pk_live_TU_CLAVE"
  data-name="Despacho García"
  data-color="#1a4d47"
  data-privacy-url="https://despachogarcia.es/privacidad"
  defer
></script>
```

## Comportamiento

* El chat se carga solo cuando el visitante lo abre por primera vez — el
  script no añade peso a la carga de tu página.
* La tecla `Escape` cierra el panel.
* En pantallas de menos de 480 px el chat ocupa la pantalla completa.
* Si el script se incluye dos veces por error, solo se inicializa una vez.
* Los visitantes son anónimos hasta que se identifican durante la
  conversación.