Dialogflow CX Messenger JavaScript

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

renderCustomText

Diese Funktion gibt eine einfache Textnachricht wieder, so als ob sie eine einfache Textantwort des Kundenservicemitarbeiters 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-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 API und wartet auf die Antwort. Dadurch wird effektiv ein Endnutzereintrag simuliert, der normalerweise für den Kundenservicemitarbeiter vorgesehen ist. Die Antwort wird wie die Anfrage eines Endnutzers behandelt.

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 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 API festgelegt. Andere Dialogflow CX Messenger-Methoden können die entsprechenden Standardwerte in den Abfrageparametern ersetzen.

Argumente:

  • object: JSON-Daten. Schema für 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 des Endnutzers an Dialogflow gesendet. 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 Kundenservicemitarbeiter-Dialogfelds geleert. Außerdem wird der aktuelle Status des Dialogfelds für den Kundenservicemitarbeiter gelöscht.

Argumente:

  • keine

Rückgabe:

  • void

Beispiel:

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

clearAuthentication

Mit dieser Funktion wird die Authentifizierung des Dialogfelds für Kundenservicemitarbeiter aufgehoben.

Argumente:

  • keine

Rückgabe:

  • void

Beispiel:

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

startNewSession

Mit dieser Funktion wird eine neue Sitzung im Dialogfeld des Kundenservicemitarbeiters gestartet. Sie können den aktuellen Nachrichtenverlauf entweder beibehalten oder zurücksetzen. Die Nutzerauthentifizierung wird dadurch nicht gelöscht.

Argumente:

Name Typ Beschreibung
args object? Optionales Argument zum Konfigurieren der Erstellung einer neuen Sitzung.
args.retainHistory boolean? Optionales Flag, um den Verlauf beizubehalten. Wenn dieser Parameter auf „wahr“ gesetzt ist, wird der Verlauf beibehalten. Andernfalls wird er gelöscht.

Rückgabe:

  • void

Beispiel:

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

openChat

Dadurch wird der Chat geöffnet. Rufen Sie die Funktion über 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

Dadurch wird der Chat geschlossen. Rufen Sie die Funktion auf dem 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

Mit dieser Funktion wird das Chatfenster in einer minimierten Version geöffnet. Rufen Sie die Funktion auf dem Element df-messenger-chat-bubble auf, um den minimierten Chat zu öffnen. Passiert nichts, wenn der Chat bereits minimiert ist.

Argumente:

Name Typ Beschreibung
args Objekt? Optionales Argument zum Konfigurieren des minimierten Chats
args.anchor string? Optional: anchor, um zu konfigurieren, wo der minimierte Chat geöffnet wird. Entspricht der Logik des Attributs anchor für das Chatfeld-Element. Die Standardeinstellung ist left-top.
args.showActorImages boolescher Wert? Optionales Flag, um Bilder der Schauspieler anzuzeigen (falls im 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

Der minimierte Chat wird geschlossen. Rufen Sie die Funktion 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();