Diese Seite wurde von der Cloud Translation API übersetzt.

Dialogflow Messenger

Die Integration von Dialogflow Messenger bietet ein anpassbares Chat-Dialogfeld für Ihren Agent, das in Ihre Website eingebettet werden kann. Das Chat-Dialogfeld wird als Dialogfenster implementiert, das von Ihrem Endnutzer geöffnet und geschlossen werden kann. Wenn das Chat-Dialogfeld geöffnet wird, wird es rechts unten über dem Inhalt angezeigt.

Messenger-Screenshot

Beschränkungen

Bei dieser Integration wird nur die Standardsprache des Kundenservicemitarbeiters unterstützt.

Einrichten und testen

So richten Sie Dialogflow Messenger ein und aktivieren es:

Rufen Sie die Dialogflow ES-Konsole auf.
Klicken Sie im linken Seitenleistenmenü auf Integrations.
Klicken Sie auf Dialogflow Messenger.
Ein Konfigurationsdialogfeld wird geöffnet.
Wählen Sie eine Umgebung aus.
Klicken Sie auf Aktivieren.
Kopieren Sie den Einbettungscode, um ihn in Ihre Website einzufügen.
Klicken Sie auf Jetzt testen, um den Agent zu testen.
Rechts unten im Fenster wird eine Schaltfläche mit dem Dialogflow-Logo angezeigt. Klicken Sie auf diese Schaltfläche.
Es wird ein Chat-Dialogfeld geöffnet, mit dem Sie interagieren können.
Schließen Sie das Chat-Dialogfeld, wenn Sie mit dem Testen fertig sind.
Klicken Sie im Konfigurationsdialogfeld auf Schließen.

Einbetten

Fügen Sie den oben kopierten Einbettungscode in eine Webseite auf Ihrer Website ein. Die HTML-Elemente <script> und <df-messenger> sollten sich im <body>-Element Ihrer Seite befinden. Um responsive Layouts zuzulassen, fügen Sie Ihrer Seite auch Folgendes hinzu:

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML-Anpassungen

Sie können verschiedene Aspekte für die Darstellung und das Verhalten des Chat-Dialogfelds anpassen. Das HTML-Element df-messenger hat die folgenden Attribute:

Attribut	Eingaberichtlinie	Wert
`agent-id`	Erforderlich	Agent-ID, die dem Dialogflow-Agent zugeordnet ist. Dies ist bereits mit Ihrer Agent-ID ausgefüllt.
`chat-icon`	Optional	Symbol für die Schaltfläche zum Öffnen des Chat-Dialogfelds. Das Dialogflow-Symbol ist die Standardeinstellung. Dieses Feld muss eine öffentliche URL sein. Die Größe des Symbols sollte 36 x 36 Pixel betragen.
`chat-title`	Erforderlich	Titel, der oben im Chat-Dialogfeld angezeigt wird Dies ist bereits mit dem Namen des Bearbeiters ausgefüllt.
`expand`	Optional	Boolesches Attribut, mit dem festgelegt wird, dass das Chat-Dialogfeld beim Laden der Seite geöffnet bleibt. Standardmäßig ist das Chat-Dialogfeld beim Laden der Seite geschlossen.
`intent`	Optional	Das Ereignis, mit dem der erste Intent ausgelöst wird, wenn das Chat-Dialogfeld geöffnet wird. Dies ist bereits mit dem Ereignis `WELCOME` ausgefüllt.
`language-code`	Erforderlich	Standardmäßiger Sprachcode für den ersten Intent. Dies wird mit der Standardsprache des Agents ausgefüllt.
`session-id`	Optional	Eine Sitzungs-ID. Wird dies nicht angegeben, generiert die Integration eine eindeutige ID für jedes Chat-Dialogfeld.
`user-id`	Optional	Kann verwendet werden, um einen Nutzer sitzungsübergreifend zu erfassen. Sie können den Wert in einer Anfrage zur Intent-Erkennung über das Feld `queryParams.payload.userId` an Dialogflow übergeben.
`wait-open`	Optional	Boolesches Attribut, das das Begrüßungsereignis verzögert, bis das Dialogfeld tatsächlich geöffnet wird.

CSS-Anpassungen

Sie können den Stil Ihres Chatdialogs anpassen. Legen Sie dazu CSS-Variablen fest.

Die folgenden CSS-Variablen können bereitgestellt werden:

CSS-Variable	Betroffenes Attribut
`df-messenger-bot-message`	Hintergrundfarbe für Agent-Nachrichten.
`df-messenger-button-titlebar-color`	Farbe für die unverankerte Schaltfläche und die Titelleiste des Chat-Dialogfelds.
`df-messenger-button-titlebar-font-color`	Schriftfarbe für den Titel in der Titelleiste.
`df-messenger-chat-background-color`	Farbe für den Hintergrund des Chatdialogs.
`df-messenger-font-color`	Schriftfarbe für Nachrichten.
`df-messenger-input-box-color`	Hintergrundfarbe für das Texteingabefeld.
`df-messenger-input-font-color`	Schriftfarbe für das Texteingabefeld.
`df-messenger-input-placeholder-font-color`	Schriftfarbe für Platzhaltertext im Texteingabefeld.
`df-messenger-minimized-chat-close-icon-color`	Farbe des Symbols "Schließen" in der geschlossenen Chatansicht.
`df-messenger-send-icon`	Farbe des Symbols "Senden" im Texteingabefeld.
`df-messenger-user-message`	Hintergrundfarbe für Benachrichtigungen von Nutzern.

Beispielcode:

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

Die obigen Einstellungen haben folgende Auswirkungen:

Messenger-Screenshot

JavaScript-Ereignisse

Dialogflow Messenger löst eine Vielzahl von Ereignissen aus, für die Sie Ereignis-Listener erstellen können.

Das Ereignisziel für diese Ereignisse ist das Element df-messenger.

Fügen Sie zum Hinzufügen eines Ereignis-Listeners für das Element df-messenger den folgenden JavaScript-Code hinzu, wobei event-type einer der unten beschriebenen Ereignisnamen ist:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

Die folgenden Ereignistypen werden unterstützt:

`df-accordion-clicked`

Dieses Ereignis tritt auf, wenn ein Nutzer auf ein Akkordeonelement klickt. Die Ereignisstruktur sieht so aus:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

`df-button-clicked`

Dieses Ereignis tritt auf, wenn ein Nutzer auf ein Schaltflächenelement klickt. Die Ereignisstruktur sieht so aus:

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

`df-chip-clicked`

Dieses Ereignis tritt ein, wenn ein Nutzer einen Vorschlags-Chip auswählt. Die Ereignisstruktur sieht so aus:

query: string // Text of the suggestion chip that was selected.

`df-info-card-clicked`

Dieses Ereignis tritt auf, wenn der Endnutzer auf die Informationseinheit in der Titelleiste klickt. Die Ereignisstruktur sieht so aus:

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

`df-list-element-clicked`

Dieses Ereignis tritt auf, wenn ein Nutzer auf ein Element in einer Liste klickt. Die Ereignisstruktur sieht so aus:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string,
    parameters: {},
    languageCode: string
  },
  payload: {}
}

`df-messenger-error`

Dieses Ereignis tritt auf, wenn die Dialogflow API einen Fehlerstatuscode sendet. Die Ereignisstruktur sieht so aus:

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

`df-messenger-loaded`

Dieses Ereignis wird ausgelöst, wenn das Element df-messenger vollständig geladen und initialisiert wurde.

`df-request-sent`

Dieses Ereignis tritt auf, wenn eine Anfrage an die Dialogflow API gesendet wird. Dieses Ereignis kann zusammen mit df-response-received verwendet werden, um die Anfragelatenz zu beobachten. Die Ereignisstruktur sieht so aus:

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

`df-response-received`

Dieses Ereignis tritt auf, wenn eine Antwort von der Dialogflow API empfangen wird. Die Ereignisstruktur sieht so aus:

response: detectIntentResponse

`df-user-input-entered`

Dieses Ereignis tritt auf, wenn der Endnutzer eine Abfrage eingibt. Die Ereignisstruktur sieht so aus:

input: string // Text entered by user

JavaScript-Funktionen

Das Element df-messenger bietet Funktionen, die Sie aufrufen können, um dessen Verhalten zu beeinflussen.

`renderCustomText`

Diese Funktion gibt eine einfache Textnachricht wieder, so als ob sie eine einfache Textantwort von Dialogflow wäre.

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');

`renderCustomCard`

Diese Funktion rendert eine benutzerdefinierte Karte, so als ob sie eine Rich-Response-Nachricht von Dialogflow wäre. Das Format der benutzerdefinierten Nutzlastantworten wird im Abschnitt Rich Media-Antworten definiert.

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
dfMessenger.renderCustomCard(payload);

`showMinChat`

Diese Funktion zeigt eine minimale Version von Nachrichtenlisten an.

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();

Rich-Media-Antworten

Beim Erstellen von Rich-Response-Nachrichten können Sie Textantworten und benutzerdefinierte Nutzdaten auf dem Tab Standard für den Intent erstellen. Die Textantworten werden für einfache Agent-Antworten und die benutzerdefinierten Nutzlasten für Rich-Antworten verwendet. Das benutzerdefinierte Nutzlastformat für alle Antworttypen hat die folgende Grundstruktur:

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

Beachten Sie, dass der Wert richContent ein äußeres und mehrere innere Arrays zulässt. Antworten innerhalb eines inneren Arrays werden in einer einzelnen visuellen Karte zusammengefasst. Wenn das äußere Array mehrere interne Arrays enthält, werden mehrere Karten angezeigt. Eine für jedes interne Array.

In den verbleibenden Unterabschnitten werden die verschiedenen Antworttypen beschrieben, die Sie für eine benutzerdefinierte Nutzlast konfigurieren können.

Antworttyp "info"

Der Antworttyp "info" ist eine einfache Titelkarte, auf die Nutzer klicken oder tippen können.

Messenger-Screenshot

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "info"
`title`	String	Titel der Karte
`subtitle`	String	Untertitel der Karte
`image`	Objekt	Bild
`image.src`	Objekt	Bildquelle
`image.src.rawUrl`	String	Öffentliche URL des Bilds
`actionLink`	String	URL, der beim Klicken auf die Karte zu folgen ist

Beispiel:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "actionLink": "https://example.com"
      }
    ]
  ]
}

Antworttyp "description"

Der Antworttyp "description" ist eine Informationskarte, die mehrere Textzeilen enthalten kann.

Messenger-Screenshot

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "description"
`title`	String	Titel der Karte
`text`	array<string>	Array von Strings, wobei jeder String in einer neuen Zeile gerendert wird

Beispiel:

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

Antworttyp "image"

Der Antworttyp "image" ist eine Bildkarte, auf die Nutzer klicken oder tippen können.

Messenger-Screenshot

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "image"
`rawUrl`	String	Öffentliche URL des Bilds
`accessibilityText`	String	Alternativer Text für das Bild

Beispiel:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

Antworttyp "button"

Der Antworttyp "button" ist eine kleine Schaltfläche mit einem Symbol, auf das Nutzer klicken oder tippen können.

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "button"
`icon`	Objekt	Symbol für die Schaltfläche
`icon.type`	String	Symbol aus der Materialsymbol-Bibliothek Das Standardsymbol ist ein Pfeil
`icon.color`	String	Farb-Hexcode
`text`	String	Text für die Schaltfläche
`link`	String	URL, der beim Klicken auf die Schaltfläche zu folgen ist
`event`	Objekt	Dialogflow-Ereignis, das ausgelöst wird, wenn auf die Schaltfläche geklickt wird – beachten Sie die REST-Referenz für EventInput

Beispiel:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

Antworttyp "list"

Der Antworttyp "list" ist eine Karte mit mehreren Optionen, aus denen Nutzer auswählen können.

Messenger-Screenshot

Die Antwort enthält ein Array mit den Antworttypen list und divider. In der folgenden Tabelle wird der Typ list beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "list"
`title`	String	Titel der Option
`subtitle`	String	Untertitel der Option
`event`	Objekt	Dialogflow-Ereignis, das ausgelöst wird, wenn auf die Schaltfläche geklickt wird – beachten Sie die REST-Referenz für EventInput

In der folgenden Tabelle wird der Typ divider beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "divider"

Beispiel:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

Antworttyp "accordion"

Der Antworttyp "accordion" ist eine kleine Karte, auf die ein Nutzer klicken oder tippen kann, um mehr Text einzublenden und anzuzeigen.

Messenger-Screenshot

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "accordion"
`title`	String	Titel des "Akkordeons"
`subtitle`	String	Untertitel des "Akkordeons"
`image`	Objekt	Bild
`image.src`	Objekt	Bildquelle
`image.src.rawUrl`	String	Öffentliche URL des Bilds
`text`	String	Text für das "Akkordeon"

Beispiel:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Antworttyp "chips"

Der Antworttyp "chips" bietet dem Endnutzer eine Liste anklickbarer Chips mit Vorschlägen.

Messenger-Screenshot

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	String	Antworttyp: "chips"
`options`	array<object>	Array von Optionsobjekten
`options[].text`	String	Text der Option
`options[].image`	Objekt	Bild für die Option
`options[].image.src`	Objekt	Bildquelle für die Option
`options[].image.src.rawUrl`	String	Öffentliche URL des Bilds für die Option
`options[].link`	String	Link der Option

Beispiel:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "text": "Chip 1",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          },
          {
            "text": "Chip 2",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          }
        ]
      }
    ]
  ]
}

Antworttypen kombinieren

Die einzelnen Rich-Media-Nachrichtenelemente für Dialogflow Messenger können verwendet werden, um eine benutzerdefinierte Karte zu erstellen, die Ihren Anforderungen entspricht. Hier ein Beispiel mit einigen der oben aufgeführten Elemente:

Messenger-Screenshot

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "subtitle": "Build natural and rich conversational experiences",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

Debugging

So testen Sie den Agent lokal mit Dialogflow Messenger:

Betten Sie das Dialogflow Messenger-Element wie oben beschrieben in eine Seite ein.
Starten Sie einen lokalen HTTP-Server für diese Seite mit einem bestimmten Port.
Greifen Sie unter http://localhost:port_number auf diese Seite zu.