Cómo añadir chat en vivo a tu web en 10 minutos

Añadir chat en vivo a una web es uno de los pocos proyectos de soporte en los que la parte técnica es realmente trivial. Todos los proveedores entregan lo mismo: una sola línea de JavaScript que pegas en tu web, o un plugin que la pega por ti. Diez minutos no es marketing: es más o menos lo que se tarda en copiar un fragmento de código, ponerlo en la plantilla de tu diseño y enviarte un mensaje de prueba.

Lo que no es trivial es todo lo que decide si el widget ayuda a alguien. Una burbuja de chat en una web donde nadie vigila la bandeja es peor que no tener burbuja: prometiste una respuesta rápida y no la diste. Por eso esta guía trata primero la instalación, sin depender de ningún proveedor, y después la media hora posterior, que es la que de verdad importa.

Añadir chat en vivo a tu web: la instalación en 10 minutos

Esta secuencia funciona prácticamente con cualquier proveedor de chat en vivo, porque todos distribuyen el widget de la misma manera. Nada de esto es específico de un proveedor.

1. Crea una cuenta en tu proveedor de chat y abre la pantalla de instalación o inserción. Recibirás un fragmento que contiene un ID que identifica tu espacio de trabajo o tu web; ese ID es lo que vincula los chats entrantes a tu cuenta.
2. Copia el fragmento. Normalmente es una sola etiqueta de script cargada de forma asíncrona, lo que significa que el navegador no la espera antes de mostrar tu página.
3. Abre la plantilla que se muestra en todas las páginas de tu web: el diseño compartido, el include del pie de página o la plantilla base. Pega el fragmento justo antes de la etiqueta de cierre </body>. No lo pegues página por página; se te olvidará una y el widget desaparecerá justo en la página donde un visitante más lo necesitaba.
4. Si tu web funciona con un CMS que tiene un plugin o una app oficial, instálalo en lugar de editar plantillas. Hace el mismo trabajo y sobrevive a las actualizaciones del tema.
5. Guarda, publica y abre tu web en una ventana de navegación privada. El botón del chat debería aparecer, normalmente abajo a la derecha, en uno o dos segundos.
6. Envía un mensaje de prueba desde la web. Confirma que llega a la bandeja de los agentes, responde desde la bandeja y confirma que la respuesta aparece en el widget. Ese viaje de ida y vuelta es la única prueba de que la instalación ha funcionado; una burbuja visible no lo es.
7. Configura las notificaciones. Decide quién recibe un aviso por email, push o escritorio cuando llega un chat nuevo, y pruébalo también. Una bandeja que nadie vigila es la forma más habitual en que fracasa la puesta en marcha de un chat en vivo durante la primera semana.

Etiqueta de script o plugin: qué vía de instalación elegir

Las dos vías cargan exactamente el mismo widget. La diferencia está en quién es dueño del código y qué le pasa en la próxima actualización o rediseño.

WordPress: usa el plugin, no footer.php

En WordPress, la tentación es pegar el fragmento en la plantilla del pie de página de tu tema. No lo hagas: la próxima actualización del tema lo sobrescribe y el widget desaparece sin que nadie lo note. Usa un tema hijo, un plugin para insertar código en la cabecera y el pie, o el plugin de tu proveedor. El nuestro está publicado en el directorio de plugins de WordPress.org: lo instalas, pegas el ID del espacio de trabajo y el widget se muestra en la web sin editar ninguna plantilla.

Si la web de WordPress es una tienda WooCommerce, la instalación es la misma pero la configuración no: el widget de una tienda debería poder consultar el estado de los pedidos, y esa conexión tiene sus propias reglas sobre verificación de identidad y acceso de solo lectura. Lo explicamos en añadir chat en vivo con IA a WooCommerce, y la conexión en sí en la integración con WooCommerce.

Qué configurar antes de hacer visible el widget

La instalación te da una burbuja de chat. Estos cinco ajustes son los que la convierten en un canal de soporte que tu equipo puede mantener de verdad.

1. Algo con lo que responder

Responda primero una persona o una IA, el techo de calidad lo marca cuánto de tu conocimiento está por escrito. Exporta un mes de tickets de email, ordénalos por tema y escribe un artículo breve del centro de ayuda para cada uno de los veinte principales. Breve y concreto es mejor que largo y general, tanto para el agente que lo consulta como para una IA que recupera información de él. Incluye los temas incómodos que has ido evitando: un paquete marcado como entregado que nunca llegó, cuánto tarda de verdad un reembolso, cuál es tu política con un artículo que ya se ha usado.

2. Horario de atención y un estado fuera de línea honesto

Decide cuándo el widget dice estar disponible y qué pasa fuera de ese horario. Hay dos opciones honestas: seguir respondiendo (un agente de IA cubre noches y fines de semana) o cambiar a un formulario de mensaje que recoja la pregunta y una dirección de email y diga claramente cuándo responderás. Lo que no debes hacer es mostrar a las 23:00 una ventana de chat abierta que nadie leerá hasta el lunes. En CustomerEagle esto se configura con el horario comercial a nivel de espacio de trabajo: hora de inicio y fin, días, zona horaria y el mensaje que se muestra cuando estás cerrado.

3. Una regla de traspaso, escrita de antemano

Tanto si quien responde primero es la IA como si es un agente junior, decide ahora qué debe escalarse de inmediato: las reclamaciones, todo lo que mencione un contracargo o acciones legales, todo caso en el que el cliente ya haya preguntado dos veces y todo lo que implique movimientos de dinero. Envía esos casos a una persona con la conversación completa adjunta. Un traspaso temprano cuesta una respuesta de un agente. Una respuesta errónea dada con seguridad a un cliente ya molesto cuesta la relación.

4. Solo los campos que realmente necesitas

Un formulario previo al chat que pide nombre, email, empresa y número de pedido antes de que el visitante pueda escribir nada convierte mucho peor que un cuadro de mensaje vacío. Si necesitas una dirección de email para responder de forma asíncrona, pídela en el momento en que se vuelve necesaria (cuando la conversación va a durar más que la sesión) y no como un peaje.

5. Di con quién está hablando el visitante

Si responde primero una IA, identifícala como IA en el widget y deja claro el camino hacia una persona. Es tanto una expectativa de transparencia en la UE como, sencillamente, una mejor experiencia: a la gente no le importa hablar con un bot sobre un número de seguimiento, pero le molesta descubrir después que la respuesta comprensiva sobre su pedido roto era automática.

Cómo cambia la IA las cuentas

El chat en vivo clásico era una decisión de personal disfrazada de decisión de software. El widget costaba poco; la cobertura costaba mucho. O cubrías las horas que prometías o dejabas que el tiempo medio de respuesta se fuera a horas sin decir nada y perdías por completo el sentido del chat en vivo. Por eso tantos equipos pequeños instalaron un widget, lo mantuvieron un mes y lo volvieron a ocultar.

Un widget con la IA en primera línea invierte el orden de las operaciones. La IA responde primero con tu propio contenido documentado, citando el artículo que ha usado, y una persona toma el relevo cuando hay escalado, temas delicados o lo pide el cliente. La cobertura deja de ser un problema de turnos: las preguntas repetitivas (plazos de envío, plazos de devolución, horarios, dónde está un pedido) reciben respuesta a las 02:00 de un domingo, y tu equipo ve las conversaciones que requieren criterio.

La pega es que esto solo funciona en la medida en que tu contenido cubre las preguntas, y por eso el paso de la base de conocimiento no es opcional. También es la razón por la que debes juzgar el resultado por cuántas conversaciones se resolvieron sin ninguna respuesta humana, no por cuántas respondió el bot sin más; nuestra definición está explicada en cómo medimos las resoluciones de IA, y es un criterio justo para exigir a cualquier proveedor.

Errores habituales

• Lanzar el widget en todas las páginas a la vez. Empieza por las páginas donde las preguntas realmente frenan una compra o un registro (precios, checkout, una categoría de producto concreta) y amplía cuando conozcas el volumen.
• Prometer un tiempo de respuesta que no puedes cumplir. «Suele responder en pocos minutos» es un compromiso. Si no puedes cumplirlo un viernes a las 16:45, no lo muestres.
• Tratar el chat como el email. Una respuesta de chat que llega a las cuatro horas es un mal email, no un buen chat. Si tu tiempo de respuesta realista es de horas, ofrece un formulario de mensaje y fija bien las expectativas.
• Saltarte la comprobación en móvil. Una gran parte de los visitantes verá el widget en un teléfono, donde un botón que tapa un botón de compra fijo o un banner de cookies es un problema real de conversión.
• Activar todos los disparadores proactivos. Una invitación bien dirigida en una página donde los visitantes se atascan funciona mejor que un widget que se abre en cada carga de página y se cierra por reflejo.
• No leer nunca las transcripciones. Cada respuesta mala corresponde a un artículo que falta o no está claro, y corregir el contenido es lo que mueve las cifras. Retocar las instrucciones rara vez lo hace.

Las dos primeras semanas

Date un ciclo de revisión sencillo: cada mañana, lee las conversaciones del día anterior (todas, no una muestra) y convierte cada una que haya ido mal en un nuevo artículo del centro de ayuda o en una regla de enrutamiento. Dos semanas así hacen más por tu proporción de resoluciones que cualquier pantalla de configuración. Después, el widget funciona prácticamente solo, y el trabajo que queda es mantener el contenido al día a medida que cambian tus políticas.

Si quieres la versión con la IA en primera línea (el widget responde con tu propio centro de ayuda, cita lo que ha usado y pasa a tu bandeja cuando debe), empieza por el resumen del chat en vivo y consulta qué incluye cada plan en precios. La instalación sigue siendo de diez minutos; la diferencia está en lo que pasa después de que el visitante escriba el primer mensaje.