React

Cargar el loader una sola vez y sincronizar la identidad con tu estado de sesión.

Antes de empezar

Una app de React (Vite, CRA o similar)
El token público del workspace

Componente de carga

Montalo una sola vez, cerca de la raíz. El loader ignora cargas repetidas, pero un componente dedicado deja claro dónde vive la integración.

TinkayMessenger.tsx

import { useEffect } from "react";const TOKEN = "pk_live_xxx";export function TinkayMessenger({ user }: { user?: { email: string; name: string; plan?: string } }) {  useEffect(() => {    if (document.getElementById("tinkay-loader")) return;    window.TinkaySettings = { token: TOKEN };    const s = document.createElement("script");    s.id = "tinkay-loader";    s.src = "https://cdn.tinkay.app/widget.js";    s.async = true;    document.body.appendChild(s);  }, []);  useEffect(() => {    if (user) window.Tinkay?.identify(user);  }, [user]);  return null;}

Usarlo en la app

App.tsx

import { TinkayMessenger } from "./TinkayMessenger";export default function App() {  const { user } = useAuth();  return (    <>      <Routes />      <TinkayMessenger user={user} />    </>  );}

Tipos de TypeScript

Declaralos una vez para que window.Tinkay y window.TinkaySettings tengan autocompletado.

tinkay.d.ts

interface TinkayVisitor {  email?: string;  name?: string;  plan?: string;  [key: string]: string | number | boolean | undefined;}interface TinkayApi {  open(): void;  close(): void;  toggle(): void;  identify(attrs: TinkayVisitor): void;  isOpen(): boolean;}declare global {  interface Window {    Tinkay?: TinkayApi;    TinkaySettings?: { token: string; hideLauncher?: boolean; position?: "left" | "right"; visitor?: TinkayVisitor };  }}export {};

Verificar la instalación

Entrá a Configuración, Instalación en tu workspace, pegá la URL pública del sitio y tocá Probar instalación. Tinkay busca el script y valida que el dominio esté permitido.

Abrí tu sitio en una pestaña nueva y confirmá que aparece el botón flotante.
En la consola del navegador, escribí window.Tinkay y verificá que devuelve un objeto.
Escribí un mensaje de prueba y confirmá que llega al Inbox.

Errores frecuentes

El widget no aparece: el dominio no está en Configuración, Dominios. Agregalo y recargá.
Aparece en desarrollo pero no en producción: agregá también el dominio de producción, incluida la variante con www.
Content Security Policy: permití https://cdn.tinkay.app en script-src y https://app.tinkay.app en frame-src y connect-src.
Se carga dos veces: verificá que el componente esté montado una sola vez y que el id del script sea único.

Cómo saber que quedó bien

El botón aparece y sobrevive a los cambios de ruta
`identify` corre al iniciar sesión