añade chat en vivo a una web hecha con lovable, bolt o v0

Hiciste la web describiéndola, así que añade el chat de la misma manera. Esta guía te da un prompt para Lovable, Bolt o v0, muestra dónde debería quedar el snippet en el código que generan y cómo comprobar en la web publicada que no carga nada antes de un clic.

qué generan estas herramientas

Desde el chat las tres se parecen, pero escriben tipos de proyecto distintos, y eso decide dónde va una etiqueta script:

• Lovable genera una app de Vite con React. Hay un index.html en la raíz del proyecto; es la página en la que se renderiza cada ruta.
• Bolt genera lo que le pediste. La mayoría de proyectos son apps de Vite con un index.html; algunos son Next.js, Astro o HTML puro (la guía de HTML puro cubre este último caso).
• v0 genera Next.js con el app router. La página compartida es app/layout.tsx.

El chat necesita una etiqueta en cada página. En una single-page app eso es index.html. En Next.js, el layout raíz. En ningún otro sitio.

antes de empezar: el dominio

Spookat vincula un sitio a su dominio. El chat solo se conecta desde ese dominio y sus subdominios, y esa es una de las razones por las que nadie puede copiar tu snippet en su propia web.

Con estas herramientas importa, porque tu proyecto vive en varias direcciones:

• la vista previa dentro de la herramienta, en el dominio de la propia herramienta
• la dirección publicada que te da la herramienta, normalmente un subdominio suyo
• tu dominio propio, si conectaste uno

Registra el sitio con la dirección que usarán los visitantes. Si es un dominio propio, usa ese; su www y los demás subdominios están incluidos. Si publicas en el subdominio de la herramienta, registra ese subdominio completo, no el dominio principal de la herramienta. En la vista previa de la herramienta el lanzador aparece, pero el chat no se conecta. Prueba en la web publicada.

el prompt

Primero necesitas tu clave de sitio. En el panel de Spookat, añade el sitio con el dominio correcto; la página de instalación muestra el snippet. Luego pega esto en el chat de la herramienta, con tu clave en lugar de YOUR_SITE_KEY:

Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

El prompt es así de concreto a propósito. A estas herramientas les gusta ayudar, y “añade un widget de chat” puede acabar en un componente React nuevo, un botón flotante propio o la etiqueta pegada en cinco páginas. Una etiqueta en un solo sitio es todo lo que necesita Spookat: el lanzador dibuja su propio botón.

el aspecto, en el mismo prompt

El aspecto del widget se configura en el panel de Spookat y viaja dentro del lanzador, así que la herramienta no necesita saber nada de él. Si prefieres tenerlo en el código, añade una segunda línea al prompt:

Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>

Hay 8 estilos. accent es el color de tu marca en hexadecimal; el color del texto encima se elige por contraste. La documentación lista todas las claves.

dónde debería quedar

Abre la vista de código y compruébalo. En una app de Vite (Lovable, la mayoría de proyectos de Bolt), index.html debería terminar así:

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

En Next.js (v0, algunos proyectos de Bolt), app/layout.tsx lleva la etiqueta dentro de <body>, después de {children}:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}

Si la herramienta usó next/script, también vale, con strategy="afterInteractive" o "lazyOnload". Lo que no quieres ver:

• la etiqueta dentro de un componente de página, como Home.tsx o app/page.tsx: el chat solo existiría en esa página
• un useEffect que crea el elemento script: funciona, pero es más código para la misma etiqueta
• un botón o panel de chat que dibujó la propia herramienta: bórralo, Spookat trae el suyo

Si algo salió mal, dilo en una frase: “Remove the chat code you added and put only the script tag in index.html.” Estas herramientas arreglan bien este tipo de cosas cuando la instrucción es concreta.

publica y luego comprueba

Publica la web y abre la dirección publicada en una ventana privada. Abre DevTools:

1. Network, marca “Disable cache”, recarga y escribe spookat en el filtro. Deberías ver una petición: el lanzador desde cdn.spookat.com, unos 2 kb. Dos, ambas desde cdn.spookat.com, si tu código define en window.Spookat un estilo distinto del que publicaste. Nada hacia api.spookat.com.
2. Application, cookies y local storage: nada de Spookat.
3. Haz clic en el lanzador. El panel se carga desde la CDN. Escribe un mensaje de prueba. Con Slack o Discord conectado, aparece ahí; responde y mira cómo llega al widget.

Si el lanzador no aparece en absoluto, la etiqueta no llegó al build publicado. Revisa otra vez la vista de código. Si el lanzador aparece pero el chat no se conecta, el dominio del panel no coincide con la dirección en la que estás.

La guía principal explica cada una de estas comprobaciones con más detalle.

conecta las respuestas

El chat debería llegarte donde ya estás. Conecta Slack o Discord en el panel, elige un canal y cada visitante tendrá su propio hilo. La guía de Slack y la guía de Discord cuentan los detalles.

por qué no dejar que la herramienta haga un chat

Podrías pedírselo. La herramienta te hará en minutos un panel bonito con un campo de texto. Luego empiezan las preguntas: a dónde van los mensajes, a quién se avisa, cómo llega la respuesta a un visitante que cerró la pestaña, qué pasa con el spam, quién lo mantiene funcionando. Eso es un servidor, una base de datos, una integración con Slack y un sistema de emails, y nada de eso es el producto que estabas construyendo.

Spookat es una etiqueta, cuesta $4.99 al mes por sitio con starter, y la prueba dura 14 días sin tarjeta.

si usas claude code o cursor

Exporta el proyecto a un repositorio y deja que un agente de código lo haga con el servidor MCP de Spookat. También puede ajustar el widget a los colores de tu web y configurarlo todo sin que copies claves. La guía de Claude Code lo explica paso a paso.

ajusta el aspecto a una web generada

Estas herramientas suelen producir un estilo reconocible: una sans-serif limpia, sombras suaves, tarjetas redondeadas, un color de acento. El widget debería parecer parte de la web, no una pegatina de otro sitio.

• Estilo. Para el aspecto generado típico, empieza con clean o soft. Si tu web es más oscura y técnica, prueba terminal. Si le diste un look plano y contundente, brutal o swiss. Puedes cambiarlo en el panel y ver cada uno en una vista previa en vivo antes de publicar.
• Acento. Usa el mismo hexadecimal que tus botones. La herramienta suele tenerlo en su config de Tailwind o en una variable CSS; pregúntale “what is the primary color’s hex?”
• Fuente. system no descarga nada y se parece bastante a la mayoría de webs generadas. Si tu web usa una fuente concreta y nosotros la alojamos, elígela; solo se carga después del clic.
• Lado. Si la herramienta puso un botón flotante propio abajo a la derecha (una flecha para volver arriba, un icono de ajustes de cookies), pon el lanzador a la izquierda.

lo que ven tus visitantes

Un botón pequeño en la esquina, con tus colores. No pasa nada más hasta que hacen clic. Entonces se abre el panel con tu saludo y una línea que dice que responde una persona. Escriben, y el mensaje llega a tu hilo de Slack o Discord, o a nuestra bandeja de entrada y su app para el móvil. Si se van antes de tu respuesta, pueden dejar un email; con pro, la respuesta les llega ahí. El widget habla el idioma de su navegador, uno de 12, salvo que tú fijes uno.

después de que la herramienta regenere

Estas herramientas reescriben archivos. Un cambio grande en el layout (“conviértelo en un panel”, “pásalo a modo oscuro”) puede quitar la etiqueta de index.html o del layout raíz sin avisar. Después de una regeneración grande, abre la web publicada y comprueba que el lanzador sigue ahí. Si desapareció, el mismo prompt lo vuelve a poner.

más de un proyecto

Con estas herramientas sale barato empezar una segunda y una tercera web. En Spookat cada una es un sitio aparte, con su propia clave, dominio, aspecto y canal, así que un chat nunca acaba en el hilo del proyecto equivocado. El primer sitio de una cuenta paga el precio completo; cada sitio adicional en la misma cuenta que pagas por Spookat tiene un 30% de descuento, en todos los planes. Varios sitios pueden compartir un canal de Slack o Discord si responden las mismas personas, pero la tarjeta solo muestra la ruta de la página, no de qué sitio vino el chat. Dale a cada sitio su propio canal si necesitas distinguirlos.

checklist

• El sitio está registrado con la dirección que usan los visitantes.
• Una etiqueta, async, en index.html o en el layout raíz.
• Ningún botón ni componente de chat hecho por la propia herramienta.
• Probado en la web publicada, no en la vista previa.
• Una petición antes de un clic (dos, ambas desde cdn.spookat.com, si tu código define un estilo que no publicaste), sin cookies.
• Slack o Discord conectado.

Descríbelo, publícalo, compruébalo. Luego responde la primera pregunta desde un hilo.