Événements JavaScript Dialogflow Messenger

Dialogflow 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 d'abord chargée.

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

Requête envoyée au backend Dialogflow.

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

Une requête au backend échoue.

Propriétés des détails:

  • error (object): erreur qui s'est produite

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 d'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): attribut "href" de l'ancrage du bouton ayant enregistré le clic, s'il est spécifié
  • event (string): événement du bouton sur lequel l'utilisateur a cliqué, s'il est spécifié
  • languageCode (string): code de langue de l'événement s'il est spécifié, sinon le code de langue principal
  • text (string): texte du bouton sur lequel l'utilisateur a cliqué
window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Dialogflow 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): attribut "href" de l'ancre du chip cliqué, s'il est 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): attribut "href" 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): attribut "href" 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): ancrage de l'attribut "href" de l'élément de liste, s'il est spécifié
  • event (string): événement de l'élément de la liste ayant enregistré le clic, s'il est spécifié.
  • languageCode (string): code de langue de l'événement s'il est spécifié, sinon le code de langue principal
  • title (string): titre de l'élément de liste.
window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Dialogflow 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): ancrage de l'attribut "href" de l'image, s'il est spécifié