Dialogflow CX Messenger JavaScript

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

renderCustomText

Diese Funktion rendert eine einfache Textnachricht, als ob sie vom Agenten als einfache Textantwort gesendet oder vom Endnutzer eingegeben wurde.

Argumente:

  • string: Textnachricht
  • boolean: „true“ für eine Nachricht vom Agenten, „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, als ob sie von der Dialogflow CX-Abwicklung gesendet wurde.

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

Diese Funktion sendet eine Abfrage an die Dialogflow CX API und wartet auf die Antwort. 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

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

Diese Funktion legt Standardwerte für das queryParams Feld der Dialogflow CX API detectIntent Anfrage fest. 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 generative Personalisierungs informationen 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

Diese Funktion löscht den nichtflüchtigen Speicher des Agent-Dialogs. 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

Diese Funktion löscht die Authentifizierung des Agent-Dialogs.

Argumente:

  • Keine

Rückgabe:

  • void

Beispiel:

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

startNewSession

Diese Funktion startet eine neue Sitzung im Agent-Dialog. 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

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

Argumente:

  • Keine

Rückgabe:

  • void

Beispiel

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

closeChat

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

Argumente:

  • Keine

Rückgabe:

  • void

Beispiel

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

openMinChat

Minimierter Chat in Dialogflow CX Messenger

Diese Funktion öffnet das Chatfenster in einer minimierten Version. Rufen Sie sie für das Element df-messenger-chat-bubble auf, um den minimierten Chat zu öffnen. Wenn der Chat bereits minimiert ist, passiert 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, passiert nichts.

Beispiel:

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