Tinkay

Vue y Nuxt

Plugin de Nuxt o composable de Vue 3.

Antes de empezar

  • Vue 3 o Nuxt 3

Nuxt: plugin de cliente

plugins/tinkay.client.ts
export default defineNuxtPlugin(() => {  const token = useRuntimeConfig().public.tinkayToken;  window.TinkaySettings = { token };  const s = document.createElement("script");  s.src = "https://cdn.tinkay.app/widget.js";  s.async = true;  document.body.appendChild(s);  return { provide: { tinkay: { identify: (a: Record<string, unknown>) => window.Tinkay?.identify(a) } } };});

Vue 3: composable

useTinkay.ts
import { onMounted, watch, type Ref } from "vue";export function useTinkay(token: string, user: Ref<{ email: string; name: string } | null>) {  onMounted(() => {    if (document.getElementById("tinkay-loader")) return;    window.TinkaySettings = { 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);  });  watch(user, (u) => u && window.Tinkay?.identify(u), { immediate: true });}

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.

  1. Abrí tu sitio en una pestaña nueva y confirmá que aparece el botón flotante.
  2. En la consola del navegador, escribí window.Tinkay y verificá que devuelve un objeto.
  3. 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.

Cómo saber que quedó bien

  • El botón aparece tras montar la app
  • `identify` corre al iniciar sesión