Dialogflow CX Messenger JavaScript

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

renderCustomText

Diese Funktion rendert eine Textnachricht, als ob sie vom Agenten stammt oder vom Nutzer eingegeben wurde.

Argumente:

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

Liefert:

  • 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-Ausführung stammen würde.

Argumente:

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

Liefert:

  • 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. Damit wird eine Endnutzereingabe simuliert, die normalerweise im Agent-Dialog bereitgestellt wird. Das System verarbeitet die Antwort wie jede andere Endnutzeranfrage.

Argumente:

  • string: Textabfrage

Liefert:

  • 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 vorherige) und event (siehe Benutzerdefiniertes Ereignis)
  • any: Nutzlast, die dem Anfragetyp entspricht. Dies ist ein String für beide unterstützten Anfragetypen.

Liefert:

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

Liefert:

  • 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 vom Endnutzer an Dialogflow CX. Diese Informationen bleiben für den Rest der Sitzung erhalten.

Argumente:

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

Liefert:

  • 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 nichtflüchtige Speicher des Agenten-Dialogs gelöscht. Außerdem wird der aktuelle Status des KI-Agenten-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.

Liefert:

  • void

Beispiel:

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

clearAuthentication

Diese Funktion löscht die Authentifizierung des Agenten-Dialogfelds.

Argumente:

  • Keine

Liefert:

  • 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 bleibt jedoch erhalten. Sie können dieses Verhalten mit dem optionalen Parameter args 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.

Liefert:

  • void

Beispiel:

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

openChat

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

Argumente:

  • Keine

Liefert:

  • 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 df-messenger-chat-bubble-Element auf, um den Chat zu schließen. Wenn der Chat bereits geschlossen ist, passiert nichts.

Argumente:

  • Keine

Liefert:

  • void

Beispiel:

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

openMinChat

Dialogflow CX Messenger – minimierter Chat

Sie können das Chatfenster in einer minimierten Version öffnen, indem Sie diese Funktion für das df-messenger-chat-bubble-Element aufrufen. Diese Funktion hat keine Auswirkungen, wenn der Chat bereits minimiert ist.

Argumente:

Name Typ Beschreibung
args object? Optionales Argument zum Konfigurieren des minimierten Chats.
args.anchor string? Optionaler anchor, um zu konfigurieren, wo der minimierte Chat geöffnet wird. Gleiche Logik wie beim Attribut anchor für das Chat-Bubble-Element. Die Standardeinstellung ist left-top.
args.showActorImages boolean? Optionales Flag zum Anzeigen von Bildern der Schauspieler (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

Rufen Sie diese Funktion für das df-messenger-chat-bubble-Element 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();