Web Chat
El Web Chat es un widget embebible que permite a los visitantes de tu sitio web iniciar conversaciones en tiempo real con tu equipo.
¿Qué es el Web Chat?
El Web Chat es un widget de chat que se integra directamente en tu sitio web. Los visitantes ven un botón flotante en la esquina de la página y, al hacer clic, se abre una ventana de chat donde pueden escribir mensajes en tiempo real.
Los mensajes del Web Chat llegan a la misma bandeja de entrada unificada que los mensajes de WhatsApp, Messenger e Instagram, permitiendo a tu equipo gestionar todas las conversaciones desde un solo lugar.
Crear un canal Web Chat
- Ir a Canales: desde el menú lateral, haz clic en Canales y luego en Conectar canal.
- Seleccionar Web Chat: elige Web Chat como tipo de canal.
- Nombrar el widget: introduce un nombre para identificar este canal (por ejemplo, "Chat de soporte" o "Chat tienda online").
- Crear: haz clic en Crear. Se generará automáticamente una API Key que se mostrará una sola vez. Cópiala y guárdala en un lugar seguro.
Importante: la API Key solo se muestra una vez al crear el canal. Si la pierdes, puedes regenerarla desde la pestaña de Credenciales, pero la anterior dejará de funcionar.
Configurar apariencia
En la configuración del canal, la pestaña Apariencia permite personalizar cómo se ve el widget en tu sitio web:
- Color primario: el color principal del widget (encabezado, botón flotante, botón de enviar). Se selecciona con un selector de color.
- Posición del widget: esquina inferior derecha o inferior izquierda de la página.
- Nombre de la empresa: se muestra en el encabezado del widget.
- Mensaje de bienvenida: el mensaje inicial que ven los visitantes al abrir el chat.
- Mensaje fuera de línea: texto que se muestra cuando no hay agentes disponibles.
- Orígenes permitidos (CORS): lista de dominios que pueden cargar el widget. Dejar vacío permite todos los orígenes.
La configuración incluye una vista previa en tiempo real para que puedas ver cómo quedará el widget antes de guardarlo.
Preguntas predefinidas
La pestaña Preguntas predefinidas permite configurar botones de respuesta rápida que se muestran al visitante cuando abre el chat. Son útiles para guiar la conversación hacia los temas más comunes.
- Agregar: escribe el texto de la pregunta y haz clic en Agregar (o presiona Enter).
- Reordenar: arrastra las preguntas para cambiar su orden de aparición.
- Eliminar: haz clic en la X junto a la pregunta que deseas quitar.
Cuando un visitante hace clic en una pregunta predefinida, se envía automáticamente como mensaje, agilizando el inicio de la conversación.
Instalar en tu sitio web
En la pestaña Credenciales encontrarás el código embed para instalar el widget en tu sitio web:
- Copiar el snippet: el código embed es un tag
<script>que incluye el ID del canal y la API Key. - Pegar en tu HTML: inserta el snippet antes de la etiqueta
</body>en las páginas donde quieras mostrar el widget. - Verificar: abre tu sitio web y comprueba que el botón flotante del chat aparece en la esquina configurada.
Consejo: si configuraste orígenes permitidos (CORS), asegúrate de incluir el dominio de tu sitio web. De lo contrario, el widget no podrá conectarse.
API Key
La API Key autentica la conexión entre tu sitio web y la plataforma. Ten en cuenta:
- Se genera automáticamente al crear el canal y se muestra una sola vez.
- Si necesitas una nueva, puedes regenerarla desde la pestaña de Credenciales. La API Key anterior dejará de funcionar inmediatamente.
- Después de regenerar, deberás actualizar el snippet en tu sitio web con la nueva clave.
Funcionamiento
El Web Chat utiliza WebSocket (a través de Socket.IO) para comunicación en tiempo real bidireccional. Cuando un visitante envía un mensaje, este llega instantáneamente a la bandeja de entrada de tu equipo, y las respuestas de tus agentes aparecen al instante en el widget del visitante.
Los mensajes del Web Chat se gestionan exactamente igual que los de cualquier otro canal: se pueden asignar a agentes, etiquetar, automatizar y consultar en el historial de conversaciones.
Para más información sobre los otros canales disponibles, consulta la documentación de Canales.