Agregar el widget de chat al sitio web

Pasos para configurar el widget de chat en vivo

1. Ve a Administración > Configuración del chat > Widget de chat > Personalizar
2. En la pestaña Customize :
3. 1. Elige el color de tu marca
   2. Configura los mensajes de bienvenida
   3. Si quieres, incorpora un formulario previo al chat para recopilar información o conocer la intención del usuario antes de que comience el chat
3. Usa el botón widget de demostración (esquina inferior derecha) para obtener una vista previa de tus personalizaciones
4. Cuando estés conforme, ve a la pestaña Embed Code
5. Copia el fragmento de código para insertar
6. Pégalo en la sección inferior de tu sitio web o página de destino (justo antes de </body>)

✅ ¡Eso es todo! Cuando vuelvas a cargar la página, verás el widget de chat activo.

Enviar datos personalizados con los chats

Puedes enriquecer tu chat en vivo con datos estructurados personalizados (como ID de usuario, códigos de seguimiento, etc.).

1. Primero, crea atributos personalizados si aún no lo has hecho. 📚 Guía de referencia
2. En la pestaña Embed Code , busca la sección:

Chat attributes for which data will be sent from the website:

3. Selecciona los atributos que quieres completar previamente
4. Una vez seleccionados, el código para insertar se actualizará para incluir un objeto chatData
5. Reemplaza <value> en el fragmento con valores dinámicos o estáticos según sea necesario
6. Agrega este fragmento actualizado a tu página de destino o sitio web

🎯 Cuando se inicie un chat, Chakra capturará y almacenará automáticamente los datos personalizados configurados.

Seguimiento de las interacciones con el widget de chat

Puedes escuchar distintos eventos del ciclo de vida del widget y hacerles seguimiento en herramientas como Google Analytics, Mixpanel, etc.

Pasos para configurar eventos:

1. Ve a la pestaña Embed Code
2. Busca: Eventos del widget que quieres escuchar
3. Selecciona los eventos a los que quieres hacer seguimiento. Eventos disponibles:

• • widget:load 🟢 – Cuando aparece el botón del chat
  • widget:open 📂 – Cuando un usuario abre la ventana del chat
  • widget:close ❌ – Cuando se cierra la ventana del chat
  • chat:start 💬 – Cuando comienza un chat
  • chat:end 🛑 – Cuando se cierra un chat
  • message:receive 📥 – Cuando tu equipo envía un mensaje
  • message:send 📤 – Cuando el cliente envía un mensaje

4. Una vez que selecciones los eventos que quieres rastrear, el script de inserción se actualizará automáticamente para incluir ganchos de escucha de eventos para cada evento seleccionado.
5. Copia este script de inserción actualizado y pégalo en el código de tu sitio web o página de destino. ⚠️ Nota: Las funciones generadas son solo marcadores de posición : no rastrearán nada de forma predeterminada.
6. Deberás agregar tu propia lógica o código de analítica dentro de estos controladores para enviar datos a tu plataforma de analítica