HTML-Anpassungen für Dialogflow CX Messenger

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

Optionen für das HTML-Chatelement

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

  • df-messenger-chat: Das Dialogfeld des Agenten ist immer geöffnet.
  • df-messenger-chat-bubble: Das Dialogfeld des Agenten kann mit einer Schaltfläche zum Öffnen oder Schließen 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 mit dem Dialogflow CX-Agenten verknüpft ist.
allow-feedback Optional Legen Sie all fest, damit Endnutzer Feedback zu den Antworten des KI-Agenten geben können.
language-code Erforderlich Standardmäßiger Sprachcode.
project-id Erforderlich Projekt-ID für den 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. Wenn der Chat am Anfang geöffnet ist (wie bei df-messenger-chat oder expanded/minimized df-messenger-chat-bubble), wird dieses Ereignis beim Seitenaufbau ausgelöst. Sie können einen Ereignis-Handler verwenden, der für dieses Ereignis aufgerufen wird und die erste Nachricht des KI-Agenten erzeugt.
oauth-client-id Optional Erforderlich für die OAuth-Authentifizierung. Der Standardwert ist Null. Wenn Sie diesen Wert nicht angeben und den nicht authentifizierten Zugriff auf Dialogflow CX Messenger aktivieren, können nicht authentifizierte Nutzer mit dem Agenten interagieren. Wenn Sie diesen Wert angeben, wird im KI-Agenten-Dialogfeld ein Overlay „Authentifizierung anfordern“ angezeigt, in dem Nutzer aufgefordert werden, sich anzumelden, bevor sie den KI-Agenten verwenden können. Sie können den Text mit dem Attribut request-auth-text steuern.
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 kleiner als 86.400 (1 Tag) sein und ist standardmäßig auf 1.800 (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. Der Standardwert ist 256. Zusätzliche Dokumentation.

HTML-Anpassungen für df-messenger-chat

Dialogflow CX Messenger-Seitenleiste

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

Attribut Eingaberichtlinie Wert
chat-title Optional Der Titel des Chatfelds. Wird oben im Chatfenster angezeigt.
chat-subtitle Optional Der Untertitel des Chatfelds. Wird unter dem chat-title angezeigt.
chat-title-icon Optional Das Symbol, das im Titel des Chatfelds angezeigt wird. Wird standardmäßig über dem Chatfenster links neben dem chat-title angezeigt.
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 KI-Agent schreibt. Hat Vorrang vor bot-writing-text.
request-auth-text Optional Der Text der Schaltfläche, falls eine Authentifizierung erforderlich ist.
placeholder-text Optional Text, der im Eingabefeld angezeigt wird, solange es leer ist. Die Standardeinstellung ist „Frage stellen…“.
bot-actor-image Optional Bildquelle, die für das Akteur-Bild des KI-Agenten verwendet werden soll. Wird bei jeder Gruppe von KI-Agentenantworten angezeigt.
user-actor-image Optional Bildquelle, die für das Actor-Bild des Nutzers verwendet werden soll. Wird bei jeder Nutzernachricht angezeigt.

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

Dialogflow CX Messenger-Chat-Bubble

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 anfänglich geöffnet ist. Wenn die Richtlinie nicht konfiguriert ist, wird der letzte Status des Chats gespeichert.
chat-icon Optional Das Symbol für die Chat-Bubble. Muss ein öffentlich verfügbarer URI sein.
chat-close-icon Optional Das Symbol „Schließen“ für die Chat-Bubble. Muss ein öffentlich verfügbarer URI sein.
chat-collapse-icon Optional Das Symbol für den Minimieren-Button in der Titelleiste. Muss ein öffentlich verfügbarer URI sein.
anchor Optional Definiert, wo das Chat-Dialogfeld im Verhältnis zur Sprechblase zum Öffnen oder Schließen platziert wird. Der Wert besteht aus zwei Richtungswörtern (top, bottom, left, right), die durch - getrennt sind. Der Standardwert ist top-left. Die erste Richtung definiert den Verankerungspunkt und die zweite Richtung die Hauptausdehnungsrichtung weg von der Infofläche. Beispiel: top-left wird über der Bubble platziert und nach links und oben (weg von der Bubble) 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 Legt fest, ob das Chatfenster im Vollbildmodus geöffnet werden kann. Wenn die Richtlinie auf always gesetzt ist, wird die App bei allen Bildschirmgrößen im Vollbildmodus geöffnet. Wenn die Option auf small festgelegt ist, wird das Fenster bei Bildschirmgrößen unter 500 Pixel im Vollbildmodus geöffnet, andernfalls als normales Fenster. Kann chat-width, chat-height und anchor überschreiben, wenn festgelegt.
minimized Optional Legt fest, ob der Chat anfangs minimiert geöffnet wird. Verwendet dieselbe Logik wie anchor. Wenn dieses Attribut angegeben ist, hat es Vorrang vor expanded. Dadurch wird auch das erste intent beim Laden ausgelöst.