Com aplicativos de Dashboard, você pode integrar um aplicativo dentro do painel do Chatwoot 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 Chatwoot, 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.

P.S. Confira nosso [YouTube ao vivo sobre como construir um Dashboard App](https://youtu.be/posSYmbT9H0?list=PL-_vTyAGSIq8t32NtHoR97PAFb-klHUSH&t=123).

## 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.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNGw1VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d7d10a98671c2226a57d43bec26ea8a381f3233b/dashboard%20apps%20feature%20in%20chatwoot.png)

**Passo 2.** Adicione o nome do seu aplicativo e a URL onde ele está hospedado.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNHg1VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--59e090bca7a7d20fb3955d9faaf954fa87578b4d/edit%20dashboard%20app.png)

Depois de concluir, uma nova guia com o nome que você deu ao aplicativo aparecerá na janela da conversa. Neste caso, é “Pedidos do Cliente”.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNDE1VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--3074634975fc3d3be5c2ffbb5b6538654e807ca2/dashboard%20app%20in%20action.png)

Ao clicar na nova guia, você poderá ver seu aplicativo buscando dados no painel do Chatwoot.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNDU1VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--476532e8c8ea7ee21002334c43023af2ef0dfd85/dashboard%20app%20in%20action.png)

### Recebendo dados do Chatwoot no seu aplicativo

O Chatwoot 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 Chatwoot

Se você precisar solicitar os dados da conversa sob demanda do Chatwoot, pode enviar uma mensagem para a janela pai usando a [API postMessage do JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).

O Chatwoot estará ouvindo esta chave: `chatwoot-dashboard-app:fetch-info`.

### Exemplo

O código a seguir pode ser usado para consultar o aplicativo de dashboard. O Chatwoot responderá a essa solicitação fornecendo rapidamente o payload atualizado da conversa.

```
window.parent.postMessage('chatwoot-dashboard-app:fetch-info', '*')

// Você receberá uma mensagem no listener on message com o payload appContext.
```

## Payload do Evento

### Objeto conversation[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#conversation-object "Link direto para o título")

```
{
  "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[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#contact-object "Link direto para o título")

```
{
  "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[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#currentagent-object "Link direto para o título")

```
{
  "email": "string",
  "id": "integer",
  "name": "string"
}
```

### Payload Final[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#final-payload "Link direto para o título")

```
{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...Atributos da Conversa>
    },
    "contact": {
      // <...Atributos do Contato>
    },
    "currentAgent": {
      // <...Atributos do agente atual>
    }
  }
}
```