Widget en frameworks - Thaliq Docs

El widget se carga via CDN con un script tag. En frameworks SPA, puedes cargarlo dinamicamente y controlarlo con la API programatica.

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Cargar el widget dinamicamente
    const script = document.createElement('script');
    script.src = 'https://cdn.thaliq.com/widget.js';
    script.setAttribute('data-api-key', 'tq_live_TU_API_KEY');
    script.setAttribute('data-title', 'Soporte');
    document.body.appendChild(script);

    return () => {
      window.ThaliqWidget?.destroy();
      script.remove();
    };
  }, []);

  return (
    <div>
      <h1>Mi App</h1>
      <button onClick={() => window.ThaliqWidget?.open()}>
        Abrir chat
      </button>
    </div>
  );
}

Con un hook reutilizable

import { useEffect, useCallback } from 'react';

function useThaliq(apiKey, options = {}) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.thaliq.com/widget.js';
    script.setAttribute('data-api-key', apiKey);
    if (options.title) script.setAttribute('data-title', options.title);
    if (options.primaryColor) script.setAttribute('data-primary-color', options.primaryColor);
    if (options.showLauncher === false) script.setAttribute('data-show-launcher', 'false');
    document.body.appendChild(script);

    return () => {
      window.ThaliqWidget?.destroy();
      script.remove();
    };
  }, []);

  return {
    open: useCallback(() => window.ThaliqWidget?.open(), []),
    close: useCallback(() => window.ThaliqWidget?.close(), []),
    send: useCallback((msg) => window.ThaliqWidget?.send(msg), []),
    reset: useCallback(() => window.ThaliqWidget?.reset(), []),
  };
}

// Uso:
function MyComponent() {
  const chat = useThaliq('tq_live_TU_API_KEY', {
    title: 'Soporte',
    showLauncher: false,
  });

  return <button onClick={chat.open}>Ayuda</button>;
}

Vue 3

<template>
  <div>
    <h1>Mi App</h1>
    <button @click="openChat">Abrir chat</button>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://cdn.thaliq.com/widget.js';
  script.setAttribute('data-api-key', 'tq_live_TU_API_KEY');
  script.setAttribute('data-title', 'Soporte');
  document.body.appendChild(script);
});

onUnmounted(() => {
  window.ThaliqWidget?.destroy();
  script?.remove();
});

const openChat = () => window.ThaliqWidget?.open();
</script>

Angular

import { Component, OnInit, OnDestroy, Renderer2, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `
    <h1>Mi App</h1>
    <button (click)="openChat()">Abrir chat</button>
  `,
})
export class AppComponent implements OnInit, OnDestroy {
  private renderer = inject(Renderer2);
  private document = inject(DOCUMENT);
  private script?: HTMLScriptElement;

  ngOnInit() {
    this.script = this.renderer.createElement('script');
    this.script!.src = 'https://cdn.thaliq.com/widget.js';
    this.script!.setAttribute('data-api-key', 'tq_live_TU_API_KEY');
    this.script!.setAttribute('data-title', 'Soporte');
    this.renderer.appendChild(this.document.body, this.script);
  }

  openChat() {
    (window as any).ThaliqWidget?.open();
  }

  ngOnDestroy() {
    (window as any).ThaliqWidget?.destroy();
    this.script?.remove();
  }
}

Next.js

'use client';

import { useEffect } from 'react';

export default function ThaliqChat() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.thaliq.com/widget.js';
    script.setAttribute('data-api-key', 'tq_live_TU_API_KEY');
    document.body.appendChild(script);

    return () => {
      window.ThaliqWidget?.destroy();
      script.remove();
    };
  }, []);

  return null; // El widget se renderiza en el DOM directamente
}

En frameworks con SSR (Next.js, Nuxt), el script debe cargarse solo en el cliente. El widget manipula el DOM directamente y no funciona en server-side rendering.

Alternativa: Script tag directo

Si tu framework genera un index.html (como React con CRA o Vite), puedes simplemente agregar el script en el HTML sin codigo adicional:

<!-- public/index.html o index.html -->
<body>
  <div id="root"></div>

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

Este metodo es el mas simple. El widget se carga automaticamente y no necesitas codigo JavaScript para inicializarlo. Usa la carga dinamica solo si necesitas controlar cuando se muestra o destruir el widget al navegar.