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 einer Schaltfläche zum Öffnen oder Schließen des Infofelds 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-Agenten zugeordnet ist.
allow-feedback Optional Legen Sie all fest, damit Endnutzer Feedback zu den Antworten des Agenten geben können.
language-code Erforderlich Standardmäßiger Sprachcode.
project-id Erforderlich Die Projekt-ID für den Agenten.
location Optional Die Region des Agenten. Der Standardwert ist global.
intent Optional Ein benutzerdefiniertes Ereignis, das beim Öffnen des Chat-Dialogfelds aufgerufen wird. Sie können einen Ereignishandler verwenden, der für dieses Ereignis aufgerufen wird und die erste Agent-Nachricht erzeugt.
oauth-client-id Optional Für die OAuth-Authentifizierung erforderlich. 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 Agenten interagieren. Wenn der Wert angegeben wird, wird das Agent-Dialogfeld mit einer Benachrichtigung „Authentifizierung anfordern“ überlagert. Der Text kann gesteuert werden. Siehe request-auth-text. Der Nutzer muss sich anmelden, bevor er den Agenten verwenden kann.
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. Standardmäßig wird „sessionStorage“ verwendet.
session-ttl Optional Legen Sie eine Dauer in Sekunden fest, um die Sitzung aufrechtzuerhalten. Sie muss unter 86400 (1 Tag) liegen und ist standardmäßig auf 1800 (30 Minuten) festgelegt.
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. Die Standardeinstellung 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 dem chat-title angezeigt wird.
chat-title-icon Optional Das Symbol, das im Titel des Chatfelds angezeigt wird. Es wird standardmäßig darüber und links vom 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 Schaltflächentext, wenn 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 Agenten 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 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 das Chat-Infofeld. Muss ein öffentlich verfügbarer URI sein.
chat-close-icon Optional Das Schließen-Symbol für das Chat-Infofeld. 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 zum Infofeld 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 vom Infofeld weg. Beispiel: top-left wird über dem Infofeld platziert und erweitert sich nach links und oben (vom Infofeld 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.