Mit Dashboard-Apps können Sie eine App in das Chatwoot-Dashboard für die Nutzung durch Agenten integrieren. Diese Funktion ermöglicht es Ihnen, eine Anwendung unabhängig zu erstellen, die dann eingebettet werden kann, um Kundeninformationen, Bestellungen, vergangene Zahlungshistorien usw. bereitzustellen.

Wenn Ihre Anwendung im Chatwoot-Dashboard eingebettet ist, erhält sie den Kontext der Konversation und des Kontakts als Window-Event. Implementieren Sie einen Listener für das message-Event auf Ihrer Seite, um den Kontext zu empfangen.

P.S. Sehen Sie sich unser [YouTube-Live zur Erstellung einer Dashboard App](https://youtu.be/posSYmbT9H0?list=PL-_vTyAGSIq8t32NtHoR97PAFb-klHUSH&t=123) an.

## Wie erstellt man eine Dashboard-App?

**Schritt 1.** Gehen Sie zu Einstellungen → Integrationen → Dashboard-Apps. Klicken Sie auf die Schaltfläche „Konfigurieren“ entsprechend den Dashboard-Apps.

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

**Schritt 2.** Fügen Sie den Namen Ihrer App und die URL hinzu, unter der Ihre App gehostet wird.

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

Nachdem Sie fertig sind, erscheint ein neuer Tab mit dem von Ihnen gewählten Namen der App im Konversationsfenster. In diesem Fall ist das „Customer Orders“.

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

Wenn Sie auf den neuen Tab klicken, sehen Sie, wie Ihre Anwendung Daten auf dem Chatwoot-Dashboard abruft.

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

### Datenempfang von Chatwoot in Ihrer App

Chatwoot übermittelt den Konversations- und Kontaktkontext als Window-Event. Dies kann innerhalb Ihrer App genutzt werden, indem Sie einen Listener für das Event implementieren, wie hier gezeigt:

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

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

## Bedarfsgesteuerte Anforderung von Daten aus Chatwoot

Wenn Sie Konversationsdaten bei Bedarf von Chatwoot anfordern müssen, können Sie mit der Javascript-API [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) eine Nachricht an das übergeordnete Fenster senden.

Chatwoot hört auf diesen Schlüssel: `chatwoot-dashboard-app:fetch-info`.

### Beispiel

Mit folgendem Code kann die Dashboard-App abgefragt werden. Chatwoot antwortet auf diese Anfrage umgehend, indem es die aktualisierte Konversationsnutzlast bereitstellt.

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

// Sie erhalten eine Nachricht im On-Message-Listener mit der appContext-Nutzlast.
```

## Event-Nutzlast

### conversation-Objekt[​](https://www.chatwoot.com/hc/user-guide/articles/1784681459-wie-verwendet-man-dashboard_apps "Direkter Link zur Überschrift")

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

### contact-Objekt[​](https://www.chatwoot.com/hc/user-guide/articles/1784681459-wie-verwendet-man-dashboard_apps "Direkter Link zur Überschrift")

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

### currentAgent-Objekt[​](https://www.chatwoot.com/hc/user-guide/articles/1784681459-wie-verwendet-man-dashboard_apps "Direkter Link zur Überschrift")

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

### Endgültige Nutzlast[​](https://www.chatwoot.com/hc/user-guide/articles/1784681459-wie-verwendet-man-dashboard_apps "Direkter Link zur Überschrift")

```
{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...Conversation Attributes>
    },
    "contact": {
      // <...Contact Attributes>
    },
    "currentAgent": {
      // <...Current agent Attributes>
    }
  }
}
```