Die alte Dialogflow CX Messenger-Integration bietet einen anpassbaren Chatdialog für Ihren Agenten, den Sie in Ihre Website einbetten können. Nutzer können das Chatfenster öffnen und schließen. Wenn ein Nutzer das Chat-Dialogfeld öffnet, wird es über Ihren Inhalten unten rechts auf dem Bildschirm angezeigt.
Zum neuesten Dialogflow CX Messenger migrieren
Die aktuelle Version von Dialogflow CX Messenger bietet Authentifizierung zur Steuerung des Zugriffs auf Agentenabfragen und weitere Konfigurationsoptionen für die Benutzeroberfläche. Wir empfehlen, von der Legacy-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 Legacy-Version. Wenn Sie herausfinden möchten, ob Sie die Legacy-Version verwenden, prüfen Sie den in Ihre Website eingebetteten HTML-Code des Messengers. Wenn Sie das folgende Script sehen, verwenden Sie die Legacy-Version:
https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1
So migrieren Sie zur neuen Version:
- Löschen Sie den gesamten HTML-, CSS- und JavaScript-Messenger-Code von Ihrer Website.
- Folgen Sie der Anleitung für die neueste Dialogflow CX Messenger-Integration.
HTML-Anpassungen
Sie können verschiedene Aspekte der Darstellung und des Verhaltens des Chat-Dialogfelds anpassen.
Das HTML-Element df-messenger hat die folgenden Attribute:
| Attribut | Eingaberichtlinie | Wert |
|---|---|---|
agent-id |
Erforderlich | Agenten-ID, die dem KI-Agenten zugeordnet ist. Dies ist bereits mit Ihrer Agent-ID ausgefüllt. |
chat-icon |
Optional | Symbol für den Button zum Öffnen des Chat-Dialogfelds. Das Dialogflow CX-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 Kundendienst-Agenten 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 Ereignis-Handler verwenden, der für dieses Ereignis aufgerufen wird und die erste Nachricht des KI-Agenten erzeugt. |
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 | Ermöglicht es, einen Nutzer sitzungsübergreifend zu erfassen. Sie können den Wert über das Feld queryParams.payload.userId in einer Intent-Erkennungsanfrage an Dialogflow CX übergeben. Dialogflow CX stellt Ihnen diesen Wert dann über das Feld WebhookRequest.payload.userId zur Verfügung. |
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 | Betroffene Unterkunft |
|---|---|
df-messenger-bot-message |
Hintergrundfarbe für Agent-Nachrichten. |
df-messenger-button-titlebar-color |
Farbe für den unverankerten Button 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>
Diese Einstellungen führen zu Folgendem:
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 df-messenger-Element.
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
Sie können Funktionen aufrufen, die vom df-messenger-Element bereitgestellt werden, um sein Verhalten zu beeinflussen.
renderCustomText
Diese Funktion rendert eine Textnachricht, als ob sie von Dialogflow CX als Textantwort stammen würde.
Beispiel:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');
renderCustomCard
Diese Funktion rendert eine benutzerdefinierte Karte, als ob sie von der Dialogflow CX-Ausführung stammen würde. Das Format der Antwort mit benutzerdefinierter Nutzlast wird im Abschnitt Fulfillment 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 des Fulfillments können Sie Textantworten und benutzerdefinierte Nutzlasten erstellen. Die Textantworten werden für einfache Agentenantworten und die benutzerdefinierten Nutzlasten für Rich-Antworten verwendet. Das benutzerdefinierte Nutzlastformat für alle Antworttypen hat die folgende grundlegende Struktur:
{
"richContent": [
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
],
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
]
]
}
Der Wert richContent lässt ein äußeres und mehrere innere Arrays zu. Antworten in einem inneren Array werden in einer einzigen visuellen Karte zusammengefasst. Wenn das äußere Array mehrere innere Arrays enthält, werden mehrere Karten angezeigt, eine für jedes innere Array.
In den folgenden Abschnitten werden die verschiedenen Antworttypen beschrieben, die Sie für eine benutzerdefinierte Nutzlast konfigurieren können.
Antworttyp "info"
Der Antworttyp „info“ ist eine Titelkarte, auf die Sie tippen oder klicken können.
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 für das Bild. |
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 „Beschreibung“ ist eine informative Karte, die mehrere Textzeilen enthalten kann.
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.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
String | Antworttyp: „image“. |
rawUrl |
String | Öffentliche URL für das Bild. |
accessibilityText |
String | Alt-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 ein kleiner Button mit einem Symbol und einer Textbezeichnung, auf den Sie 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 Schaltfläche. |
icon.type |
String | Symbol aus der Material Design-Symbolbibliothek. Das Standardsymbol ist ein Pfeil. |
icon.color |
String | Hexadezimalcode der Farbe. |
text |
String | Text des Buttons. |
link |
String | URL, der beim Klicken auf den Button zu folgen ist. |
event |
Objekt | Dialogflow CX-Ereignis, das ausgelöst wird, wenn auf den Button 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.
Die Antwort enthält ein Array mit list- und divider-Antworttypen.
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 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 „Akkordeon“ ist eine kleine Karte, die Sie anklicken oder berühren können, um sie zu maximieren und mehr Text anzuzeigen.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
String | Antworttyp: „Akkordeon“. |
title |
String | Titel des Akkordeons. |
subtitle |
String | Untertitel des Akkordeons. |
image |
Objekt | Bild. |
image.src |
Objekt | Bildquelle. |
image.src.rawUrl |
String | Öffentliche URL für das Bild. |
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 „Vorschlags-Chip“ bietet dem Endnutzer eine Liste anklickbarer Vorschlags-Chips.
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 für die Option. |
options[].image |
Objekt | Bild der Option. |
options[].image.src |
Objekt | Bildquelle für die Option. |
options[].image.src.rawUrl |
String | Optionale öffentliche URL für das Bild. |
options[].link |
String | Link-URL für die 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
Sie können die einzelnen Rich-Message-Elemente für Dialogflow CX Messenger verwenden, um eine benutzerdefinierte Karte zu erstellen, die Ihren Anforderungen entspricht.
Hier ein Beispiel mit einigen der oben aufgeführten Elemente:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Dialogflow CX across platforms"
},
{
"type": "info",
"title": "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 Ihren Agenten 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.
- Rufen Sie
http://localhost:port_numberauf, um auf diese Seite zuzugreifen.