Avec les applications Dashboard, vous pouvez intégrer une application dans le tableau de bord Chatwoot à destination des agents. Cette fonctionnalité vous permet de créer une application de manière indépendante, qui peut ensuite être intégrée pour fournir des informations sur les clients, commandes, historiques de paiements, etc.

Lorsque votre application est intégrée dans le tableau de bord de Chatwoot, elle recevra le contexte de la conversation et du contact via un événement window. Implémentez un écouteur pour l’événement message sur votre page afin de recevoir le contexte.

P.S. Regardez notre [YouTube live sur la création d’une application Dashboard](https://youtu.be/posSYmbT9H0?list=PL-_vTyAGSIq8t32NtHoR97PAFb-klHUSH&t=123).

## Comment créer une application dashboard ?

**Étape 1.** Rendez-vous dans Paramètres → Intégrations → Applications Dashboard. Cliquez sur le bouton “Configurer” correspondant aux applications Dashboard.

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

**Étape 2.** Ajoutez le nom de votre application et l’URL où votre application est hébergée.

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

Une fois cela fait, un nouvel onglet avec le nom que vous avez donné à l’application apparaîtra dans la fenêtre de conversation. Dans ce cas, il s’agit de “Commandes clients”.

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

Lorsque vous cliquez sur le nouvel onglet, vous verrez votre application récupérer des données sur le tableau de bord Chatwoot.

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

### Recevoir des données de Chatwoot dans votre application

Chatwoot enverra le contexte de la conversation et du contact via un événement window. Ceci peut être accessible dans votre application en implémentant un écouteur pour l’événement, comme ci-dessous :

```
window.addEventListener("message", function (event) {
  if (!isJSONValid(event.data)) {
    return;
  }

  const eventData = JSON.parse(event.data);
});
```

## Requête à la demande de données depuis Chatwoot

Si vous avez besoin de demander les données de la conversation à la demande depuis Chatwoot, vous pouvez envoyer un message à la fenêtre parente à l’aide de l’API javascript [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).

Chatwoot écoutera cette clé : `chatwoot-dashboard-app:fetch-info`.

### Exemple

Le code suivant peut être utilisé pour interroger l’application Dashboard. Chatwoot répondra à cette requête en fournissant rapidement la charge utile actualisée de la conversation.

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

// Vous recevrez un message dans l’écouteur de messages avec la charge utile appContext.
```

## Charge utile de l’événement

### Objet conversation[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#conversation-object "Lien direct vers le titre")

```
{
  "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"
}
```

### Objet contact[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#contact-object "Lien direct vers le titre")

```
{
  "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"
}
```

### Objet currentAgent[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#currentagent-object "Lien direct vers le titre")

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

### Charge utile finale[​](https://www.chatwoot.com/docs/product/others/dashboard-apps/#final-payload "Lien direct vers le titre")

```
{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...Attributs de la conversation>
    },
    "contact": {
      // <...Attributs du contact>
    },
    "currentAgent": {
      // <...Attributs de l'agent actuel>
    }
  }
}
```