Legacy-Dialogflow Messenger

Die Legacy-Integration in Dialogflow Messenger bietet ein anpassbares Chatdialogfeld 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.

Zum neuen Dialogflow Messenger migrieren

Die neue Version von Dialogflow Messenger bietet eine Authentifizierung zur Steuerung des Zugriffs auf Agent-Abfragen und mehr Konfigurationsoptionen für die Benutzeroberfläche. Es wird empfohlen, alle Nutzer der alten Version zur neuen Version zu migrieren.

Wenn Sie die Dialogflow Messenger-Integration vor dem 29. August 2023 aktiviert haben, verwenden Sie möglicherweise noch die Legacy-Version. Um festzustellen, ob Sie die alte Version verwenden, prüfen Sie den Messenger-HTML-Code, der auf Ihrer Website eingebettet ist. Wenn das folgende Skript angezeigt wird, verwenden Sie die Legacy-Version:

https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1

So migrieren Sie zur neuen Version:

  1. Löschen Sie sämtlichen HTML-, CSS- und JavaScript-Messenger-Code von Ihrer Website.
  2. Folgen Sie der Anleitung für die neue Dialogflow Messenger-Integration.

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.
df-cx Erforderlich Gibt an, dass die Interaktion mit einem CX-Agent erfolgt. Verwenden Sie "true" als Wert.
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 Ein benutzerdefiniertes Ereignis, das beim Öffnen des Chatdialogfelds ausgelöst wird. Sie können einen Event-Handler verwenden, der für dieses Ereignis aufgerufen wird und die erste Agent-Nachricht generiert.
language-code Erforderlich Standardmäßiger Sprachcode für den ersten Intent. Dies wird mit der Standardsprache des Agents ausgefüllt.
location Erforderlich Die Region des Agents.
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. Dialogflow stellt diesen Wert über das Feld WebhookRequest.payload.userId bereit.
wait-open Optional Boolesches Attribut, das das im Attribut intent definierte benutzerdefinierte Ereignis 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
  },
  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 aus der Dialogflow-Auftragsausführung stammt. Das Format der benutzerdefinierten Nutzlastantworten wird im Abschnitt Auftragsausführung 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();

Auftragsausführung

Beim Erstellen der Auftragsausführung können Sie Textantworten und benutzerdefinierte Nutzdaten 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

Beispiel:

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

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

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": ""
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": ""
        }
      }
    ]
  ]
}

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.