HTML-Anpassungen für Dialogflow CX Messenger

Es gibt viele HTML-Anpassungen, die Sie auf ein Chat-Dialogfeld anwenden können.

Optionen für HTML-Chat-Elemente

Das untergeordnete Element des df-messenger-Elements kann eines der folgenden sein:

  • df-messenger-chat: Der Agent-Dialog ist immer geöffnet.
  • df-messenger-chat-bubble: Der Agent-Dialog kann mit einer Schaltfläche zum Öffnen oder Schließen der Blase geöffnet oder geschlossen werden.

HTML-Anpassungen für df-messenger

Das HTML-Element df-messenger hat die folgenden Attribute:

Attribut Eingaberichtlinie Wert
agent-id Erforderlich Agent-ID, die dem Dialogflow CX-Agent zugeordnet ist.
allow-feedback Optional Auf all festgelegt, damit Endnutzer Feedback zu den Antworten des Agents geben können.
language-code Erforderlich Standardmäßiger Sprachcode.
project-id Erforderlich Projekt-ID für den KI-Agenten.
location Optional Die Region des Agents. Der Standardwert ist global.
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 Agent-Nachricht generiert.
oauth-client-id Optional Für die OAuth-Authentifizierung erforderlich. Der Standardwert ist „null“. Wenn der Wert nicht angegeben ist und der nicht authentifizierte Zugriff auf Dialogflow CX Messenger aktiviert ist, können nicht authentifizierte Nutzer mit dem Agent interagieren. Wenn der Wert angegeben ist, wird das Agent-Dialogfeld mit der Benachrichtigung request-auth-text überlagert, die den Nutzer auffordert, sich anzumelden, bevor er den Agent verwenden kann. Der Text kann angepasst werden.
storage-option Optional Gibt den lokalen Speicher für Unterhaltungsnachrichten an. Verwenden Sie none, wenn Nachrichten nicht gespeichert werden sollen. Wenn Sie none verwenden, werden alle Nachrichten gelöscht, wenn die Seite aktualisiert oder neu geladen wird. Die Standardeinstellung ist sessionStorage.
session-ttl Optional Legen Sie eine Dauer in Sekunden fest, um die Sitzung aufrechtzuerhalten. Sie muss unter 86.400 (1 Tag) liegen. Der Standardwert ist 1.800 (30 Minuten).
url-allowlist Optional Ermöglicht das Laden von Bildern aus einer durch Kommas getrennten Liste von URL-Präfixen. Bild-URLs, die in HTML- oder Markdown-Antworten verwendet werden, müssen mit einem der aufgeführten Präfixe beginnen. Verwenden Sie *, um alle URLs zuzulassen.
max-query-length Optional Definiert die maximale Länge für eine Textanfrage. Wenn der Wert negativ ist, ist die Länge unbegrenzt. Der Standardwert ist 256. Zusätzliche Dokumentation.

HTML-Anpassungen für df-messenger-chat

Dialogflow CX Messenger-Screenshot

Das HTML-Element df-messenger-chat hat die folgenden Attribute:

Attribut Eingaberichtlinie Wert
chat-title Optional Der Titel des Chatfelds, der darüber angezeigt wird.
chat-subtitle Optional Die Untertitel des Chatfelds, die darüber und unterhalb von chat-title angezeigt werden
chat-title-icon Optional Das Symbol, das im Titel des Chatfelds angezeigt wird (siehe oben), standardmäßig links neben dem chat-title
bot-writing-text Optional Der Text, der angezeigt wird, während der Kundenservicemitarbeiter schreibt
bot-writing-image Optional Das Bild, das angezeigt wird, während der Kundenservicemitarbeiter schreibt. Hat Vorrang vor bot-writing-text.
request-auth-text Optional Der Schaltflächentext, falls eine Authentifizierung erforderlich ist.
placeholder-text Optional Text, der im Eingabefeld angezeigt wird, wenn es leer ist. Die Standardeinstellung ist „Ask something…“ (Fragen Sie etwas…).
bot-actor-image Optional Bildquelle für das Schauspielerbild des Agenten. Wird bei jeder Gruppe von Agent-Antworten angezeigt.
user-actor-image Optional Bildquelle für das Schauspielerbild des Nutzers. Wird in jeder Nutzernachricht angezeigt.

HTML-Anpassungen für df-messenger-chat-bubble

Dialogflow CX Messenger-Screenshot

Das HTML-Element df-messenger-chat-bubble hat dieselben Attribute wie df-messenger-chat und die folgenden zusätzlichen Attribute:

Attribut Eingaberichtlinie Wert
expanded Optional Boolescher Wert, der bestimmt, ob der Chat anfangs geöffnet ist. Wenn nichts anderes festgelegt ist, wird der letzte Status des Chats beibehalten.
chat-icon Optional Das Symbol für die Chat-Bubble. Muss ein öffentlich verfügbarer URI sein.
chat-close-icon Optional Das Schließen-Symbol für die Chatblase. Muss ein öffentlich verfügbarer URI sein.
chat-collapse-icon Optional Das Symbol für die Schaltfläche zum Minimieren in der Titelleiste. Muss ein öffentlich verfügbarer URI sein.
anchor Optional Definiert, wo das Chat-Dialogfeld relativ zur Blase zum Öffnen oder Schließen platziert wird. Der Wert besteht aus zwei Richtungsangaben (top, bottom, left, right), die durch - getrennt sind. Der Standardwert ist top-left. Die erste Richtung definiert den Ankerpunkt und die zweite Richtung die Haupterweiterungsrichtung weg von der Blase. Beispiel: top-left wird über der Sprechblase platziert und nach links und oben (von der Sprechblase weg) erweitert.
chat-width Optional Definiert die Breite des Chatfensters. Numerische Werte (in Pixel). Die Standardeinstellung ist 320 px.
chat-height Optional Definiert die Höhe des Chatfensters. Numerische Werte (in Pixel). Die Standardeinstellung ist 480 px.
allow-fullscreen Optional Gibt an, ob das Chatfenster im Vollbildmodus geöffnet werden kann. Bei Festlegung auf always wird die Anzeige auf allen Bildschirmgrößen im Vollbildmodus geöffnet. Wenn der Wert auf small festgelegt ist, wird das Fenster bei Bildschirmgrößen unter 500 Pixel im Vollbildmodus geöffnet, ansonsten als normales Fenster. Kann chat-width, chat-height und anchor überschreiben, falls festgelegt.
minimized Optional Legt fest, ob der Chat anfangs minimiert geöffnet wird. Verwendet dieselbe Logik wie anchor. Führt das anfängliche intent beim Laden aus, sofern angegeben.