> ## 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.

# Configuracion

> Personaliza la apariencia y comportamiento del widget

## Opciones de configuracion

Hay dos formas de configurar el widget:

1. **Atributos `data-*` en el script tag** — auto-init, ideal para setups simples.
2. **`ThaliqWidget.init({ ... })` en JS** — control total, podes pasar campos que no tienen `data-*` equivalente (ej: `container`, `mcpTokens`).

### Tabla completa

| Atributo HTML        | Campo JS         | Tipo                              | Default                           | Descripcion                                                                                  |
| -------------------- | ---------------- | --------------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------- |
| `data-api-key`       | `apiKey`         | `string`                          | *uno de los dos*                  | API Key del tenant (`tq_live_xxx`)                                                           |
| —                    | `jwtToken`       | `string`                          | *uno de los dos*                  | Alternativa: JWT del usuario (uso interno / SDK)                                             |
| `data-api-url`       | `apiUrl`         | `string`                          | `https://api.thaliq.com`          | URL de la API (override para self-hosted o staging)                                          |
| `data-agent-id`      | `agentId`        | `string`                          | (resuelto por API key)            | Forzar un agente especifico. Si la API key ya apunta a un agente, este campo lo sobreescribe |
| `data-theme`         | `theme`          | `'light' \| 'dark'`               | `'light'`                         | Tema visual                                                                                  |
| `data-position`      | `position`       | `'bottom-right' \| 'bottom-left'` | `'bottom-right'`                  | Posicion del boton                                                                           |
| `data-title`         | `title`          | `string`                          | `'Asistente'`                     | Titulo del header del chat                                                                   |
| `data-primary-color` | `primaryColor`   | `string`                          | `'#00D4AA'`                       | Color principal (hex). Default: signal teal de Thaliq                                        |
| `data-welcome`       | `welcomeMessage` | `string`                          | `'Hola! ¿En que puedo ayudarte?'` | Mensaje de bienvenida inicial                                                                |
| `data-show-launcher` | `showLauncher`   | `boolean`                         | `true`                            | Mostrar el boton flotante. Usa `false` para controlarlo con tu propio boton                  |
| `data-channel`       | `channel`        | `string`                          | `'widget'`                        | Canal de la conversacion (`'widget'`, `'sdk'`, etc) — afecta filtrado de stats               |
| —                    | `container`      | `HTMLElement`                     | (overlay flotante)                | Mountear el widget dentro de un elemento del DOM en vez de overlay flotante                  |
| —                    | `mcpTokens`      | `Record<string, string>`          | `{}`                              | Tokens MCP por server ID (passthrough al backend para auth de MCP servers que lo requieren)  |

### Ejemplo programatico (control total)

```js theme={null}
ThaliqWidget.init({
  apiKey: 'tq_live_xxx',
  apiUrl: 'https://api.thaliq.com',
  agentId: 'agent_uuid',           // forzar un agente especifico
  primaryColor: '#10B981',
  position: 'bottom-right',
  welcomeMessage: 'Hola! Soy Sofia.',
  container: document.getElementById('chat-mount'), // mount custom
  mcpTokens: {
    'github-mcp': 'ghp_...',
    'jira-mcp': 'eyJh...',
  },
});
```

## Personalizar el color

El `primaryColor` se aplica al boton de chat, header y botones de envio. Usa un color hex que combine con tu marca:

```html theme={null}
<script
  src="https://cdn.thaliq.com/widget.js"
  data-api-key="tq_live_xxx"
  data-primary-color="#10B981"
></script>
```

## Cambiar la posicion

Puedes colocar el boton de chat en la esquina inferior izquierda o derecha:

<CodeGroup>
  ```html Inferior derecha (default) theme={null}
  <script
    src="https://cdn.thaliq.com/widget.js"
    data-api-key="tq_live_xxx"
    data-position="bottom-right"
  ></script>
  ```

  ```html Inferior izquierda theme={null}
  <script
    src="https://cdn.thaliq.com/widget.js"
    data-api-key="tq_live_xxx"
    data-position="bottom-left"
  ></script>
  ```
</CodeGroup>

## Personalizar textos

```html theme={null}
<script
  src="https://cdn.thaliq.com/widget.js"
  data-api-key="tq_live_xxx"
  data-title="Soporte MiEmpresa"
  data-welcome="Hola! Soy el asistente de MiEmpresa. ¿Como puedo ayudarte?"
></script>
```

## Ejemplo completo

```html theme={null}
<script
  src="https://cdn.thaliq.com/widget.js"
  data-api-key="tq_live_xxx"
  data-title="Asistente Virtual"
  data-primary-color="#00D4AA"
  data-position="bottom-right"
  data-welcome="Bienvenido! Estoy aqui para ayudarte con tus consultas."
></script>
```

## CSS Variables

El widget usa CSS variables internamente. Los estilos estan encapsulados y no afectan al resto de tu sitio:

```css theme={null}
.thaliq-widget {
  --tq-primary: #00D4AA;       /* Signal teal — color principal default */
  --tq-primary-hover: #00B894; /* Signal dim — hover */
  --tq-bg: #FAF9F6;             /* Off-white calido */
  --tq-bg-secondary: #f3f1ed;  /* Warm light gray */
  --tq-text: #1a1816;          /* Warm dark — texto principal */
  --tq-text-secondary: #6B6560;/* Texto secundario */
  --tq-border: rgba(26,24,22,0.1); /* Borde sutil */
  --tq-radius: 16px;           /* Border radius */
}
```

## Responsive

El widget se adapta automaticamente:

| Pantalla             | Comportamiento                |
| -------------------- | ----------------------------- |
| **Desktop** (>480px) | Ventana flotante de 380x520px |
| **Mobile** (≤480px)  | Pantalla completa             |

No necesitas configuracion adicional para responsive.