Dialogflow CX Messenger JavaScript

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

renderCustomText

Diese Funktion rendert eine einfache Textnachricht, so als ob sie eine einfache Textantwort vom Agent wäre oder vom Endnutzer eingegeben wurde.

Argumente:

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

Rückgabe:

  • void

Beispiel:

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

renderCustomCard

Diese Funktion rendert eine benutzerdefinierte Karte, so als ob sie aus der Dialogflow CX-Auftragsausführung stammt.

Argumente:

  • payload: Eine Liste von benutzerdefinierten Nutzlastantworten, die im Abschnitt Auftragsausführung definiert sind.

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

Diese Funktion sendet eine Anfrage an die Dialogflow CX API und wartet auf die Antwort. Dadurch wird effektiv eine Endnutzereingabe simuliert, die normalerweise für den Agent-Dialog bereitgestellt wird. Die Antwort wird wie bei einer Anfrage eines Endnutzers behandelt.

Argumente:

  • string: Textanfrage

Rückgabe:

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

Beispiel:

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

sendRequest

Diese Funktion sendet eine Anfrage an die Dialogflow CX API und wartet auf die Antwort.

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 Feld queryParams der detectIntent-Anfrage der Dialogflow CX API 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

Diese Funktion sendet Informationen zur generativen Personalisierung des Endnutzers an Dialogflow CX. Diese Informationen bleiben für den Rest 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 dauerhafte 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 dem 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-Dialogfeld gestartet. Standardmäßig wird der Nachrichtenverlauf gelöscht, der Authentifizierungsstatus des Nutzers bleibt jedoch erhalten. Mit dem optionalen args können Sie dieses Verhalten anpassen.

Argumente:

Name Typ Beschreibung
args object? Optionales Argument zum Konfigurieren der Erstellung neuer Sitzungen.
args.retainHistory boolean? Optionales Flag zum Beibehalten des Verlaufs. Wenn die Option auf „true“ gesetzt 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

Dadurch wird der Chat geöffnet. Rufen Sie sie für das Element df-messenger-chat-bubble auf, um den Chat zu öffnen. Hat keine Auswirkungen, wenn der Chat bereits geöffnet ist.

Argumente:

  • Keine

Rückgabe:

  • void

Beispiel:

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

closeChat

Dadurch wird der Chat geschlossen. Rufen Sie die Funktion für das df-messenger-chat-bubble-Element auf, um den Chat zu schließen. Hat keine Auswirkungen, wenn der Chat bereits geschlossen ist.

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 es für das df-messenger-chat-bubble-Element auf, um den minimierten Chat zu öffnen. Es passiert nichts, wenn der Chat bereits minimiert ist.

Argumente:

Name Typ Beschreibung
args object? Optionales Argument zum Konfigurieren des minimierten Chats
args.anchor string? Optionales anchor, um zu konfigurieren, wo der minimierte Chat geöffnet wird. Dieselbe Logik wie beim Attribut anchor für das Chatblasen-Element. Die Standardeinstellung ist left-top.
args.showActorImages boolean? Optionales Flag zum Anzeigen von Schauspielerbildern (falls im df-messenger-chat-bubble-Element 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 die Funktion für das df-messenger-chat-bubble-Element auf, um den minimierten Chat zu schließen. Hat keine Auswirkungen, wenn der Chat bereits geschlossen ist.

Beispiel:

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