Événements JavaScript de 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 d'abord chargée.

Propriétés détaillées :

• aucun

Exemple :

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

df-chat-open-changed

Le chat est ouvert ou fermé.

Remarque :Actif uniquement si df-messenger-chat-bubble est utilisé.

Propriétés détaillées :

• 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.

Remarque : La requête peut être manipulée. Les modifications sont répercutées dans la demande en cours d'envoi. Si l'option par défaut de l'événement est bloquée, la demande ne sera pas envoyée.

Propriétés détaillées :

• 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 parvenue à la boîte de dialogue de l'agent.

Remarque : Les messages peuvent être manipulés. Les modifications seront répercutées dans la gestion des réponses de l'agent. Si l'option par défaut de l'événement est bloquée, l'agent ne gère pas la réponse.

Propriétés détaillées :

• data (object) : conteneur de données
• data.messages (object[]): liste des messages de réponse analysés
• raw (object) : réponse reçue verbatim

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 détaillées :

• 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 détaillées :

• 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 clique sur l'accordéon.

Propriétés des détails:

• aucun

df-button-clicked

L'utilisateur a cliqué sur un bouton.

Propriétés détaillées :

• actionLink (string): ancrage href du bouton sur lequel l'utilisateur a cliqué, si spécifié
• event (string): événement associé au bouton sur lequel l'utilisateur a cliqué, si spécifié
• languageCode (string): code de langue de l'événement, s'il est spécifié, ou code de langue principale
• 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): tag d'ancrage 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 détaillées :

• 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 la liste.

Propriétés des détails:

• actionLink (string): ancrage href 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é, 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 détaillées :

• actionLink (string) : href d'ancrage de l'image, le cas échéant