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

# Widget en frameworks

> Como integrar el widget en React, Vue, Angular y Next.js

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

## React

```jsx theme={null}
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

```jsx theme={null}
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

```vue theme={null}
<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

```typescript theme={null}
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

```jsx theme={null}
'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
}
```

<Warning>
  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.
</Warning>

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

```html theme={null}
<!-- 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>
```

<Tip>
  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.
</Tip>