Dialogflow Messenger JavaScript-Ereignisse

Dialogflow Messenger löst eine Vielzahl von Ereignissen aus, für die Sie Ereignis-Listener erstellen können. Einige Ereignisse haben ein detail-Objektfeld, das weitere Informationen zum Ereignis enthält.

df-messenger-loaded

Das Agent-Dialogfeld wird zuerst geladen.

Detaileigenschaften:

• keine

Beispiel:

window.addEventListener('df-messenger-loaded', () => {
  // Messenger is now ready.
});

df-chat-open-changed

Der Chat wird geöffnet oder geschlossen.

Hinweis :Nur aktiv, wenn df-messenger-chat-bubble verwendet wird.

Detaileigenschaften:

• isOpen (boolean): Neuer Status des Chats

Beispiel:

window.addEventListener('df-chat-open-changed', (event) => {
  console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});

df-user-input-entered

Der vom Nutzer eingegebene Text.

Detaileigenschaften:

• input (string): Vom Nutzer eingegebener Wert

Beispiel:

window.addEventListener('df-user-input-entered', (event) => {
  console.log(event.detail.input);
});

df-request-sent

Eine an das Dialogflow-Back-End gesendete Anfrage.

Hinweis: Die Anfrage kann bearbeitet werden. Die Änderungen sind in der gesendeten Anfrage enthalten. Wenn die Standardeinstellung des Ereignisses verhindert wird, wird die Anfrage nicht gesendet.

Detaileigenschaften:

• data (object): Datencontainer
• data.requestBody (object): Gesendete Anfrage

Beispiel:

window.addEventListener('df-request-sent', (event) => {
  console.log('Request', event.detail.data.requestBody);
});

window.addEventListener('df-request-sent', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the request.

  // Send request yourself.
});

df-response-received

Im Agent-Dialogfeld ist eine Antwort eingegangen.

Hinweis: Nachrichten können bearbeitet werden. Die Änderungen werden im Antwortvorgang des Agents berücksichtigt. Wenn der Standardwert des Ereignisses verhindert wird, verarbeitet der Agent die Antwort nicht.

Detaileigenschaften:

• data (object): Datencontainer
• data.messages (object[]): Liste der geparsten Antwortnachrichten
• raw (object): wörtliche Antwort, die erhalten wurde

Beispiel:

window.addEventListener('df-response-received', (event) => {
  // Remove all non-text messages.
  event.detail.data.messages = event.detail.data.messages.filter(message => {
    return message.type === 'text';
  });
});

window.addEventListener('df-response-received', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't handle the response.

  const messenger = document.querySelector('df-messenger');
  event.detail.data.messages.forEach(message => {
    if (message.type === 'text') {
      messenger.renderCustomText(message.text);
    }
  });
});

df-messenger-error

Eine Anfrage an das Back-End schlägt fehl.

Detaileigenschaften:

• error (object): aufgetretener Fehler

Beispiel:

window.addEventListener('df-messenger-error', (event) => {
  console.log(event.detail.error);
});

df-session-expired

Die Sitzung mit dem Agent ist abgelaufen.

Detaileigenschaften:

• keine

Beispiel:

window.addEventListener('df-session-expired', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session expired*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-session-ended

Die Sitzung ist beendet.

Detaileigenschaften:

• keine

Beispiel:

window.addEventListener('df-session-ended', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session ended*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-url-suggested

URLs der vorgeschlagenen Ressourcen.

Detaileigenschaften:

• suggestedUrls (string[]): Liste der vorgeschlagenen URLs

Beispiel:

window.addEventListener('df-url-suggested', (event) => {
  if (event.detail.suggestedUrls.length === 1) {
    window.location.href = event.detail.suggestedUrls[0];
  }
});

df-accordion-clicked

Der Nutzer hat auf das Akkordeon geklickt.

Detaileigenschaften:

• keine

df-button-clicked

Der Nutzer hat auf eine Schaltfläche geklickt.

Detaileigenschaften:

• actionLink (string): Anchor-href der angeklickten Schaltfläche, falls angegeben
• event (string): Ereignis der angeklickten Schaltfläche, falls angegeben
• languageCode (string): Sprachcode des Ereignisses, falls angegeben, andernfalls der Hauptsprachcode
• text (string): Text der angeklickten Schaltfläche

window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

Der Nutzer hat auf einen Chip geklickt.

Detaileigenschaften:

• actionLink (string): Anchor-href des angeklickten Chips, falls angegeben
• text (string): Text des angeklickten Chips

df-citation-clicked

Der Nutzer hat auf ein Zitat geklickt.

Detaileigenschaften:

• actionLink (string): Anchor-href der Zitation
• title (string): Titel der Zitation

df-info-card-clicked

Der Nutzer hat eine Infokarte angeklickt.

Detaileigenschaften:

• actionLink (string): Anchor-href der Infokarte
• title (string): Titel der Infokarte

df-list-element-clicked

Der Nutzer hat auf ein Listenelement geklickt.

Detaileigenschaften:

• actionLink (string): Anchor-href des Listenelements, falls angegeben
• event (string): Ereignis des angeklickten Listenelements, falls angegeben
• languageCode (string): Sprachcode des Ereignisses, falls angegeben, andernfalls der Hauptsprachcode
• title (string): Titel des Listenelements

window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

Der Nutzer hat auf ein Bild geklickt.

Detaileigenschaften:

• actionLink (string): Anchor-href des Bilds, falls angegeben