Se abre en una pestaña nueva

Diseño web

Chat en vivo para tu web: cómo añadir un widget de chat que no frene ni tape tus páginas

Cómo añadir un widget de chat a tu web sin hacerla más lenta ni tapar enlaces: fachadas, el aviso de cookies, el foco del teclado y qué probar.

Revisada4 de noviembre de 2026
Lectura
Forma parte deDiseño web
Escucha esta guía
0:00 /6:53

Respuesta corta: un widget de chat permite preguntar sin salir de la página. Añádelo con cuidado: muchos widgets cargan su código con cada página, y un botón o una ventana abierta pueden tapar enlaces. Carga el chat real solo cuando alguien lo use, y déjalo libre del contenido y del aviso de cookies.

Por qué un widget de chat puede hacer más lentas tus páginas

Muchos widgets de chat son elementos de terceros que cargan su código con la página, aunque nadie abra el chat. web.dev señala que muchos de estos elementos incluyen más de 100 KB de JavaScript, y a veces hasta 2 MB. La documentación para desarrolladores de Chrome incluye los widgets de chat entre los que pueden usar el patrón de fachada.

Una fachada es un elemento estático que se parece al contenido insertado pero todavía no funciona, así que pesa mucho menos en la carga de la página. El widget real carga cuando la persona interactúa con él. web.dev da el mismo consejo para widgets de chat, reproductores de video y widgets de redes sociales.

Esto tiene una contrapartida. La documentación de Chrome advierte que una fachada no tiene todas las funciones del contenido real: por ejemplo, la burbuja con el número de mensajes nuevos solo aparece cuando carga el widget real.

Qué puede salir mal Por qué pasa Qué hacer
Páginas más lentas El código del widget carga con cada página, aunque nadie lo abra Muestra una fachada ligera y carga el chat real al interactuar
Enlaces y botones tapados El botón o la ventana abierta quedan sobre la página Deja libre una esquina y que el foco nunca quede tapado del todo
Dos capas en el teléfono El botón del chat y el aviso de cookies compiten por el mismo espacio Muestra el chat cuando se responda el aviso
Funciones que llegan tarde Con una fachada, algunas funciones esperan al widget real Revisa qué muestra tu chat antes de que alguien lo abra

A partir de Chrome for Developers, web.dev y el W3C, en inglés, consultados el 4 de noviembre de 2026.

Que el chat no tape la página

El botón del chat sigue en pantalla mientras la persona baja por la página, así que puede quedar sobre enlaces y botones de la parte de abajo. El criterio Focus Not Obscured (Minimum) de las WCAG pide que, cuando un elemento recibe el foco del teclado, no quede tapado por completo por contenido que añadió el sitio.

El W3C señala que una ventana de chat que sigue abierta hasta que la persona la cierra puede incumplir esta regla. Añade que esos diseños pueden cumplirla, por ejemplo permitiendo cambiar de capa con una tecla.

El aviso de cookies es otra capa que hay que vigilar. El W3C dice que un aviso de cookies fijo incumple la misma regla si tapa por completo un elemento con el foco. Nuestra guía del aviso de cookies explica cómo evitar que estorbe.

Cómo añadir un widget de chat bien hecho

  1. Decide para qué es el chat y quién va a responder.
  2. Pon el botón en una esquina donde no tape enlaces, botones ni el aviso de cookies.
  3. Carga el widget real con una fachada, para que su código solo se descargue cuando alguien lo use.
  4. Revisa lo que la fachada no puede mostrar, como el número de mensajes nuevos.
  5. En el teléfono, muestra el chat después de que la persona responda el aviso de cookies.
  6. Recorre la página con el tabulador con el chat abierto y comprueba que el elemento con foco se sigue viendo.
  7. Ejecuta Lighthouse antes y después, y compara.

Nuestra guía de velocidad web explica cómo medir la carga, y nuestra guía de navegación con teclado explica cómo probar con la tecla Tab.

Cómo se comporta nuestro propio chat

Nuestra web tiene su propio chat, un botón en la esquina inferior derecha: 150 por 52 píxeles en una computadora y 56 por 56 en un teléfono. El 4 de noviembre de 2026 abrimos nuestras páginas como un visitante nuevo para ver cómo se comporta.

En el teléfono, el botón se queda oculto mientras el aviso de cookies está abierto. Aparece en cuanto la persona lo responde, así que los dos nunca tapan la pantalla a la vez. En una computadora se coloca por encima del aviso abierto, sin taparlo, y vuelve a bajar cuando la persona responde.

El 28 de octubre de 2026 arreglamos un caso que se nos había escapado: en la primera visita, con el aviso abierto, el botón tapaba el enlace Volver arriba del final de nuestras páginas en pantallas de 600 píxeles o más. Un espacio extra bajo el pie de página mientras el aviso está abierto lo dejó libre en las 32 vistas que comprobamos.

Hasta la noche del 4 de noviembre, cada página descargaba además el chat en sus dos primeros segundos: unos 29 a 30 KB por la red, antes de que nadie tocara la página. Ahora se carga con el primer desplazamiento, toque o tecla, o justo antes de que toque su saludo automático. En los dos primeros segundos en nuestra página de inicio, un visitante nuevo solo recibe la configuración del chat, 1.7 KB. El código, unos 24.5 KB, llega con el primer desplazamiento, y el botón mantiene el mismo tamaño y lugar.

Antes de activar un widget de chat

  • Alguien va a responder, y quien visita sabe cuándo.
  • El botón no tapa enlaces ni botones.
  • No queda encima del aviso de cookies.
  • El widget real solo carga cuando alguien lo usa.
  • El foco del teclado se ve con el chat abierto.
  • Mediste la página antes y después.

RecuerdaUn chat debe ayudar a quien visita, no estorbarle. Que sea ligero hasta que alguien lo use y que no tape el contenido.

Añadir un chat a una web sin hacerla más lenta es parte de nuestro servicio de diseño web.

Respuestas rápidas sobre los widgets de chat

¿Un widget de chat hace más lenta mi web?

Puede, porque muchos widgets de chat cargan su código con cada página. La documentación para desarrolladores de Chrome dice que pueden usar una fachada: un sustituto ligero que carga el widget real solo cuando la persona interactúa con él.

¿Qué es una fachada para un widget de chat?

Un elemento estático que se parece al botón del chat pero no funciona hasta que alguien lo usa. La documentación de Chrome dice que pesa mucho menos en la carga de la página que el widget real, que se carga cuando la persona interactúa.

¿Pierdo algo si cargo el chat más tarde?

Algunas funciones esperan. La documentación de Chrome da un ejemplo: la burbuja del chat con el número de mensajes nuevos solo aparece cuando carga el widget real. Revisa qué muestra tu chat antes de que alguien lo abra.

¿Una ventana de chat puede ser un problema de accesibilidad?

Puede. El W3C señala que una ventana de chat que sigue abierta hasta que la persona la cierra puede incumplir Focus Not Obscured. Pasa si tapa por completo el elemento que tiene el foco del teclado, aunque esos diseños pueden cumplirlo.

¿El botón del chat debe ir encima del aviso de cookies?

Mejor que no. El W3C dice que un aviso de cookies fijo incumple Focus Not Obscured si tapa por completo un elemento con el foco. Deja el botón del chat libre del aviso, o muéstralo cuando la persona ya haya respondido.

Fuentes

Consultadas el 4 de noviembre de 2026, en inglés. Chrome for Developers: Lazy load third-party resources with facades. web.dev: Best practices for using third-party embeds. W3C: Understanding SC 2.4.11. Nuestro caso: el chat de nuestra web, abierto como un visitante nuevo el 4 de noviembre de 2026, y el arreglo que hicimos el 28 de octubre de 2026.

Pedro Galindez

Pedro Galindez

Fundador de Feedback Studios, estudio de crecimiento bilingüe en Miami.

Escuchar0:00 /6:53

Más guías

Revisada 5 de noviembre de 2026

Indicador de foco: cómo hacer visible el foco del teclado

Para qué sirve el indicador de foco, qué piden las WCAG sobre su tamaño y contraste, y cómo conservar el contorno que enseña a quien usa el teclado dónde está.

Revisada 4 de noviembre de 2026

Animaciones de carga: spinner, pantalla esqueleto o barra de progreso

Cuándo ayuda una animación de carga, qué tipo usar en cada espera y cómo decir a los lectores de pantalla que algo carga y cuándo termina.

Revisada 4 de noviembre de 2026

CAPTCHA y reCAPTCHA: cómo frenar el spam sin bloquear a la gente

Qué es un CAPTCHA, cómo funciona reCAPTCHA ahora que forma parte de Google Cloud Fraud Defense, qué cambió en 2026 y cómo frenar el spam sin bloquear a nadie.

Revisada 4 de noviembre de 2026

Enlaces ancla: cómo enlazar a una sección de una página

Cómo un enlace ancla lleva a una sección de la página, cómo muestra Google enlaces «Más información» a secciones y cómo evitar que la cabecera fija estorbe.

Revisada 4 de noviembre de 2026

Palabras clave long tail: qué son y cómo encontrarlas

Qué son las palabras clave long tail, por qué le importan a un negocio pequeño, dónde encontrarlas y cómo es la cola larga de nuestro servicio.

Siguiente paso

Cuéntanos qué necesitas

Escríbenos por WhatsApp o envíanos un mensaje. Respondemos en español o en inglés.