Skip to main content

​
Opciones de configuracion

Todas las opciones se pasan como atributos data-* en el script tag.
AtributoTipoDefaultDescripcion
data-api-keystringrequeridoTu API Key del tenant
data-api-urlstringhttps://api.thaliq.comURL de la API
data-theme'light' | 'dark''light'Tema visual
data-position'bottom-right' | 'bottom-left''bottom-right'Posicion del boton
data-titlestring'Asistente'Titulo en el header del chat
data-primary-colorstring'#7C5CFC'Color principal (hex)
data-welcomestring'Hola! ¿En que puedo ayudarte?'Mensaje de bienvenida
data-show-launcher'true' | 'false''true'Mostrar el boton flotante. Usa false para controlarlo con tu propio boton

​
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: #7C5CFC;       /* Color principal */
  --tq-primary-hover: #6B4FE0; /* Color hover */
  --tq-bg: #ffffff;             /* Fondo */
  --tq-bg-secondary: #f8f9fa;  /* Fondo secundario */
  --tq-text: #1a1a2e;          /* Texto principal */
  --tq-text-secondary: #6c757d;/* Texto secundario */
  --tq-border: #e9ecef;        /* Bordes */
  --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.