Con las Dashboard Apps, podés integrar una aplicación dentro del panel de Redchat para uso de los agentes. Esta función permite crear una aplicación de manera independiente, que luego puede incrustarse para mostrar información del cliente, pedidos, historial de pagos, etc.
Cuando tu aplicación está incrustada dentro del panel de Redchat, recibirá el contexto de la conversación y del contacto mediante un evento enviado a la ventana (window event). Solo necesitás implementar un listener para ese evento para recibir el contexto.
Cómo crear una Dashboard App
Paso 1.
Ir a Ajustes→ Integrations → Panel de aplicacioones. Hacer clic en el botón Configurar correspondiente a Dashboard Apps.
Paso 2.
Agregar el nombre de tu aplicación y la URL donde está alojada.
Una vez que termines, aparecerá una nueva pestaña en la ventana de conversación con el nombre que le diste a la app.
Cuando hagas clic en la nueva pestaña, podrás ver tu aplicación obteniendo datos desde el panel de Redchat.
Recibir datos desde Redchat en tu aplicación
Redchat enviará el contexto de la conversación y del contacto mediante un evento de ventana (window event).
Podés recibirlo implementando un listener así:
window.addEventListener("message", function (event) {
if (!isJSONValid(event.data)) {
return;
}
const eventData = JSON.parse(event.data);
});
Solicitud bajo demanda de datos a Redchat
Si necesitás solicitar datos de la conversación bajo demanda, podés enviar un mensaje a la ventana padre usando postMessage.
Redchat escucha el siguiente mensaje:
Redchat-dashboard-app:fetch-info
Ejemplo:
window.parent.postMessage('Redchat-dashboard-app:fetch-info', '*')
// Recibirás un mensaje en el listener con el payload appContext actualizado.
Estructura del Payload (Evento)
Cuando Redchat responde, envía un objeto con la siguiente estructura:
Objeto conversation
Contiene información sobre:
-
Metadatos del remitente
-
Canal
-
Agente asignado
-
Verificación HMAC
-
Lista de mensajes
-
Atributos adicionales (navegador, referer, etc.)
-
Estado de la conversación
-
Contadores, timestamps, etc.
Objeto contact
Incluye:
-
Atributos adicionales (empresa, redes sociales, descripción)
-
Estado de disponibilidad
-
Email
-
Nombre
-
Teléfono
-
Identificador
-
Thumbnail
-
Última actividad
Objeto currentAgent
Incluye:
-
Email
-
ID
-
Nombre
Payload Final
{
"event": "appContext",
"data": {
"conversation": {
// <...Atributos de conversación>
},
"contact": {
// <...Atributos de contacto>
},
"currentAgent": {
// <...Atributos del agente actual>
}
}
}