Principal Aplicativos e integrações Como usar Apps no Dashboard?

Como usar Apps no Dashboard?

Última atualização em Nov 04, 2024

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"

  }

}