Événements JavaScript Dialogflow CX Messenger

Dialogflow CX Messenger déclenche divers événements pour lesquels vous pouvez créer des écouteurs d'événements. Certains événements comportent un champ d'objet detail, qui fournit plus d'informations à leur sujet.

df-messenger-loaded

Le dialogue de l'agent est chargé en premier.

Propriétés des détails :

  • aucun

Exemple :

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

df-chat-open-changed

Le chat est ouvert ou fermé.

Propriétés des détails :

  • isOpen (boolean) : nouvel état du chat

Exemple :

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

df-user-input-entered

L'utilisateur a saisi du texte.

Propriétés des détails :

  • input (string) : valeur saisie par l'utilisateur

Exemple :

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

df-request-sent

Une requête a été envoyée au backend Dialogflow CX.

Propriétés des détails :

  • data (object) : conteneur de données
  • data.requestBody (object) : requête envoyée

Exemple :

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

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

  // Send request yourself.
});

df-response-received

Une réponse est arrivée dans le dialogue de l'agent.

Propriétés des détails :

Exemple :

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(); // 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

Une requête envoyée au backend échoue.

Propriétés des détails :

  • error (object) : erreur survenue

Exemple :

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

df-session-expired

La session avec l'agent a expiré.

Propriétés des détails :

  • aucun

Exemple :

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

df-session-ended

La session est terminée.

Propriétés des détails :

  • aucun

Exemple :

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

df-url-suggested

URL des ressources suggérées.

Propriétés des détails :

  • suggestedUrls (string[]) : liste des URL suggérées

Exemple :

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

df-accordion-clicked

L'utilisateur a cliqué sur l'accordéon.

Propriétés des détails :

  • aucun

df-button-clicked

L'utilisateur a cliqué sur un bouton.

Propriétés des détails :

  • actionLink (string) : href d'ancrage du bouton sur lequel l'utilisateur a cliqué, si spécifié
  • event (string) : événement du bouton sur lequel l'utilisateur a cliqué, si spécifié
  • languageCode (string) : code de langue de l'événement, si spécifié. Sinon, code de langue principal.
  • text (string) : texte du bouton sur lequel l'utilisateur a cliqué
window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

L'utilisateur a cliqué sur un chip.

Propriétés des détails :

  • actionLink (string) : href d'ancrage du chip sur lequel l'utilisateur a cliqué, si spécifié
  • text (string) : texte du chip sur lequel l'utilisateur a cliqué

df-citation-clicked

L'utilisateur a cliqué sur une citation.

Propriétés des détails :

  • actionLink (string) : href d'ancrage de la citation
  • title (string) : titre de la citation

df-info-card-clicked

L'utilisateur a cliqué sur une fiche d'informations.

Propriétés des détails :

  • actionLink (string) : href d'ancrage de la fiche d'informations
  • title (string) : titre de la fiche d'informations

df-list-element-clicked

L'utilisateur a cliqué sur un élément de liste.

Propriétés des détails :

  • actionLink (string) : href d'ancrage de l'élément de liste, si spécifié
  • event (string) : événement de l'élément de liste sur lequel l'utilisateur a cliqué, si spécifié
  • languageCode (string) : code de langue de l'événement, si spécifié. Sinon, code de langue principal.
  • title (string) : titre de l'élément de liste
window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

L'utilisateur a cliqué sur une image.

Propriétés des détails :

  • actionLink (string) : href d'ancrage de l'image, si spécifié