É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 sur l'événement.

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 de la discussion

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

Requête envoyée au backend Dialogflow CX.

Propriétés des détails :

  • data (object) : conteneur de données
  • data.requestBody (object) : demande 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é, le cas échéant
  • event (string) : event du bouton sur lequel l'utilisateur a cliqué, le cas échéant
  • languageCode (string) : code de langue de l'événement, le cas échéant, ou 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é, le cas échéant
  • 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 info.

Propriétés des détails :

  • actionLink (string) : href de l'ancrage de la fiche info
  • title (string) : titre de la fiche info

df-list-element-clicked

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

Propriétés des détails :

  • actionLink (string) : href d'ancrage de l'élément de liste, le cas échéant
  • event (string) : event de l'élément de liste sur lequel l'utilisateur a cliqué, le cas échéant
  • languageCode (string) : code de langue de l'événement, le cas échéant, ou 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) : attribut href de l'ancre de l'image, le cas échéant