Next.js

App Router con next/script y identificación desde la sesión del servidor.

Antes de empezar

Next.js 14 o superior
El token público en una variable de entorno pública

App Router

Usá next/script con strategy="afterInteractive" en el layout raíz.

app/layout.tsx

import Script from "next/script";export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="es">      <body>        {children}        <Script id="tinkay-settings" strategy="afterInteractive">          {`window.TinkaySettings = { token: "${process.env.NEXT_PUBLIC_TINKAY_TOKEN}" };`}        </Script>        <Script src="https://cdn.tinkay.app/widget.js" strategy="afterInteractive" />      </body>    </html>  );}

Identificar con la sesión

Leé la sesión en el servidor y pasala a un componente cliente mínimo que solo llama a identify.

components/tinkay-identify.tsx

"use client";import { useEffect } from "react";export function TinkayIdentify({ email, name, plan }: { email: string; name: string; plan?: string }) {  useEffect(() => {    window.Tinkay?.identify({ email, name, plan });  }, [email, name, plan]);  return null;}

Pages Router

pages/_app.tsx

import Script from "next/script";export default function MyApp({ Component, pageProps }) {  return (    <>      <Component {...pageProps} />      <Script id="tinkay-settings" strategy="afterInteractive">        {`window.TinkaySettings = { token: "${process.env.NEXT_PUBLIC_TINKAY_TOKEN}" };`}      </Script>      <Script src="https://cdn.tinkay.app/widget.js" strategy="afterInteractive" />    </>  );}

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.
Content Security Policy en `next.config`: sumá https://cdn.tinkay.app a script-src y https://app.tinkay.app a frame-src y connect-src.

Cómo saber que quedó bien

El botón aparece en todas las rutas
No hay errores de hidratación en la consola