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

# Widget

> Chat embebible para integrar tu agente IA en cualquier sitio web

El widget de Thaliq es un **script JavaScript ligero (\~5KB gzip)** que agrega un chat flotante a tu sitio web, conectado directamente a tu agente de IA.

## Caracteristicas

<CardGroup cols={2}>
  <Card title="Ligero" icon="feather">
    \~5KB gzipped, sin dependencias externas. Vanilla JavaScript puro.
  </Card>

  <Card title="Streaming" icon="bolt">
    Respuestas en tiempo real via SSE (Server-Sent Events).
  </Card>

  <Card title="Personalizable" icon="palette">
    Colores, textos, posicion — adaptalo a tu marca.
  </Card>

  <Card title="Responsive" icon="mobile">
    Ventana flotante en desktop, pantalla completa en mobile.
  </Card>

  <Card title="Interactivo" icon="hand-pointer">
    Soporta acciones Human-in-the-Loop (consent, formularios, seleccion).
  </Card>

  <Card title="API programatica" icon="code">
    Controla el widget por codigo: abrir, cerrar, enviar mensajes.
  </Card>
</CardGroup>

## Vista rapida

```html theme={null}
<!-- Una sola linea para agregar el chat a tu sitio -->
<script
  src="https://cdn.thaliq.com/widget.js"
  data-api-key="tq_ak_xxx"
></script>
```

<Tip>
  Para widget publico recomendamos **Access Keys** (`tq_ak_...`). Tambien funciona con API Keys (`tq_live_...`). Ambas se gestionan desde **Agente > Credentials**.
</Tip>

Esto renderiza un boton de chat en la esquina inferior derecha. Al hacer click, se abre una ventana de chat conectada a tu agente.

## Flujo de comunicacion

```
Tu sitio web                         Thaliq API
    │                                    │
    │  GET /api/agent/stream?q=...       │
    │  Headers:                          │
    │    x-api-key: tq_ak_xxx            │
    │    x-integration-type: widget      │
    │───────────────────────────────────▶│
    │                                    │  Procesa con Claude AI
    │                                    │  Ejecuta tools (si aplica)
    │  SSE: content.delta                │
    │◀───────────────────────────────────│
    │  SSE: content.delta                │
    │◀───────────────────────────────────│
    │  SSE: response.completed           │
    │◀───────────────────────────────────│
```

## Que tools ve el widget

El widget envia automaticamente el header `x-integration-type: widget`, lo cual filtra las tools disponibles:

* **Tools con `requiresAuth: false`** → Disponibles en el widget
* **Tools con `requiresAuth: true`** → No disponibles (requieren autenticacion del usuario)

Esto garantiza que usuarios anonimos en tu sitio web solo accedan a tools publicas.

## Compatibilidad

| Navegador | Version minima |
| --------- | -------------- |
| Chrome    | 80+            |
| Firefox   | 75+            |
| Safari    | 13+            |
| Edge      | 80+            |

## Siguiente paso

<Card title="Instalacion" icon="download" href="/widget/installation">
  Aprende como instalar el widget en tu sitio web.
</Card>