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-Chatelemente

Das untergeordnete Element des df-messenger-Elements kann Folgendes sein:

  • df-messenger-chat: Der Kundenservicemitarbeiter-Dialog ist immer geöffnet.
  • df-messenger-chat-bubble: Der Dialogfeld-Chat mit einem Kundenservicemitarbeiter 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 dem Dialogflow-Agent zugeordnet ist.
allow-feedback Optional Legen Sie all fest, damit Endnutzer Feedback zu den Antworten des Kundenservicemitarbeiters geben können.
language-code Erforderlich Standardmäßiger Sprachcode.
project-id Erforderlich Projekt-ID für den Kundenservicemitarbeiter.
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 erzeugt.
oauth-client-id Optional Erforderlich für die OAuth-Authentifizierung. 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 im Dialogfeld des Kundenservicemitarbeiters die Meldung „Authentifizierung anfordern“ eingeblendet (Text kann angepasst werden, siehe Benachrichtigung request-auth-text). Der Nutzer muss sich anmelden, bevor er den Kundenservicemitarbeiter 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 wird. Standardmäßig ist sessionStorage festgelegt.
session-ttl Optional Legen Sie eine Dauer in Sekunden fest, um die Sitzung aufrechtzuerhalten. Der Wert muss unter 86.400 (1 Tag) liegen und der Standardwert ist 1.800 (30 Min.).
url-allowlist Optional Aktiviert Bilder, die aus einer durch Kommas getrennten Liste von URL-Präfixen geladen werden. 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. Bei einem negativen Wert ist die Länge unbegrenzt. Die Standardeinstellung ist 256. Zusätzliche Dokumentation

HTML-Anpassungen für df-messenger-chat

Screenshot von Dialogflow Messenger

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, angezeigt darüber, unter dem chat-title
chat-title-icon Optional Das Symbol im Titel des Chatfelds, das standardmäßig über dem Feld links von der chat-title angezeigt wird
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 „Frag etwas...“.
bot-actor-image Optional Bildquelle für das Schauspielerbild des Kundenservicemitarbeiters. Wird für jede Gruppe von Kundenservicemitarbeiterantworten angezeigt.
user-actor-image Optional Bildquelle für das Schauspielerbild des Nutzers. Wird in jeder Nutzermitteilung angezeigt.

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

Screenshot von Dialogflow Messenger

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 zugänglicher URI sein.
chat-close-icon Optional Das Symbol „Schließen“ für die Chatbubble. Muss ein öffentlich zugänglicher URI sein.
chat-collapse-icon Optional Das Symbol für die Schaltfläche „Minimieren“ in der Titelleiste. Muss ein öffentlich zugänglicher URI sein.
anchor Optional Legt fest, wo das Chat-Dialogfeld relativ zum Öffnen- oder Schließen-Infofeld 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 Ankerpunkt und die zweite Richtung die Haupterweiterungsrichtung weg von der Blase. Beispiel: top-left wird über der Blase platziert und wird nach links und oben, weg von der Blase, erweitert.
chat-width Optional Definiert die Breite des Chat-Fensters. Numerische Werte (in Pixel). Die Standardeinstellung ist 320 px.
chat-height Optional Definiert die Höhe des Chat-Fensters. Numerische Werte (in Pixeln). Die Standardeinstellung ist 480 px.
allow-fullscreen Optional Gibt an, ob das Chatfenster im Vollbildmodus geöffnet werden kann. Wenn always festgelegt ist, wird die Seite für alle Bildschirmgrößen im Vollbildmodus geöffnet. Wenn small festgelegt ist, wird bei Bildschirmgrößen unter 500 Pixeln der Vollbildmodus geöffnet. Andernfalls wird das Fenster in einem normalen Fenster geöffnet. Kann chat-width, chat-height und anchor überschreiben, falls festgelegt.
minimized Optional Bestimmt, ob der Chat anfangs minimiert geöffnet wird. Verwendet dieselbe Logik wie anchor. Führt den anfänglichen intent aus, wenn angegeben.