HTML-Anpassungen für Dialogflow CX Messenger

Es gibt viele HTML-Anpassungen, die Sie auf einen Chatdialog 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 Kundenservicemitarbeiter-Dialog 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 Kundenservicemitarbeiternachricht generiert.
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 Kundenservicemitarbeiter 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 oder neu geladen wird. Standardmäßig ist sessionStorage festgelegt.
session-ttl Optional Dauer in Sekunden für die Sitzungsdauer festlegen. Die Dauer darf maximal 86.400 Sekunden (1 Tag) betragen. Standardmäßig ist 1.800 Sekunden (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 einer Textabfrage. Ist der Wert negativ, ist die Länge unbegrenzt. Standardmäßig ist 256 festgelegt. Zusätzliche Dokumentation

HTML-Anpassungen für df-messenger-chat

Dialogflow 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 Untertitelung des Chatfelds, die darüber unter der chat-title angezeigt wird
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 Text der Schaltfläche, falls eine Authentifizierung erforderlich ist.
placeholder-text Optional Text, der im Eingabefeld angezeigt wird, wenn es leer ist. Standardmäßig ist „Stelle eine Frage…“ festgelegt.
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 Nutzernachricht angezeigt.

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

Dialogflow 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 angibt, ob der Chat zu Beginn geöffnet ist. Wenn Sie diese Option nicht festlegen, wird der letzte Status des Chats gespeichert.
chat-icon Optional Das Symbol für die Chatblase. 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 Minimierungsschaltfläche in der Titelleiste. Muss ein öffentlich zugänglicher URI sein.
anchor Optional Hiermit wird festgelegt, wo das Chat-Dialogfeld im Verhältnis zum geöffneten oder geschlossenen Bubbles 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 Hauptausdehnungsrichtung weg von der Blase. Beispiel: top-left wird auf die Blase gelegt und nach links und oben (von der Blase weg) erweitert.
chat-width Optional Definiert die Breite des Chatfensters. Numerische Werte (in Pixeln). Die Standardeinstellung ist 320 px.
chat-height Optional Definiert die Höhe des Chatfensters. 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 das Fenster bei Bildschirmgrößen unter 500 Pixeln im Vollbildmodus geöffnet, andernfalls in einem normalen Fenster. 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.