Événements JavaScript Dialogflow CX Messenger

Vous pouvez créer des écouteurs d'événements pour différents événements déclenchés par Dialogflow CX Messenger. Pour en savoir plus, consultez É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

Se produit lorsque la boîte de dialogue de l'agent se charge pour la première fois.

Propriétés détaillées :

  • aucun

Exemple :

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

df-chat-open-changed

Se produit lorsque vous ouvrez ou fermez le chat.

Propriétés détaillées :

  • 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

Se produit lorsque vous saisissez du texte dans le chat.

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

Se produit lorsque vous envoyez une requête au backend Dialogflow CX.

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

Se produit lorsqu'une réponse est reçue de la boîte de dialogue de l'agent.

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 textuelle reçue

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

Se produit lorsqu'une requête adressé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

Se produit lorsque la session avec l'agent expire.

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

Se produit lorsque la session se termine.

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

Se produit lorsque les URL des ressources suggérées sont fournies.

Propriétés détaillées :

  • 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

Se produit lorsque vous cliquez sur un accordéon.

Propriétés détaillées :

  • actionLink (string) : attribut "href" de l'ancre de l'accordéon, s'il est spécifié

df-button-clicked

Se produit lorsque vous cliquez sur un bouton.

Propriétés détaillées :

  • actionLink (string) : attribut href du bouton sur lequel l'utilisateur a cliqué, s'il est spécifié
  • event (string) : événement du bouton cliqué, s'il est spécifié
  • languageCode (string) : code de langue de l'événement s'il est spécifié, 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

Se produit lorsque vous cliquez sur un chip.

Propriétés détaillées :

  • actionLink (string) : attribut href de l'ancrage du chip cliqué, s'il est spécifié
  • text (string) : texte du chip sur lequel l'utilisateur a cliqué

df-citation-clicked

Se produit lorsque vous cliquez sur une citation.

Propriétés détaillées :

  • actionLink (string) : attribut href de l'ancre de la citation
  • title (string) : titre de la citation

df-info-card-clicked

Se produit lorsque vous cliquez sur une fiche d'informations.

Propriétés détaillées :

  • actionLink (string) : attribut href de l'ancre de la fiche d'informations
  • title (string) : titre de la fiche d'informations

df-list-element-clicked

Se produit lorsque vous cliquez sur un élément de la liste.

Propriétés détaillées :

  • actionLink (string) : attribut href de l'élément de liste, s'il est spécifié
  • event (string) : événement de l'élément de liste cliqué, s'il est spécifié
  • languageCode (string) : code de langue de l'événement s'il est spécifié, 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

Se produit lorsque vous cliquez sur une image.

Propriétés détaillées :

  • actionLink (string) : attribut "href" de l'ancre de l'image, s'il est spécifié.