Os aplicativos de dashboard permitem que você integre um app diretamente no dashboard do Whatzaz para uso dos agentes. Com esse recurso, é possível criar um aplicativo de forma independente e incorporá-lo para fornecer informações dos clientes, como pedidos, histórico de pagamentos, etc.
Quando incorporado ao dashboard do Whatzaz , o seu aplicativo receberá o contexto da conversa e do contato como um evento de janela. Para isso, implemente um listener na sua página para o evento de mensagem e receba o contexto.
P.S. Veja nosso vídeo ao vivo no YouTube sobre como criar um App de Dashboard.
Como criar um aplicativo para o dashboard?
Passo 1: Vá para Configurações → Integrações → Apps de Dashboard. Clique no botão “Configurar” correspondente aos Apps de Dashboard.
Passo 2: Adicione o nome do seu aplicativo e a URL onde ele está hospedado.
Depois de concluído, uma nova aba com o nome escolhido aparecerá na janela de conversa. Neste exemplo, a aba se chamará “Pedidos do Cliente”.
Ao clicar na nova aba, você verá seu aplicativo puxando dados diretamente no dashboard do Whatzaz .
Recebendo dados do Whatzaz no seu app
O Whatzaz enviará o contexto da conversa e do contato como um evento de janela. Para acessá-lo, implemente um listener de evento em seu app, como mostrado abaixo:
window.addEventListener("message", function (event) {
if (!isJSONValid(event.data)) {
return;
}
const eventData = JSON.parse(event.data);
});
Solicitação de dados sob demanda no Whatzaz
Caso seja necessário solicitar dados da conversa sob demanda, você pode enviar uma mensagem para a janela principal usando a API postMessage do JavaScript.
O Whatzaz ficará atento a essa chave: Whatzaz -dashboard-app:fetch-info.
Exemplo
O código a seguir pode ser usado para consultar o app do dashboard. O Whatzaz responderá fornecendo os dados atualizados da conversa.
window.parent.postMessage('Whatzaz-dashboard-app:fetch-info', '*')
Você receberá uma mensagem no listener com os dados do contexto do aplicativo.
Carga útil do evento
{
"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"
}
}