Apps de Dashboard

Las apps de dashboard permiten integrar aplicaciones externas directamente en la interfaz de Zelta Chat. Estas aplicaciones se muestran como paneles embebidos (iframes) dentro de la vista de conversaciones, dando a los agentes acceso a información adicional sin cambiar de herramienta.

Cómo funcionan

Una app de dashboard se carga como un iframe dentro del panel lateral de la conversación o como una pestaña independiente en el dashboard. La aplicación puede solicitar el contexto de la conversación actual al dashboard mediante postMessage, y usarlo para mostrar información relevante.

Casos de uso

Caso de uso	Descripción
Consulta de CRM	Mostrar el perfil del cliente, historial de compras y oportunidades abiertas desde tu CRM
Estado de pedidos	Consultar el estado de envío o entrega de un pedido directamente en la conversación
Base de conocimiento	Buscar artículos de ayuda relevantes para la consulta del cliente
Herramientas internas	Acceder a sistemas de ticketing, facturación o inventario sin salir de Zelta Chat
Panel de métricas	Mostrar KPIs personalizados del equipo o del cliente

Crear una app de dashboard

1. Ve a Ajustes > Integraciones > Apps de Dashboard.
2. Haz clic en + Agregar app.
3. Completa los campos de configuración:

Campo	Descripción
Nombre	Nombre visible de la app en el dashboard
URL	Dirección de la aplicación web que se cargará en el iframe

4. Haz clic en Crear.

Contexto de la conversación

Zelta Chat carga la URL que configuraste tal cual, sin añadir parámetros. El contexto se entrega por postMessage entre el iframe y el dashboard.

No uses parámetros de URL

Si tu app espera recibir el contexto en la query string, no recibirá nada y el fallo será silencioso: el iframe cargará con normalidad y la app se quedará sin datos.

El intercambio de mensajes

1. Tu app, al cargarse, envía al contenedor el mensaje chatwoot-dashboard-app:fetch-info.
2. Zelta Chat responde con un postMessage que contiene una cadena JSON con el evento appContext.

// 1. Pedir el contexto al cargar la app
window.parent.postMessage('chatwoot-dashboard-app:fetch-info', '*');

// 2. Escuchar la respuesta
window.addEventListener('message', event => {
  const payload = JSON.parse(event.data);
  if (payload.event !== 'appContext') return;

  const { conversation, contact, currentAgent } = payload.data;
  // Usa los datos para renderizar tu app
});

Verifica el origen

event.data llega como cadena JSON y hay que parsearla. Comprueba event.origin antes de confiar en el mensaje: cualquier ventana puede enviar mensajes a tu iframe.

Datos que llegan en appContext

Clave	Contenido
conversation	La conversación actual completa, tal como la maneja el dashboard (incluye id, status, meta, mensajes y atributos personalizados)
contact	El contacto asociado a la conversación, con sus atributos y atributos personalizados
currentAgent	El agente que está viendo la conversación: id, name y email

Nota

Zelta Chat reenvía el contexto cada vez que la app lo pide y cuando el iframe termina de cargar. Si el agente cambia de conversación, vuelve a solicitarlo para refrescar los datos.

Desarrollar tu propia app

Para crear una aplicación compatible con el dashboard de Zelta Chat:

1. Crea una aplicación web accesible por HTTPS que acepte ser cargada en un iframe.
2. Pide el contexto con postMessage al cargar, como se describe arriba.
3. Muestra información contextual basada en los datos recibidos.
4. Adapta el diseño para que se visualice correctamente en el espacio del panel lateral (ancho aproximado de 300-400 px).

Consejo

Diseña tu app con un layout responsivo que funcione bien en el espacio limitado del panel lateral. Evita elementos que requieran mucho ancho horizontal.

Configuración de seguridad

Encabezados de iframe

Tu aplicación debe permitir ser cargada dentro de un iframe. Verifica que los encabezados HTTP de tu servidor incluyan:

• X-Frame-Options: Debe permitir el dominio de Zelta Chat, o no estar presente.
• Content-Security-Policy: Si usas frame-ancestors, incluye https://chat.zelta.dev.

HTTPS obligatorio

Las apps de dashboard deben servirse a través de HTTPS. Las URLs con HTTP simple no se cargarán por políticas de seguridad del navegador.

Gestionar apps de dashboard

Ver apps instaladas

Desde Ajustes > Integraciones > Apps de Dashboard puedes ver todas las apps configuradas.

Editar una app

1. Haz clic en la app que deseas modificar.
2. Actualiza el nombre o la URL.
3. Haz clic en Actualizar.

Eliminar una app

1. Haz clic en el ícono de eliminar junto a la app.
2. Confirma la eliminación.

Importante

Las apps de dashboard tienen acceso al contexto de la conversación, incluyendo datos del contacto. Asegúrate de que las URLs configuradas pertenezcan a aplicaciones de confianza y cumplan con tus políticas de privacidad de datos.