cómo añadir un chat en vivo a tu web sin hacerla más lenta

27 de septiembre de 2026 · por kuba · 9 min de lectura

Un chat en vivo debería costarle casi nada a tu página hasta que un visitante de verdad quiera hablar. Esta guía muestra qué carga un widget de chat antes del primer clic, qué revisar antes de elegir uno, cómo instalar Spookat en unos minutos y cómo demostrar en DevTools que tu página sigue siendo rápida.

La mayoría de los visitantes nunca abre el chat. Leen, hacen scroll, quizá compran y se van. Todo lo que el widget carga con la página lo paga cada uno de ellos, incluidos los que tienen un móvil barato y poca cobertura.

Ese costo tiene cuatro partes:

Bytes. JavaScript, CSS, fuentes, imágenes y a menudo un iframe con su propio documento. El JavaScript es lo más caro: el navegador lo descarga, lo analiza y lo ejecuta en el hilo principal, el mismo hilo que gestiona el scroll y los toques.
Peticiones. Cada petición es un viaje de ida y vuelta, y las peticiones a dominios nuevos además pagan una consulta DNS y un handshake TLS. Un widget que llama a su servidor al cargar suma todo eso a cada visita.
Almacenamiento. Cookies, localStorage e IndexedDB escritos antes de cualquier interacción. En la UE eso puede decidir si necesitas consentimiento antes de que el widget cargue siquiera.
Tiempo en el hilo principal. El código que se ejecuta al arrancar compite con tu propio código. Lighthouse lo reporta como Total Blocking Time y se nota en tu puntuación.

Los cuatro widgets de nuestras páginas de comparación cargaban entre 220 y 509 kb comprimidos con gzip antes de que nadie hiciera clic. Lo medimos el 2026-09-26 cargando cada widget en una página de prueba vacía y sumando los bytes transferidos; los números y las fuentes están en /vs. Para comparar, el texto de todo este artículo pesa menos de 20 kb.

Nada de eso hace falta para mostrar un botón. Un botón son unos cientos de bytes de HTML y CSS. Todo lo demás (el panel de chat, la conexión con un servidor, el historial) solo se necesita después de que alguien haga clic.

Puedes evaluar cualquier widget de chat con un navegador y diez minutos. Esto es lo que hay que mirar, ordenado según cuánto afecta a tus visitantes.

el peso antes del clic

Abre la página de demo del proveedor o tu propio sitio de staging, abre DevTools y recarga con la caché desactivada. Filtra la pestaña Network por los dominios del proveedor y suma el tamaño transferido. Cualquier cosa por encima de unos pocos kilobytes antes de un clic es código que tus visitantes descargan para un panel que la mayoría nunca abre.

las peticiones antes del clic, y a quién van

Cuenta las peticiones y apunta los dominios. Un widget que habla con su API al cargar la página envía algo sobre cada visitante, como mínimo que existe y en qué página está. Algunos también cargan analítica o seguimiento de errores de terceros.

cookies y almacenamiento antes del clic

Mira la pestaña Application después de una carga limpia, sin tocar el widget. Las cookies de los dominios del widget, o las claves de almacenamiento que haya escrito, son las que un banner de consentimiento quizá tenga que cubrir. No somos tus abogados y las reglas cambian según el país, así que pregunta a los tuyos qué aplica a tu sitio. El caso más fácil de explicar es un widget que no guarda nada hasta que el visitante empieza un chat.

dónde responde tu equipo

Un chat vale lo que vale su respuesta. Si responder significa abrir otro panel, alguien tiene que tener esa pestaña abierta todo el día. Si los chats llegan donde tu equipo ya habla (Slack, Discord), una respuesta es un mensaje en un hilo.

lo que cuesta cuando el equipo crece

El precio por asiento te cobra por cada persona que podría responder. El precio por resolución te cobra por cada respuesta. El precio por sitio te cobra el sitio, responda quien responda y las veces que sea.

el móvil

Revisa el lanzador en una pantalla de 375 px de ancho. No debería tapar tus propios botones y debería medir al menos 44 px para que un pulgar lo alcance. Abre el panel y escribe: el teclado no debería ocultar el campo de texto.

paso a paso: chat en vivo con spookat

Spookat está construido en torno a las revisiones de arriba. El snippet carga un lanzador pequeño desde nuestra CDN, con el aspecto de tu sitio ya dentro. Hace 0 peticiones a nuestra API antes de un clic y no pone cookies. Tu equipo responde en un hilo de Slack o en un post de foro de Discord. Cuesta $4.99 al mes por sitio con broke af, con compañeros de equipo ilimitados, y la prueba dura 14 días sin tarjeta.

1. consigue tu snippet

Entra en el panel y añade tu sitio. La página de instalación te muestra el snippet con tu clave de sitio ya incluida y un botón para copiarlo. Puedes abrirla directamente con tu dominio en la dirección:

https://app.spookat.com/install?domain=your-domain.com

2. pégalo antes de la etiqueta body de cierre

Una sola etiqueta, en cualquier parte de la página, idealmente justo antes de </body>:

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

async significa que el navegador sigue renderizando tu página mientras descarga el archivo, y lo ejecuta cuando llega. El archivo es el lanzador: un botón, sus estilos y el aspecto que publicaste en el panel. Su build falla si supera los 4 kb comprimidos con gzip. El 2026-09-27 medía 2,0 kb.

Si tu sitio es una single-page app, pon la etiqueta en la plantilla HTML raíz, no en un componente que se vuelve a renderizar. El lanzador comprueba si ya existe, así que una segunda copia no hace nada, pero una etiqueta en un solo sitio es más fácil de entender.

3. elige un aspecto

Hay 8 estilos y 12 fuentes alojadas por nosotros, más la fuente del sistema del visitante. Elígelos en el panel y publica; el lanzador recoge el nuevo aspecto en menos de un minuto. O defínelo en la página, encima del snippet, donde tiene prioridad sobre el panel:

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" no descarga ninguna fuente. Cualquier otra fuente viene de nuestra CDN, solo después del clic, nunca de Google. accent acepta un color hexadecimal, y el color del texto encima se elige por contraste. La lista completa de claves está en la documentación.

4. conecta slack o discord

En el panel, conecta un canal. Apruebas la conexión en el propio Slack o Discord y luego eliges el canal de una lista. ¿No eres admin del workspace? El panel te da un enlace de un solo uso para quien lo sea, válido 7 días, y esa persona no necesita cuenta de Spookat.

A partir de ahí, cada conversación es un hilo en Slack o un post de foro en Discord.

5. responde desde el hilo

Responde en el hilo y el visitante lo ve en el widget. Un mensaje que empieza por // se queda interno, así que puedes preguntarle algo a un compañero sin que el visitante lo lea. Los visitantes ven tu nombre de Slack o tu apodo de Discord; /spookat me lo muestra o lo cambia, por sitio.

Si el visitante se fue antes de tu respuesta y dejó un email, cool guy y los planes superiores le envían la respuesta por email, en el idioma del widget. Con broke af la respuesta lo espera en el widget hasta su próxima visita.

o bien: deja que tu agente lo haga todo

Si programas con Claude Code, Cursor u otro agente de código, pega esto y deja que lea el manual:

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

El agente encuentra tu plantilla raíz, añade el snippet y elige un estilo que encaje con tu sitio. Conectar Slack o Discord y pagar sigue en tus manos: las dos cosas las aprueba una persona.

compruébalo en devtools

No te fíes de la palabra de ningún proveedor, tampoco de la nuestra. Así puedes revisar tu propia página en Chrome. Firefox y Safari tienen los mismos paneles con nombres un poco distintos.

la pestaña network, antes del clic

Abre tu página en una ventana privada, para que no intervenga almacenamiento ni caché antiguos.
Abre DevTools, ve a Network, marca “Disable cache” y recarga.
Escribe spookat en el campo de filtro.

Deberías ver una sola petición: el lanzador desde cdn.spookat.com, unos 2 kb transferidos. Nada va a api.spookat.com. Si ves más, es que otra cosa en la página lo cargó (por ejemplo, un segundo snippet en un gestor de etiquetas).

la pestaña application, antes del clic

Abre Application y luego Cookies y Local storage de tu dominio. Spookat no escribe nada aquí al cargar la página. No pone ninguna cookie, nunca. La única clave de almacenamiento que usa, spookat: seguida de tu clave de sitio, se escribe solo después de que el visitante envía un primer mensaje: guarda su chat en ese dispositivo.

después del clic

Limpia el registro de Network y haz clic en el lanzador. Ahora el panel se carga desde la CDN: su script (16,6 kb comprimidos el 2026-09-27) y la hoja de estilos de tu estilo (unos 2 kb). También llega una fuente si elegiste una. Después el panel abre una conexión con nuestra API y el visitante puede escribir.

Ese es todo el truco: la parte cara se va detrás del clic, y solo la descargan los visitantes que quieren chatear.

lighthouse

Ejecuta Lighthouse en modo móvil en la página sin el snippet y con él, varias veces cada una, y compara las medianas. Una misma página varía varios puntos entre ejecuciones, así que una sola ejecución no demuestra nada en ningún sentido. Con un lanzador de 2 kb y sin trabajo antes del clic, la diferencia debería quedar dentro de ese ruido.

Un lanzador pequeño solo sigue siendo pequeño si la página que lo rodea lo deja. Estos son los errores que más vemos, y cada uno deshace en silencio el trabajo de arriba.

Abrir el chat solo. Un panel que se abre a los diez segundos carga todo el chat para cada visitante, incluidos los que estaban a punto de comprar. Además, en el móvil tapa la página. Si quieres iniciar la conversación, escribe un saludo; aparece cuando abren el chat.

Precargar el panel “para que vaya más rápido”. Un <link rel="preload"> o un prefetch para el script del panel vuelve a poner su descarga antes del clic, para todos. Después del clic son dos peticiones cortas a una CDN cercana al visitante. Deja que esperen al clic.

Meterlo en un gestor de etiquetas. Un gestor de etiquetas es un script que carga otros scripts. Si solo existe para contener el snippet del chat, cuesta más que el propio chat. Pon la etiqueta directamente en tu plantilla.

Dos snippets. Un tema añade uno, un plugin añade otro, alguien pega un tercero en el pie de página. El lanzador ignora sus propios duplicados, pero otros widgets a menudo no, y acabas con dos chats peleando por la misma esquina. Busca cdn.spookat.com (o el dominio de tu proveedor anterior) en tus plantillas y quédate con uno.

qué pasa con los datos

Cuando un visitante envía un mensaje, primero se guarda y luego se publica en tu hilo de Slack o tu post de Discord. Nunca guardamos una dirección IP. El país del visitante se consulta en una base de datos offline en el momento del mensaje y la dirección no se conserva. El historial de chat se guarda 30 días con broke af, 90 con cool guy y 365 con vc money, y después se borra. Los detalles, incluidos los subencargados, están en la página de privacidad.

una checklist que puedes reutilizar

Para cualquier widget de chat, no solo el nuestro:

El snippet se carga con async o defer y no bloquea el renderizado.
Antes de un clic: unos pocos kilobytes, una petición, ninguna petición a la API del proveedor.
Ninguna cookie y ningún almacenamiento antes de que el visitante empiece un chat.
El lanzador no tapa tus propios botones en una pantalla de 375 px.
El panel y sus fuentes solo se cargan después del clic.
Tu equipo responde donde ya trabaja, sin otra pestaña que vigilar.
El precio no te castiga por añadir a alguien al equipo.
Lo mediste tú, con la caché desactivada, en una ventana privada.

Pruébalo en tu propio sitio: la prueba dura 14 días y no pide tarjeta.