Skip to main content

​
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 HTMLCampo JSTipoDefaultDescripcion
data-api-keyapiKeystringuno de los dosAPI Key del tenant (tq_live_xxx)
—jwtTokenstringuno de los dosAlternativa: JWT del usuario (uso interno / SDK)
data-api-urlapiUrlstringhttps://api.thaliq.comURL de la API (override para self-hosted o staging)
data-agent-idagentIdstring(resuelto por API key)Forzar un agente especifico. Si la API key ya apunta a un agente, este campo lo sobreescribe
data-themetheme'light' | 'dark''light'Tema visual
data-positionposition'bottom-right' | 'bottom-left''bottom-right'Posicion del boton
data-titletitlestring'Asistente'Titulo del header del chat
data-primary-colorprimaryColorstring'#00D4AA'Color principal (hex). Default: signal teal de Thaliq
data-welcomewelcomeMessagestring'Hola! ¿En que puedo ayudarte?'Mensaje de bienvenida inicial
data-show-launchershowLauncherbooleantrueMostrar el boton flotante. Usa false para controlarlo con tu propio boton
data-channelchannelstring'widget'Canal de la conversacion ('widget', 'sdk', etc) — afecta filtrado de stats
—containerHTMLElement(overlay flotante)Mountear el widget dentro de un elemento del DOM en vez de overlay flotante
—mcpTokensRecord<string, string>{}Tokens MCP por server ID (passthrough al backend para auth de MCP servers que lo requieren)

​
Ejemplo programatico (control total)

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: 
<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: 
<script
  src="https://cdn.thaliq.com/widget.js"
  data-api-key="tq_live_xxx"
  data-position="bottom-right"
></script>

​
Personalizar textos

<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

<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: 
.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:
PantallaComportamiento
Desktop (>480px)Ventana flotante de 380x520px
Mobile (≤480px)Pantalla completa
No necesitas configuracion adicional para responsive.