É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

La boîte de dialogue de l'agent est chargée 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 la boîte de 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) : événement 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. 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é, 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 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, le cas échéant
  • event (string) : événement 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. 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, le cas échéant