É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 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 :Ne s'active que 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 détaillées:

• 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 reflétées dans la requête envoyée. Si la valeur par défaut de l'événement est empêchée, la requête n'est pas envoyée.

Propriétés détaillées:

• 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 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 la valeur par défaut de l'événement est empêché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

Échec d'une requête envoyée au backend.

Propriétés détaillées:

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

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

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

• aucun

df-button-clicked

L'utilisateur a cliqué sur un bouton.

Propriétés détaillées:

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

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

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

Propriétés détaillées:

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

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