Una guía completa para añadir live chat a tu sitio web. Desde elegir una plataforma hasta instalar el widget, personalizarlo, entrenar la IA y salir en vivo, con instrucciones específicas para Shopify, WordPress, Webflow y sitios personalizados.
Añadir live chat a tu sitio web en 2026 es directo. La mayoría de plataformas ofrece un snippet de código o un plugin que puedes añadir en minutos. El trabajo real es elegir la herramienta correcta, personalizarla para tu marca y entrenar la IA para que realmente ayude a los clientes.
Esta guía paso a paso recorre todo el proceso: desde seleccionar una plataforma hasta salir en vivo. Usamos Chatsy como ejemplo principal, pero los pasos aplican a cualquier plataforma de live chat.
Divulgación: construimos Chatsy, que se usa como ejemplo en esta guía.
TL;DR:
- Añadir live chat toma 15-30 minutos en la mayoría de plataformas. El proceso es: elegir una plataforma, instalar el widget (código embed o plugin), personalizar branding, entrenar la IA, probar y salir en vivo.
- Por plataforma: Shopify y WordPress tienen opciones de app/plugin de un clic. Webflow y Squarespace usan inyección de código personalizado. Wix tiene un app market. Para React/Next.js, carga el script en un useEffect o
_document.js.- Optimiza para móvil (el widget no debe cubrir contenido), prueba impacto de rendimiento (la carga async es esencial) y configura analítica desde el primer día para medir tasa de resolución y tiempos de respuesta.
- Empieza con IA manejando soporte de primera línea 24/7, luego enruta a humanos para conversaciones complejas o sensibles.
Los pasos de instalación por plataforma y las cifras de rendimiento de esta guía se conciliaron desde tres fuentes:
Cuando la documentación de proveedores prometía setup más rápido o menor impacto de rendimiento que lo que medimos, usamos el número medido. Cuando la integración con banners de consentimiento afectaba el comportamiento del widget bajo GDPR, señalamos el punto específico por plataforma. Verificado en marzo de 2026.
Antes de instalar nada, elige una plataforma que encaje con tus necesidades:
| Factor | Qué considerar |
|---|---|
| IA vs solo humanos | Plataformas AI-first como Chatsy e Intercom resuelven la mayoría de conversaciones automáticamente; herramientas solo humanas requieren agentes para cada chat |
| Modelo de precios | Por agente (por ejemplo, Zendesk) vs basado en conversaciones (por ejemplo, Chatsy), afecta el coste al escalar |
| Integraciones | ¿Funciona con tu CMS, plataforma ecommerce o CRM? |
| Tiempo de setup | Algunas plataformas toman 30 minutos; otras requieren días de configuración |
Para la mayoría de equipos, una plataforma impulsada por IA es la mejor opción. La IA maneja preguntas comunes 24/7; los humanos toman el control cuando hace falta. Consulta nuestra comparativa de software de live chat para más opciones.
<script> o un snippet pequeño.<head> de tu sitio o antes de </body>.Haz que el widget de chat coincida con tu marca:
| Ajuste | Qué cambiar |
|---|---|
| Posición | Abajo a la derecha (por defecto), abajo a la izquierda o personalizada |
| Colores | Color principal, acento, fondo |
| Texto del encabezado | "Chatea con nosotros" o "Ayuda" |
| Mensaje de bienvenida | Primer mensaje que ven los usuarios |
| Avatar | Tu logo o un icono amigable |
| Disponibilidad | Horarios en los que los agentes en vivo están online |
La mayoría de plataformas permite previsualizar cambios en tiempo real. Prueba en desktop y móvil: el widget debe ser usable en ambos.
Si tu plataforma usa IA, entrénala con tu contenido:
La calidad de tus datos de entrenamiento afecta directamente la precisión de la IA. Una base de conocimiento bien mantenida mejora los resultados.
theme.liquid.</body>.Como alternativa, usa la app de Shopify de la plataforma si está disponible. Chatsy y muchas otras ofrecen una app de Shopify de un clic para instalación más sencilla.
Opción A: plugin (si está disponible) Muchas plataformas de live chat tienen plugins de WordPress. Instala desde el directorio de plugins, conecta tu cuenta y el widget aparece automáticamente.
Opción B: código personalizado
footer.php o usa un plugin tipo "Insert Headers and Footers".Opción C: bloque Gutenberg Algunas plataformas ofrecen un bloque. Añádelo a tu plantilla o a una página específica.
Webflow también soporta inyección de código por página si solo quieres el widget en ciertas páginas. Edita los ajustes de la página y añade el código a la sección de código personalizado a nivel de página.
Como alternativa, revisa el Wix App Market para ver si tu plataforma tiene app oficial. La instalación por app evita completamente el código manual.
La inyección de código de Squarespace aplica a todo el sitio. Si necesitas control por página, usa un Code Block dentro de páginas individuales.
HTML estático:
Añade la etiqueta script antes de </body> en tu archivo principal de layout.
React / Next.js:
Usa un useEffect para cargar el script y añadirlo a document.body, o añádelo a _document.js (Next.js) o index.html (Create React App).
Ejemplo (Next.js _document.js):
jsx<Script src="https://widget.yourapp.com/embed.js" strategy="afterInteractive" />
Vue / Nuxt:
En Nuxt, añade el script a nuxt.config.js bajo head.script, o usa el composable useHead en Nuxt 3. Para Vue estándar, carga el script en el hook onMounted de tu App.vue.
Hacer que el widget se sienta nativo en tu sitio importa más de lo que muchos equipos creen. Un widget genérico comunica "esto fue añadido después" a los visitantes.
La posición por defecto abajo a la derecha funciona para la mayoría de sitios. Considera abajo a la izquierda si tu sitio tiene un botón CTA persistente o banner de cookies en la esquina inferior derecha. Evita ubicar el widget donde se solape con contenido crítico como botones de checkout o navegación.
Si tu sitio soporta modo oscuro, configura el widget para que coincida. La mayoría de plataformas ofrece temas claro y oscuro. Algunas (incluyendo Chatsy) detectan automáticamente la preferencia de sistema del usuario.
Más del 60% del tráfico web es móvil. Un widget de live chat que funciona bien en desktop pero bloquea contenido en móvil mata conversiones.
| Práctica | Por qué importa |
|---|---|
| Colapsado por defecto | El widget debe mostrar solo el botón lanzador, no una ventana de chat abierta |
| Pantalla completa al abrir | Al tocarlo, debe expandirse a un overlay de pantalla completa para que el usuario escriba cómodo |
| Respetar el teclado | El input de chat debe seguir visible cuando aparece el teclado móvil |
| Targets táctiles > 44px | Botones y enlaces dentro del widget deben ser suficientemente grandes para dedos |
| Probar en dispositivos reales | Los emuladores no capturan comportamiento de scroll ni peculiaridades del teclado |
En móvil, el botón lanzador puede cubrir elementos importantes como botones "Añadir al carrito" o enlaces de footer. Soluciones:
padding-bottom: 80px) para que el botón flote sobre espacio vacío.Un widget de chat añade un script de terceros a cada carga de página. Mal hecho, puede ralentizar tu sitio. Bien hecho, el impacto es mínimo.
async o defer para no bloquear el renderizado de la página. La mayoría de plataformas lo hace por defecto, pero verifica.Usa Lighthouse o PageSpeed Insights para probar tu sitio con y sin el widget. Métricas clave a comparar:
Si ves degradación, revisa si el script carga de forma síncrona o si inyecta CSS pesado. Contacta al soporte de la plataforma: el rendimiento es un problema que ellos deben resolver.
Sin analítica, estás adivinando si el live chat funciona. Configura tracking desde el primer día.
| Métrica | Qué te dice | Objetivo |
|---|---|---|
| Tasa de resolución | % de conversaciones resueltas sin ayuda humana | 60-80% (con IA) |
| Primer tiempo de respuesta | Qué tan rápido responde el bot o agente | < 5 segundos (IA), < 60 segundos (humano) |
| Satisfacción del cliente (CSAT) | Rating post-chat | 4.0+ de 5 |
| Conversaciones por día | Tendencias de volumen | Varía según tráfico |
| Tasa de escalado | % enrutado a agentes humanos | < 30% (con IA) |
| Tasa de deflexión | Conversaciones que habrían sido tickets | Rastrear con el tiempo |
La mayoría de plataformas de live chat ofrece dashboards integrados. Para análisis más profundo, envía eventos de chat a tu herramienta de analítica:
Evita live chat si nadie estará online durante los horarios publicados: un widget sin respuesta comunica abandono con más fuerza que no tener widget. Evítalo si tu negocio es offline-first (retail presencial, servicios físicos) y tu sitio web es principalmente direcciones y horarios; el chat intenta resolver un journey de cliente que en realidad no posees. Y evítalo si tu postura de privacidad o accesibilidad no tolera scripts de terceros: muchos widgets rompen navegación con lectores de pantalla por defecto, y un widget mal elegido puede introducir fallos WCAG más rápido de lo que responde tickets. Verifica que el widget pase tu auditoría a11y antes de desplegarlo.
Con una plataforma como Chatsy, puedes tener un widget básico en vivo en menos de 30 minutos. La personalización y el entrenamiento de IA pueden añadir otra hora. Setups complejos (por ejemplo, integraciones personalizadas) pueden tardar más.
No siempre. Muchas plataformas ofrecen un código embed que puedes añadir mediante un plugin tipo "Insert Headers and Footers" o la sección de código personalizado de tu tema. Un plugin dedicado puede simplificar el setup si existe.
Sí. La mayoría de plataformas de live chat ofrece una app de Shopify. Instala la app, conecta tu cuenta y el widget aparece automáticamente. No requiere editar código.
Live chat conecta clientes con agentes humanos en tiempo real. Un chatbot está automatizado y responde usando reglas o IA. Plataformas modernas como Chatsy combinan ambos: la IA maneja la mayoría de conversaciones y los humanos toman control cuando hace falta.
Añade tu contenido de ayuda, FAQ y documentación de producto a la plataforma. La IA usa eso para responder preguntas. Escribe un prompt de sistema claro, prueba preguntas comunes y refina. Consulta nuestra guía de base de conocimiento para consejos sobre escribir contenido que la IA pueda recuperar con precisión.
No si el widget carga de forma asíncrona (lo que la mayoría de plataformas hace por defecto). Un widget bien construido añade menos de 50KB gzipped y no debería aumentar Largest Contentful Paint más de 100ms. Prueba con Lighthouse antes y después de la instalación para confirmarlo. Si ves una degradación significativa, probablemente el problema sea una carga síncrona del script; contacta al soporte de la plataforma.
La mayoría de plataformas soporta targeting por página. Puedes cargar condicionalmente el script embed según la ruta URL o usar las reglas de targeting de la plataforma para mostrar el widget solo en páginas específicas (por ejemplo, precios, páginas de producto, centro de ayuda). Algunas plataformas también ofrecen una API JavaScript para mostrar u ocultar el widget programáticamente.
Empieza con tasa de resolución, primer tiempo de respuesta, satisfacción del cliente (CSAT) y tasa de escalado. Estas cuatro métricas te dicen si el chat funciona. Con el tiempo, añade tasa de deflexión (conversaciones que habrían sido tickets) y conecta eventos de chat a tu analítica de producto para entender el journey completo del cliente.
Sí. Muchos equipos mantienen un formulario de contacto como fallback cuando live chat no está disponible o para clientes que prefieren comunicación asíncrona. Configura el widget para mostrar un formulario de email durante horas offline para que no se pierda ninguna consulta.
Una guía para desarrolladores sobre conectar chatbots de IA con sistemas externos usando webhooks, integraciones API y patrones event-driven, con ejemplos TypeScript y buenas prácticas de producción.