Como usar Apps no Dashboard?
Os aplicativos de dashboard permitem que você integre um app diretamente no dashboard do Chatwoot 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 Chatwoot, 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 Chatwoot.
Recebendo dados do Chatwoot no seu app
O Chatwoot 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 Chatwoot
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 Chatwoot ficará atento a essa chave: chatwoot-dashboard-app:fetch-info.
Exemplo
O código a seguir pode ser usado para consultar o app do dashboard. O Chatwoot responderá fornecendo os dados
atualizados da conversa.
window.parent.postMessage('chatwoot-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"
}
}
