Legacy Dialogflow CX Messenger

Die alte Dialogflow CX Messenger-Integration bietet einen anpassbaren Chatdialog für Ihren Kundenservicemitarbeiter, der 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.

Zur neuesten Version von Dialogflow CX Messenger migrieren

Die neueste Version von Dialogflow CX Messenger bietet eine Authentifizierung, um den Zugriff auf Agentanfragen zu steuern, und mehr Konfigurationsoptionen für die Benutzeroberfläche. Wir empfehlen allen Nutzern der alten Version, zur neuen Version zu migrieren.

Wenn Sie die Dialogflow CX Messenger-Integration vor dem 29. August 2023 aktiviert haben, verwenden Sie möglicherweise die alte Version. Ob Sie die alte Version verwenden, können Sie anhand des in Ihre Website eingebetteten Messenger-HTML-Codes feststellen. Wenn Sie das folgende Script sehen, verwenden Sie die alte Version:

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

So migrieren Sie zur neuen Version:

  1. Löschen Sie den gesamten HTML-, CSS- und JavaScript-Code für Messenger von Ihrer Website.
  2. Folgen Sie der Anleitung für die aktuelle Dialogflow CX 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 Die dem Kundenservicemitarbeiter zugeordnete Kundenservicemitarbeiter-ID. Dies ist bereits mit Ihrer Agent-ID ausgefüllt.
chat-icon Optional Symbol für die Schaltfläche zum Öffnen des Chat-Dialogfelds. Das Symbol für Conversational Agents (Dialogflow CX) 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 aufgerufen wird, wenn das Chat-Dialogfeld geöffnet wird. Sie können einen Event-Handler verwenden, der für dieses Ereignis aufgerufen wird und die erste Kundenservicemitarbeiternachricht 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 Conversational Agents (Dialogflow CX) übergeben. Conversational Agents (Dialogflow CX) 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 Conversational Agents (Dialogflow CX) 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 Auftragsausführung von Conversational Agents (Dialogflow CX) 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 Conversational Agents (Dialogflow CX)-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 Conversational Agents (Dialogflow CX)-Ereignis, das ausgelöst wird, wenn auf die Option 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 CX 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": "Conversational Agents (Dialogflow CX) across platforms"
      },
      {
        "type": "info",
        "title": "Conversational Agents (Dialogflow CX)",
        "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 CX Messenger:

  • Betten Sie das Dialogflow CX Messenger-Element wie im Abschnitt HTML-Anpassungen 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.