HTML-Anpassungen für Dialogflow CX Messenger

Sie können viele HTML-Anpassungen auf ein Chat-Dialogfeld anwenden.

Optionen für HTML-Chat-Elemente

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

  • df-messenger-chat: Das Agent-Dialogfeld ist immer geöffnet.
  • df-messenger-chat-bubble: Das Agent-Dialogfeld kann mit einem Button zum Öffnen oder Schließen der Bubble 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 Die Agent-ID, die dem Dialogflow CX-Agent zugeordnet ist.
allow-feedback Optional Legen Sie all fest, damit Endnutzer Feedback zu den Antworten des Agent geben können.
language-code Erforderlich Der Standardsprachcode.
project-id Erforderlich Die Projekt-ID für den Agent.
location Optional Die Region des Agent. Der Standardwert ist global.
intent Optional Ein benutzerdefiniertes Ereignis, das ausgelöst 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 erzeugt.
oauth-client-id Optional Erforderlich für die OAuth-Authentifizierung. Der Standardwert ist „null“. Wenn der Wert nicht angegeben wird und der nicht authentifizierte Zugriff auf Dialogflow CX Messenger aktiviert ist, können nicht authentifizierte Nutzer mit dem Agent interagieren. Wenn der Wert angegeben wird, wird das Agent-Dialogfeld mit dem Text „Authentifizierung anfordern“ überlagert. Dieser Text kann angepasst werden. Weitere Informationen finden Sie unter request-auth-text. Der Nutzer muss sich anmelden, bevor er den Agent verwenden kann.
storage-option Optional Gibt den lokalen Speicher für Chatnachrichten 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 86400 (1 Tag) liegen. Der Standardwert ist 1800 (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 Textabfrage. Wenn der Wert negativ ist, ist die Länge unbegrenzt. Der Standardwert ist 256. Weitere Informationen.

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 Der Untertitel des Chatfelds, der darüber und unter chat-title angezeigt wird.
chat-title-icon Optional Das Symbol, das im Titel des Chatfelds angezeigt wird. Es wird standardmäßig links von chat-title angezeigt.
bot-writing-text Optional Der Text, der angezeigt wird, während der Agent schreibt.
bot-writing-image Optional Das Bild, das angezeigt wird, während der Agent schreibt. Hat Vorrang vor bot-writing-text.
request-auth-text Optional Der Button-Text, falls eine Authentifizierung erforderlich ist.
placeholder-text Optional Text, der im Eingabefeld angezeigt wird, wenn es leer ist. Die Standardeinstellung ist „Fragen Sie etwas…“.
bot-actor-image Optional Die Bildquelle, die für das Bild des Agent verwendet werden soll. Wird in jeder Gruppe von Agent-Antworten angezeigt.
user-actor-image Optional Die Bildquelle, die für das Bild des Nutzers verwendet werden soll. Wird in jeder Nutzernachricht angezeigt.

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

Dialogflow CX Messenger-Screenshot

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

Attribut Eingaberichtlinie Wert
expanded Optional Ein boolescher Wert, der bestimmt, ob der Chat anfänglich geöffnet ist. Wenn nicht festgelegt, wird der letzte Status des Chats gespeichert.
chat-icon Optional Das Symbol für die Chat-Bubble. Muss eine öffentlich verfügbare URI sein.
chat-close-icon Optional Das Symbol zum Schließen der Chat-Bubble. Muss eine öffentlich verfügbare URI sein.
chat-collapse-icon Optional Das Symbol für den Minimieren-Button in der Titelleiste. Muss eine öffentlich verfügbare URI sein.
anchor Optional Definiert, wo das Chat-Dialogfeld relativ zur Bubble 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 Hauptrichtung der Erweiterung von der Bubble weg. Beispiel: top-left wird über der Bubble platziert und erweitert sich nach links und oben (von der Bubble weg).
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 Definiert, ob das Chatfenster im Vollbildmodus geöffnet werden kann. Wenn auf always festgelegt, wird es für alle Bildschirmgrößen im Vollbildmodus geöffnet. Wenn auf small festgelegt, wird es für Bildschirmgrößen unter 500 px im Vollbildmodus geöffnet, andernfalls als normales Fenster. Kann chat-width, chat-height und anchor überschreiben, wenn festgelegt.
minimized Optional Bestimmt, ob der Chat anfänglich minimiert geöffnet wird. Verwendet dieselbe Logik wie anchor. Führt beim Laden den anfänglichen intent aus, falls angegeben.