Com aplicativos de Dashboard, você pode integrar um aplicativo dentro do painel do RockZap® para uso dos agentes. Esse recurso permite que você crie um aplicativo de forma independente, que pode ser incorporado para exibir informações dos clientes, pedidos, histórico de pagamentos anteriores, etc.
Ao ser incorporado no painel do RockZap®, seu aplicativo receberá o contexto da conversa e do contato como um evento da janela. Implemente um listener para o evento message em sua página para receber o contexto.
Como criar um aplicativo de dashboard?
Passo 1. Vá para Configurações → Integrações → Aplicativos de Dashboard. Clique no botão “Configurar” correspondente aos Aplicativos de Dashboard.
Passo 2. Adicione o nome do seu aplicativo e a URL onde ele está hospedado.
Depois de concluir, uma nova guia com o nome que você deu ao aplicativo aparecerá na janela da conversa. Neste caso, é “Pedidos do Cliente”.
Ao clicar na nova guia, você poderá ver seu aplicativo buscando dados no painel do RockZap®.
Recebendo dados do RockZap® no seu aplicativo
O RockZap® fornecerá o contexto da conversa e do contato como um evento da janela. Isso pode ser acessado dentro do seu aplicativo implementando um listener para o evento, como mostrado aqui:
window.addEventListener("message", function (event) {
if (!isJSONValid(event.data)) {
return;
}
const eventData = JSON.parse(event.data);
});
Solicitação sob demanda de dados do RockZap®
Se você precisar solicitar os dados da conversa sob demanda do RockZap®, pode enviar uma mensagem para a janela pai usando a API postMessage do JavaScript.
O RockZap® estará ouvindo esta chave: rockzap-dashboard-app:fetch-info.
Exemplo
O código a seguir pode ser usado para consultar o aplicativo de dashboard. O RockZap® responderá a essa solicitação fornecendo rapidamente o payload atualizado da conversa.
window.parent.postMessage('rockzap-dashboard-app:fetch-info', '*')
// Você receberá uma mensagem no listener on message com o payload appContext.
Payload do Evento
Objeto conversation
{
"meta": {
"sender": {
"additional_attributes": {
"description": "string",
"company_name": "string",
"social_profiles": {
"github": "string",
"twitter": "string",
"facebook": "string",
"linkedin": "string"
}
},
"availability_status": "string",
"email": "string",
"id": "integer",
"name": "string",
"phone_number": "string",
"identifier": "string",
"thumbnail": "string",
"custom_attributes": "object",
"last_activity_at": "integer"
},
"channel": "string",
"assignee": {
"id": "integer",
"account_id": "integer",
"availability_status": "string",
"auto_offline": "boolean",
"confirmed": "boolean",
"email": "string",
"available_name": "string",
"name": "string",
"role": "string",
"thumbnail": "string"
},
"hmac_verified": "boolean"
},
"id": "integer",
"messages": [
{
"id": "integer",
"content": "Hello",
"inbox_id": "integer",
"conversation_id": "integer",
"message_type": "integer",
"content_type": "string",
"content_attributes": {},
"created_at": "integer",
"private": "boolean",
"source_id": "string",
"sender": {
"additional_attributes": {
"description": "string",
"company_name": "string",
"social_profiles": {
"github": "string",
"twitter": "string",
"facebook": "string",
"linkedin": "string"
}
},
"custom_attributes": "object",
"email": "string",
"id": "integer",
"identifier": "string",
"name": "string",
"phone_number": "string",
"thumbnail": "string",
"type": "string"
}
}
],
"account_id": "integer",
"additional_attributes": {
"browser": {
"device_name": "string",
"browser_name": "string",
"platform_name": "string",
"browser_version": "string",
"platform_version": "string"
},
"referer": "string",
"initiated_at": {
"timestamp": "string"
}
},
"agent_last_seen_at": "integer",
"assignee_last_seen_at": "integer",
"can_reply": "boolean",
"contact_last_seen_at": "integer",
"custom_attributes": "object",
"inbox_id": "integer",
"labels": "array",
"muted": "boolean",
"snoozed_until": null,
"status": "string",
"timestamp": "integer",
"unread_count": "integer",
"allMessagesLoaded": "boolean",
"dataFetched": "boolean"
}
Objeto contact
{
"additional_attributes": {
"description": "string",
"company_name": "string",
"social_profiles": {
"github": "string",
"twitter": "string",
"facebook": "string",
"linkedin": "string"
}
},
"availability_status": "string",
"email": "string",
"id": "integer",
"name": "string",
"phone_number": "+91 9000000001",
"identifier": "string || null",
"thumbnail": "+91 9000000001",
"custom_attributes": {},
"last_activity_at": "integer"
}
Objeto currentAgent
{
"email": "string",
"id": "integer",
"name": "string"
}
Payload Final
{
"event": "appContext",
"data": {
"conversation": {
// <...Atributos da Conversa>
},
"contact": {
// <...Atributos do Contato>
},
"currentAgent": {
// <...Atributos do agente atual>
}
}
}