HTML-Anpassungen in Dialogflow Messenger

Es gibt viele HTML-Anpassungen, die Sie auf ein Chat-Dialogfeld anwenden können.

Optionen für HTML-Chat-Elemente

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

  • df-messenger-chat: Agent-Dialogfeld ist immer geöffnet
  • df-messenger-chat-bubble: Agent-Dialogfeld kann mit einer Infofeld-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 Agents geben können.
language-code Erforderlich Standardmäßiger Sprachcode.
project-id Erforderlich Projekt-ID für den Agent.
location Optional Die Region des Agents. Der Standardwert ist global.
intent Optional Ein benutzerdefiniertes Ereignis, das beim Öffnen des Chatdialogfelds ausgelöst 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 Dies ist für die OAuth-Authentifizierung erforderlich. Der Standardwert ist null. Wenn kein Wert angegeben ist und der nicht authentifizierte Zugriff in Dialogflow Messenger aktiviert ist, können nicht authentifizierte Nutzer mit dem Agent interagieren. Wenn der Wert angegeben ist, wird das Agent-Dialogfeld mit „Authentifizierung anfordern“ überlagert. Der Text kann gesteuert werden, siehe request-auth-text-Benachrichtigung, bei der sich der Nutzer anmelden muss, bevor er den Agent verwenden kann.
storage-option Optional Gibt den lokalen Speicher für Unterhaltungsnachrichten an. Verwenden Sie none, wenn Nachrichten nicht gespeichert werden sollen. Mit none 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. Der Wert muss unter 86.400 (1 Tag) liegen und der Standardwert von 1.800 (30 Min.) sein.
url-allowlist Optional Aktiviert 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. 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, das darüber angezeigt wird.
chat-subtitle Optional Der Untertitel des Chatfelds, wie darüber, unter dem chat-title
chat-title-icon Optional Das im Titel des Chatfelds angezeigte Symbol, das standardmäßig links neben 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 Agent schreibt. Hat Vorrang vor bot-writing-text.
request-auth-text Optional Der Schaltflächentext für den Fall, dass eine Authentifizierung erforderlich ist.
placeholder-text Optional Text, der im Eingabefeld angezeigt werden soll, wenn es leer ist. Die Standardeinstellung ist „Frage stellen...“.
bot-actor-image Optional Bildquelle, die für das Schauspielerbild des Agents verwendet werden soll. Wird in jeder Gruppe von Agent-Antworten angezeigt.
user-actor-image Optional Bildquelle, die für das Bild des Schauspielers verwendet werden soll. 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 die gleichen Attribute wie df-messenger-chat sowie 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 das Infofeld. Muss ein öffentlich verfügbarer URI sein.
chat-close-icon Optional Das Symbol „Schließen“ für die Sprechblase. Muss ein öffentlich verfügbarer URI sein.
chat-collapse-icon Optional Das Symbol für die Schaltfläche „Minimieren“ in der Titelleiste. Muss ein öffentlich verfügbarer URI sein.
anchor Optional Legt fest, wo das Chatdialogfeld relativ zum geöffneten oder geschlossenen 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 Verankerungspunkt und die zweite Richtung die Hauptausdehnungsrichtung weg von der Blase. Beispiel: top-left wird über dem Infofeld platziert und erweitert sich nach links und nach oben (weg von der Blase).
chat-width Optional Legt die Breite des Chat-Fensters fest. Numerische Werte (in Pixel). Die Standardeinstellung ist 320 Pixel.
chat-height Optional Definiert die Höhe des Chat-Fensters. Numerische Werte (in Pixel). Die Standardeinstellung ist 480 Pixel.
allow-fullscreen Optional Legt fest, ob das Chatfenster im Vollbildmodus geöffnet werden kann. Ist die Richtlinie auf always gesetzt, wird sie bei allen Bildschirmgrößen im Vollbildmodus geöffnet. Wenn small festgelegt ist, wird bei Bildschirmgrößen unter 500 Pixeln der Vollbildmodus geöffnet. Ansonsten wird ein normales Fenster geöffnet. Falls festgelegt, werden chat-width, chat-height und anchor möglicherweise überschrieben.
minimized Optional Legt fest, ob der Chat anfänglich in minimierter Form geöffnet ist. Verwendet dieselbe Logik wie anchor. Führt die anfängliche intent beim Laden aus, sofern angegeben.