Dialogflow CX Messenger JavaScript

Dialogflow CX Messenger provides Funktionen die Sie aufrufen können, um das Verhalten zu beeinflussen.

renderCustomText

Mit dieser Funktion wird eine einfache Textnachricht so gerendert, als wäre sie vom Agent als einfache Textantwort gesendet oder vom Endnutzer eingegeben worden.

Argumente:

  • string: Textnachricht
  • boolean: „true“ für eine Nachricht vom Agent, „false“ für eine Nachricht vom Endnutzer

Rückgabe:

  • void

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

Mit dieser Funktion wird eine benutzerdefinierte Karte so gerendert, als wäre sie von der Dialogflow CX-Abwicklung gesendet worden.

Argumente:

Rückgabe:

  • void

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

Mit dieser Funktion wird eine Abfrage an die Dialogflow CX API gesendet und auf die Antwort gewartet. Dadurch wird eine Endnutzereingabe simuliert, die normalerweise an den Agent-Dialog gesendet wird. Die Antwort wird wie bei jeder anderen Abfrage eines Endnutzers verarbeitet.

Argumente:

  • string: Textabfrage

Rückgabe:

  • Promise<void>: Rückgabewert für den asynchronen Vorgang

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

Mit dieser Funktion wird eine Anfrage an die Dialogflow CX API gesendet und auf die Antwort gewartet.

Argumente:

  • string: Anfragetyp, unterstützt query (siehe auch sendQuery oben) und event (siehe benutzerdefiniertes Ereignis)
  • any: Nutzlast, die dem Anfragetyp entspricht. Derzeit ist dies für beide unterstützten Anfragetypen ein String.

Rückgabe:

  • Promise<void>: Rückgabewert für den asynchronen Vorgang

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

Mit dieser Funktion werden Standardwerte für das queryParams Feld der Dialogflow CX API detectIntent Anfrage festgelegt. Andere Dialogflow CX Messenger-Methoden können die entsprechenden Standardwerte in den Abfrageparametern ersetzen.

Argumente:

  • object: JSON-Daten. Das Schema der Abfrageparameter finden Sie unter QueryParameters.

Rückgabe:

  • void

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

Mit dieser Funktion werden Informationen zur generativen Personalisierung für den Endnutzer an Dialogflow CX gesendet. Diese Informationen bleiben für die Dauer der Sitzung erhalten.

Argumente:

  • object: JSON-Daten, siehe Dokumentation zur generativen Personalisierung

Rückgabe:

  • void

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

Mit dieser Funktion wird der persistente Speicher des Agent-Dialogs gelöscht. Außerdem wird der aktuelle Status des Agent-Dialogs gelöscht. Standardmäßig wird der Authentifizierungsstatus des Nutzers beibehalten. Mit den optionalen args können Sie dieses Verhalten anpassen.

Argumente:

Name Typ Beschreibung
args object? Optionales Argument zum Konfigurieren des Vorgangs zum Löschen des Speichers.
args.clearAuthentication boolean? Optionales Flag zum Löschen des Authentifizierungsstatus. Wenn „true“ festgelegt ist, wird der Authentifizierungsstatus gelöscht, andernfalls wird er beibehalten.

Rückgabe:

  • void

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

Mit dieser Funktion wird die Authentifizierung des Agent-Dialogs gelöscht.

Argumente:

  • Keine

Rückgabe:

  • void

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

Mit dieser Funktion wird eine neue Sitzung im Agent-Dialog gestartet. Standardmäßig wird der Nachrichtenverlauf gelöscht, der Authentifizierungsstatus des Nutzers jedoch beibehalten. Mit den optionalen args können Sie dieses Verhalten anpassen.

Argumente:

Name Typ Beschreibung
args object? Optionales Argument zum Konfigurieren der Erstellung einer neuen Sitzung.
args.retainHistory boolean? Optionales Flag zum Beibehalten des Verlaufs. Wenn „true“ festgelegt ist, wird der Verlauf beibehalten, andernfalls wird er gelöscht.
args.clearAuthentication boolean? Optionales Flag zum Löschen des Authentifizierungsstatus. Wenn „true“ festgelegt ist, wird der Authentifizierungsstatus gelöscht, andernfalls wird er beibehalten.

Rückgabe:

  • void

Beispiel:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

Mit dieser Funktion wird der Chat geöffnet. Rufen Sie sie für das Element df-messenger-chat-bubble auf, um den Chat zu öffnen. Wenn der Chat bereits geöffnet ist, geschieht nichts.

Argumente:

  • Keine

Rückgabe:

  • void

Beispiel:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

Mit dieser Funktion wird der Chat geschlossen. Rufen Sie sie für das Element df-messenger-chat-bubble auf, um den Chat zu schließen. Wenn der Chat bereits geschlossen ist, geschieht nichts.

Argumente:

  • Keine

Rückgabe:

  • void

Beispiel:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Minimierter Chat in Dialogflow CX Messenger

Mit dieser Funktion wird das Chatfenster in einer minimierten Version geöffnet. Rufen Sie sie für das Element df-messenger-chat-bubble auf, um den minimierten Chat zu öffnen. Wenn der Chat bereits minimiert ist, geschieht nichts.

Argumente:

Name Typ Beschreibung
args object? Optionales Argument zum Konfigurieren des minimierten Chats.
args.anchor string? Optionaler anchor zum Konfigurieren der Position, an der der minimierte Chat geöffnet wird. Gleiche Logik wie beim Attribut anchor des Chatblasen-Elements. Die Standardeinstellung ist left-top.
args.showActorImages boolean? Optionales Flag zum Anzeigen von Akteur-Bildern (falls für das Element df-messenger-chat-bubble angegeben). Die Standardeinstellung ist „false“.

Beispiel:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

Schließt den minimierten Chat. Rufen Sie sie für das Element df-messenger-chat-bubble auf, um den minimierten Chat zu schließen. Wenn der Chat bereits geschlossen ist, geschieht nichts.

Beispiel:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();