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

Von dieser Integration wird nur die Standardsprache des Agents unterstützt.

Einrichten und testen

So richten Sie Dialogflow Messenger ein und aktivieren es:

  1. Rufen Sie die Dialogflow ES-Konsole auf.
  2. Klicken Sie im linken Seitenleistenmenü auf Integrations.
  3. Klicken Sie auf Dialogflow Messenger.
  4. Ein Konfigurationsdialogfeld wird geöffnet.
  5. Wählen Sie eine Umgebung aus.
  6. Klicken Sie auf Aktivieren.
  7. Kopieren Sie den Einbettungscode, um ihn in Ihre Website einzufügen.
  8. Klicken Sie auf Jetzt testen, um den Agent zu testen.
  9. Rechts unten im Fenster wird eine Schaltfläche mit dem Dialogflow-Logo angezeigt. Klicken Sie auf diese Schaltfläche.
  10. Es wird ein Chat-Dialogfeld geöffnet, mit dem Sie interagieren können.
  11. Schließen Sie das Chat-Dialogfeld, wenn Sie mit dem Testen fertig sind.
  12. 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.

Messenger-Screenshot

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.