Chat Web

El chat web es un widget de chat en vivo que puedes instalar en tu sitio web para que tus visitantes se comuniquen contigo en tiempo real. Las conversaciones llegan directamente a la bandeja de entrada unificada de Zelta Chat.

Crear el canal de Chat Web

1. Ve a Ajustes > Canales > + Agregar canal.
2. Selecciona Chat Web.
3. Configura los datos básicos:
   • Nombre del canal: Un nombre descriptivo (ej: "Chat - Sitio Web Principal")
   • Nombre del sitio web: El nombre de tu empresa o sitio
   • URL del sitio: https://tusitio.com
   • Mensaje de bienvenida: El primer mensaje que verá el visitante al abrir el chat
4. Haz clic en Crear canal.

Instalación del widget

Después de crear el canal, Zelta Chat genera un fragmento de código que debes insertar en tu sitio web.

Código de instalación

Copia el fragmento proporcionado e insértalo justo antes de la etiqueta de cierre </body> en tu sitio web:

<script>
  (function(d,t) {
    var BASE_URL = "https://chat.zelta.dev";
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = BASE_URL + "/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);
    g.onload = function() {
      window.zeltaChatSDK.run({
        websiteToken: 'TU_TOKEN_AQUI',
        baseUrl: BASE_URL
      });
    }
  })(document, "script");
</script>

Consejo

Si usas un gestor de etiquetas (Google Tag Manager, etc.), puedes agregar el fragmento como una etiqueta HTML personalizada en lugar de editar directamente el código del sitio.

Verificar la instalación

1. Abre tu sitio web en el navegador.
2. Deberás ver el ícono del widget de chat en la esquina inferior del sitio.
3. Haz clic para abrirlo y envía un mensaje de prueba.
4. Verifica que el mensaje aparezca en tu bandeja de Zelta Chat.

Personalización visual

Apariencia del widget

Personaliza la apariencia del widget desde Ajustes > Canales > [Tu canal de Chat Web] > Apariencia:

Opción	Descripción
Color primario	Color del encabezado y botones del widget
Posición	Esquina inferior derecha o inferior izquierda
Tipo de burbuja	Estándar (ícono) o expandida (con texto)
Texto de la burbuja	Texto que aparece junto al ícono (si es expandida)
Logo	Imagen que se muestra en el encabezado del widget
Idioma	Idioma de los textos del sistema del widget

Constructor visual

El constructor visual te permite previsualizar los cambios en tiempo real:

1. Modifica los colores, posición y textos.
2. La vista previa a la derecha muestra cómo se verá el widget.
3. Haz clic en Guardar cuando estés conforme con el resultado.

Formulario previo al chat

Recopila información del visitante antes de iniciar la conversación:

1. Ve a Ajustes > Canales > [Tu canal de Chat Web] > Formulario previo al chat.
2. Activa Solicitar datos antes de iniciar el chat.
3. Configura los campos requeridos:

Campo	Requerido	Descripción
Nombre	Configurable	Nombre del visitante
Correo electrónico	Configurable	Para seguimiento posterior
Teléfono	Configurable	Número de contacto
Mensaje personalizado	Opcional	Texto introductorio del formulario

4. Los datos recopilados se asocian automáticamente al contacto en Zelta Chat.

Consejo

Solicita solo la información esencial. Cada campo adicional reduce la tasa de inicio de conversación. Nombre y correo electrónico suelen ser suficientes.

Integración con horario de atención

Configura el comportamiento del widget según el horario de tu equipo:

Estado	Comportamiento
Dentro del horario	Widget muestra "En línea" y permite iniciar chat en tiempo real
Fuera del horario	Widget muestra "Fuera de horario" y ofrece dejar un mensaje

1. Ve a Ajustes > Canales > [Tu canal de Chat Web] > Horario.
2. Selecciona una opción:
   • Usar horario global: Hereda la configuración general de tu cuenta.
   • Horario personalizado: Define horarios específicos para este canal.
3. Configura el mensaje fuera de horario que verán los visitantes.

Reglas de exclusión de páginas

Controla en qué páginas se muestra o se oculta el widget:

1. Ve a Ajustes > Canales > [Tu canal de Chat Web] > Páginas.
2. Configura las reglas:

Regla	Ejemplo	Efecto
Mostrar solo en	https://tusitio.com/contacto	Widget solo aparece en esa página
Ocultar en	https://tusitio.com/checkout/*	Widget se oculta en páginas de pago
Patrón comodín	https://tusitio.com/blog/*	Aplica a todas las páginas del blog

Widget en aplicaciones móviles

Las aplicaciones móviles (iOS y Android) que integran el widget de chat web mediante WebViews no envían información de dominio al servidor. Esto significa que, si tienes configuradas restricciones de dominio en tu canal de chat web, el widget no se cargará dentro de la aplicación móvil.

Para solucionar esto, Zelta Chat incluye una opción que permite habilitar el widget específicamente para aplicaciones móviles sin comprometer la seguridad de las restricciones de dominio en navegadores web.

Activar el widget para aplicaciones móviles

1. Ve a Ajustes > Canales > [Tu canal de Chat Web] > Configuración.
2. Activa el interruptor Habilitar widget en aplicaciones móviles.
3. Guarda los cambios.

Consejo

Esta opción solo es necesaria si tienes restricciones de dominio activas. Si no has configurado restricciones de dominio, el widget se cargará normalmente en cualquier WebView sin necesidad de activar esta opción.

Validación de identidad (HMAC)

La validación de identidad permite verificar que los datos del usuario enviados al widget son auténticos y no han sido manipulados por terceros. Esto se logra mediante un hash HMAC generado en tu servidor con una clave secreta exclusiva del canal.

Configurar la validación de identidad

1. Ve a Ajustes > Canales > [Tu canal de Chat Web] > Configuración.
2. Abre el acordeón Validación de identidad (Identity Validation).
3. Copia la clave secreta HMAC que se muestra en pantalla.
4. Usa esta clave en tu servidor para generar el identifier_hash de cada usuario.
5. Si deseas que la validación sea obligatoria, activa el interruptor Hacer obligatoria la validación de identidad. Cuando está activo, todas las sesiones del widget deben incluir un token de identidad válido; las sesiones sin token serán rechazadas.

Generar el HMAC en tu servidor

El identifier_hash debe generarse en el lado del servidor utilizando la clave secreta y el identificador único del usuario. Nunca expongas la clave secreta en el código del lado del cliente.

Importante

Cuando activas la validación obligatoria, cualquier visitante que no proporcione un identifier_hash válido no podrá usar el widget. Asegúrate de que tu implementación genere y envíe el hash correctamente antes de activar esta opción.

Métodos del SDK

El SDK de Zelta Chat expone métodos que puedes usar para personalizar el comportamiento del widget desde tu código:

Método	Descripción
zeltaChatSDK.toggle()	Abre o cierra el widget
zeltaChatSDK.toggleBubbleVisibility(estado)	Muestra (show) u oculta (hide) la burbuja
zeltaChatSDK.setUser(usuario)	Establece los datos del usuario (nombre, email, etc.)
zeltaChatSDK.setLocale(idioma)	Cambia el idioma del widget
zeltaChatSDK.setLabel(etiqueta)	Agrega una etiqueta a la conversación
zeltaChatSDK.removeLabel(etiqueta)	Elimina una etiqueta de la conversación
zeltaChatSDK.reset()	Reinicia la sesión del widget

Ejemplo: Identificar al usuario

window.zeltaChatSDK.setUser({
  name: 'María García',
  email: '[email protected]',
  phone: '+507 6000 0000',
  identifier_hash: 'hash_hmac_generado_en_tu_servidor'
});

Seguridad

El campo identifier_hash es un HMAC generado en tu servidor con la clave secreta del canal. Esto previene la suplantación de identidad. Nunca expongas la clave secreta en el código del lado del cliente.

Solución de problemas

Problema	Solución
Widget no aparece	Verifica que el código esté insertado correctamente y que el token sea válido
Widget aparece en páginas no deseadas	Configura las reglas de exclusión de páginas
Formulario no se muestra	Verifica que el formulario previo al chat esté activado
Mensajes no llegan a la bandeja	Confirma que el canal esté activo en Ajustes > Canales
Colores no se actualizan	Limpia la caché del navegador después de guardar cambios