añade chat en vivo a un sitio en html puro

30 de septiembre de 2026 · por kuba · 7 min de lectura

Un sitio en HTML puro necesita exactamente una línea para tener chat en vivo: una etiqueta script antes de </body>. Esta guía muestra dónde va esa línea en páginas escritas a mano y en sitios hechos con un generador estático, todas las opciones que puedes poner junto a ella y cómo comprobar en el navegador que no carga nada antes de un clic.

la línea

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

Tu clave de sitio está en la página de instalación del panel, ya puesta en el snippet, con un botón para copiarla. Empieza por site_live_ y es pública: de todas formas aparece en el código fuente de tu página, y solo funciona en el dominio que registraste.

El archivo que carga es el lanzador: un botón, sus estilos y el aspecto que publicaste en el panel. Pesa menos de 4 kb comprimido con gzip (por encima de eso, el build falla). Hace 0 peticiones a nuestra API y no pone cookies. El panel de chat y la conexión con nuestro servidor solo se cargan cuando un visitante hace clic.

¿Eres nuevo en esto? La guía principal explica cuánto le cuesta un widget de chat a una página y qué hay que mirar.

dónde va

Justo antes de la etiqueta de cierre </body>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

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

Por qué ahí, y por qué async:

Al final del body, la etiqueta no retrasa nada de lo que hay encima. El navegador ya vio tu contenido cuando llega a la etiqueta.
async le dice al navegador que descargue el archivo en segundo plano y lo ejecute cuando llegue, sin pausar la página. Déjalo.

cada página, una vez

El chat debería estar en cada página donde un visitante pueda tener una pregunta, que normalmente son todas. Cómo llevarlo ahí depende de cómo esté hecho el sitio.

Páginas escritas a mano. Pega la etiqueta en cada archivo .html. Busca </body> en la carpeta para encontrarlos todos. Cuando añadas una página más adelante, copia una existente como punto de partida y la etiqueta viene incluida.

Un pie de página compartido. Si tus páginas incluyen un archivo de pie común (un include del servidor, un include de PHP, un partial de plantilla), pon la etiqueta ahí una sola vez.

Generadores de sitios estáticos. Ponla en el layout base, la plantilla de la que heredan todas las páginas:

generador	archivo
Jekyll	`_layouts/default.html`, o `_includes/footer.html`
Hugo	`layouts/_default/baseof.html`, o un partial de pie
Eleventy	tu layout base en `_includes/`
Astro	el componente del layout base
Pandoc, scripts propios	la plantilla HTML que le pasas

No te preocupes si una página acaba con la etiqueta dos veces: el lanzador comprueba si ya está en la página y la segunda copia no hace nada. Aun así es una petición desperdiciada, así que deja una.

configurarlo en el código

El aspecto que eliges en el panel viaja dentro del lanzador, así que la línea de arriba es toda la instalación. Si prefieres tener la configuración en tu HTML, define window.Spookat en un script encima de la etiqueta:

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Si la página y el panel no coinciden, gana la página. Qué hace cada clave:

clave	qué acepta	qué hace
`style`	uno de 8 estilos	el aspecto. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` o una de 17 fuentes alojadas	la fuente del widget. `system` no descarga nada; las fuentes alojadas se cargan desde nuestra CDN después del clic, nunca desde Google
`accent`	`"#RRGGBB"`	el color de tu marca. El color del texto encima se elige por contraste
`side`	`"right"` o `"left"`	dónde se coloca el lanzador
`greeting`	texto, hasta 200 caracteres	el primer mensaje que ve un visitante. Vacío significa el del estilo
`label`	texto, hasta 40 caracteres	convierte el botón redondo en una píldora con ese texto
`lang`	un código de idioma, como `"en"` o `"pl"`	el idioma del widget. Por defecto: el del navegador del visitante, luego inglés
`user`	`{ id, sig }`, desde cool guy	quién ha iniciado sesión, firmado en tu servidor

La documentación tiene la referencia completa, incluido cómo firmar user.

un sitio multilingüe

Si tu sitio tiene una carpeta por idioma (/en/, /pl/), pon lang por carpeta para que el widget coincida con la página y no con el navegador. El widget habla 12 idiomas. Tu equipo ve el idioma del visitante en cada chat.

un lanzador que dice algo

Un sitio sencillo suele tener una pregunta clara que hacen los visitantes: “¿envían a…?”, “¿puedo reservar…?”. Un label como "questions? ask a human" convierte el icono en una pequeña píldora que lo dice. Hazlo corto; en el móvil también va en la esquina.

lo que recibe el visitante

Un botón en la esquina, con tus colores. Al hacer clic se abre el panel con tu saludo y una línea que dice que responde una persona. Escribe; el mensaje llega a tu hilo de Slack o Discord, o a nuestra bandeja de entrada y su app para el móvil; tu respuesta vuelve al widget. Si se va antes de que respondas y dejó un email, cool guy y los planes superiores le envían la respuesta por email. El chat se queda en su dispositivo entre cambios de página y visitas posteriores, hasta que caduca el historial (30 días con broke af).

compruébalo

Abre tu sitio en una ventana privada, para que no intervengan caché ni almacenamiento antiguos. Luego abre DevTools (F12, o clic derecho e Inspeccionar).

Network. Marca “Disable cache”, recarga y escribe spookat en el filtro. Una petición: el lanzador desde cdn.spookat.com, unos 2 kb transferidos. 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.
Application (Almacenamiento en Firefox). Cookies: nada de Spookat. Local storage: nada todavía. Una clave aparece solo después de enviar un primer mensaje; guarda tu chat en ese dispositivo.
Haz clic en el lanzador. Ahora se cargan desde la CDN el script del panel y la hoja de estilos de tu estilo, y luego el chat se conecta. Envía un mensaje de prueba y mira cómo llega a Slack o Discord.

Si el lanzador no aparece:

Nada en la pestaña Network. La etiqueta no está en esta página, está dentro de un comentario HTML o tu paso de build la eliminó. Mira el código fuente de la página y busca spookat.
La petición falla. Una clave con la longitud equivocada recibe un 404 de la CDN. Compara la clave de la URL con la del panel.
El lanzador aparece con el aspecto por defecto y nunca se conecta. Con un solo carácter mal en la clave, el lanzador carga igual. Compara la clave con la del panel.
El lanzador aparece, pero el chat no se conecta. Estás en otro dominio distinto del registrado: un archivo local, localhost o un host de staging. El chat solo se conecta en tu dominio y sus subdominios.
Una Content Security Policy lo bloquea. La consola indica la directiva. Permite https://cdn.spookat.com para scripts, estilos y fuentes, wss://api.spookat.com para la conexión y data: para imágenes, porque los logos y las fotos del equipo son imágenes data:. El lanzador también inyecta un pequeño bloque <style> en su propio shadow root, así que style-src tiene que permitir estilos inline para él. Si defines window.Spookat en un script inline, dale a ese script el nonce o el hash de tu política.

qué no añadir

Los sitios en HTML puro son rápidos porque no hay nada en medio. Mantenlo así:

Nada de gestor de etiquetas solo para el chat. Es un script que carga scripts, y pesa más que el lanzador.
Nada de preload ni prefetch para el panel. Pondría la descarga del panel delante del clic, para cada visitante.
Nada de malabares con defer más async. async solo es lo correcto para esta etiqueta.
Nada de envoltorios que abran el chat a los pocos segundos. Cargan todo el panel para todos y tapan tu página en el móvil. Un saludo hace el mismo trabajo cuando alguien abre el chat de verdad.

el hosting da igual

GitHub Pages, Netlify, Cloudflare Pages, una carpeta FTP en un hosting compartido, un servidor en un armario: la etiqueta es HTML puro, así que funciona donde sea que se sirvan tus archivos. Sin build, sin paquete, sin código de servidor.

conecta las respuestas

Último paso: conecta Slack o Discord en el panel y elige un canal, o sáltatelo y responde en nuestra bandeja de entrada y su app para el móvil. Cada visitante tiene su propio hilo, cualquiera en el canal puede responder y no hay asientos. Cuesta $4.99 al mes por sitio con broke af.

checklist

Una etiqueta, con async, antes de </body>, en cada página (o una vez en el layout compartido).
Opcional: window.Spookat encima, si guardas la configuración en el código.
Comprobado en una ventana privada: una petición antes del clic (dos, ambas desde cdn.spookat.com, si tu código define un estilo que no publicaste), sin cookies.
Un mensaje de prueba desde el widget llegó a Slack o Discord.

La prueba dura 14 días y no pide tarjeta. Pega la línea y tu sitio estático podrá responder preguntas.