Com os aplicativos de painel, você pode integrar um aplicativo ao painel do Chatwoot para uso dos agentes. Esse recurso permite criar um aplicativo independente, que pode ser incorporado para fornecer informações dos clientes, pedidos, histórico de pagamentos anteriores, etc.
Quando incorporado ao painel do Chatwoot, seu aplicativo obterá o contexto da conversa e do contato como um evento de janela. Implemente um ouvinte para o evento de mensagem em sua página para receber o contexto.
P.S.: Confira nossa transmissão ao vivo no YouTube sobre como criar um aplicativo de painel.
Como criar um aplicativo de painel?
Etapa 1. Acesse Configurações → Integrações → Aplicativos de painel. Clique no botão "Configurar" correspondente aos Aplicativos do Painel.
Etapa 2. Adicione o nome do seu aplicativo e a URL em que ele está hospedado.
Após terminar, uma nova aba com o nome que você deu ao aplicativo aparecerá na janela de conversa. Neste caso, é "Pedidos do Cliente".
Ao clicar na nova aba, você poderá ver seu aplicativo buscando dados no painel do Chatwoot.
Recebendo dados do Chatwoot em seu aplicativo
O Chatwoot entregará o contexto da conversa e do contato como um evento de janela. Isso pode ser acessado dentro do seu aplicativo implementando um ouvinte 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 Chatwoot
Se precisar solicitar os dados da conversa sob demanda do Chatwoot, você pode enviar uma mensagem para a janela pai usando a API postMessage em JavaScript.
O Chatwoot ouvirá esta chave: chatwoot-dashboard-app:fetch-info.
Exemplo
O código a seguir pode ser usado para consultar o aplicativo do painel. O Chatwoot responderá a esta solicitação fornecendo o conteúdo atualizado da conversa imediatamente.
window.parent.postMessage('chatwoot-dashboard-app:fetch-info', '*')
// Você receberá uma mensagem no ouvinte de mensagens on com o conteúdo appContext.
Carga Útil do Evento
objeto de conversa
{
"meta": {
"remetente": {
"atributos_adicionais": {
"descrição": "string",
"nome_da_empresa": "string",
"perfis_sociais": {
"github": "string",
"twitter": "string",
"facebook": "string",
"linkedin": "string"
}
},
"status_de_disponibilidade": "string",
"e-mail": "string",
"id": "inteiro",
"nome": "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": "Olá",
"inbox_id": "inteiro",
"conversation_id": "inteiro",
"message_type": "inteiro",
"content_type": "string",
"content_attributes": {},
"created_at": "inteiro",
"private": "boolean",
"source_id": "string",
"sender": {
"additional_attributes": {
"description": "string","nome_da_empresa": "string",
"perfis_sociais": {
"github": "string",
"twitter": "string",
"facebook": "string",
"linkedin": "string"
}
},
"atributos_personalizados": "objeto",
"e-mail": "string",
"id": "inteiro",
"identificador": "string",
"nome": "string",
"número_de_telefone": "string",
"miniatura": "string",
"tipo": "string"
}
}
],
"id_da_conta": "inteiro",
"atributos_adicionais": {
"navegador": {
"nome_do_dispositivo": "string",
"nome_do_navegador": "string",
"nome_da_plataforma": "string",
"versão_do_navegador": "string",
"versão_da_plataforma": "string"
},
"referer": "string",
"initiated_at": {
"timestamp": "string"
}
},
"agent_last_seen_at": "inteiro",
"assignee_last_seen_at": "inteiro",
"can_reply": "booleano",
"contact_last_seen_at": "inteiro",
"custom_attributes": "objeto",
"inbox_id": "inteiro",
"labels": "matriz",
"silenciado": "booleano",
"sonecado_até": nulo,
"status": "string",
"timestamp": "inteiro",
"unread_count": "inteiro",
"allMessagesLoaded": "booleano",
"dataFetched": "booleano"
}
objeto de contato
{
"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"
}
Carga Final
{
"event": "appContext",
"data": {
"conversation": {
// <...Atributos da Conversa>
},
"contact": {
// <...Atributos do Contato>
},
"currentAgent": {
// <...Atributos do Agente Atual>
}
}
}