Widget basico - Thaliq Docs

HTML minimo

El ejemplo mas simple: un sitio web con el widget de Thaliq.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio Web</title>
</head>
<body>
  <h1>Bienvenido a Mi Empresa</h1>
  <p>Contenido de tu sitio web...</p>

  <!-- Widget de Thaliq -->
  <script
    src="https://cdn.thaliq.com/widget.js"
    data-api-key="tq_live_TU_API_KEY"
    data-title="Soporte"
    data-welcome="Hola! ¿En que puedo ayudarte?"
  ></script>
</body>
</html>

Con personalizacion completa

<script
  src="https://cdn.thaliq.com/widget.js"
  data-api-key="tq_live_TU_API_KEY"
  data-title="Asistente Virtual"
  data-primary-color="#10B981"
  data-position="bottom-left"
  data-welcome="Bienvenido! Soy el asistente de MiEmpresa. Puedo ayudarte con informacion de productos, pedidos y soporte tecnico."
></script>

En lugar de usar el boton flotante default, puedes ocultarlo con data-show-launcher="false" y usar tu propio boton:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio</title>
  <style>
    .help-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 12px 24px;
      background: #7C5CFC;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
    }
    .help-button:hover {
      background: #6A4DE0;
    }
  </style>
</head>
<body>
  <h1>Mi Sitio Web</h1>

  <button class="help-button" onclick="ThaliqWidget.open()">
    ¿Necesitas ayuda?
  </button>

  <script
    src="https://cdn.thaliq.com/widget.js"
    data-api-key="tq_live_TU_API_KEY"
    data-show-launcher="false"
  ></script>
</body>
</html>

Abre el widget automaticamente con un mensaje relevante segun la pagina:

<script
  src="https://cdn.thaliq.com/widget.js"
  data-api-key="tq_live_TU_API_KEY"
></script>

<script>
  // Esperar a que cargue
  window.addEventListener('load', () => {
    const page = window.location.pathname;

    // En la pagina de pricing, preguntar por planes
    if (page.includes('/pricing')) {
      setTimeout(() => {
        ThaliqWidget.open();
        ThaliqWidget.send('Me interesa saber mas sobre los planes');
      }, 2000);
    }

    // En la pagina de soporte, abrir el chat
    if (page.includes('/support')) {
      setTimeout(() => ThaliqWidget.open(), 1000);
    }
  });
</script>