Eventos de JavaScript de Dialogflow CX Messenger

Puedes crear objetos de escucha de eventos para una variedad de eventos que activa Dialogflow CX Messenger. Para obtener más información, consulta Objetos de escucha de eventos. Algunos eventos tienen un campo de objeto detail, que proporciona más información sobre el evento.

df-messenger-loaded

Se produce cuando el diálogo del agente se carga por primera vez.

Propiedades de los detalles:

  • ninguno

Por ejemplo:

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

df-chat-open-changed

Se produce cuando abres o cierras el chat.

Propiedades de los detalles:

  • isOpen (boolean): Es el estado nuevo del chat.

Por ejemplo:

window.addEventListener('df-chat-open-changed', (event) => {
  console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});

df-user-input-entered

Se produce cuando ingresas texto en el chat.

Propiedades de los detalles:

  • input (string): Es el valor que ingresó el usuario.

Por ejemplo:

window.addEventListener('df-user-input-entered', (event) => {
  console.log(event.detail.input);
});

df-request-sent

Se produce cuando envías una solicitud al backend de Dialogflow CX.

Propiedades de los detalles:

  • data (object): contenedor de datos
  • data.requestBody (object): Solicitud que se envió

Por ejemplo:

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 produce cuando se recibe una respuesta del diálogo del agente.

Propiedades de los detalles:

  • data (object): contenedor de datos
  • data.messages (object[]): Es una lista de mensajes de respuesta analizados.
  • raw (object): Es la respuesta textual que se recibió.

Por ejemplo:

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 produce cuando falla una solicitud al backend.

Propiedades de los detalles:

  • error (object): Es el error que se produjo.

Por ejemplo:

window.addEventListener('df-messenger-error', (event) => {
  console.log(event.detail.error);
});

df-session-expired

Ocurre cuando vence la sesión con el agente.

Propiedades de los detalles:

  • ninguno

Por ejemplo:

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 produce cuando finaliza la sesión.

Propiedades de los detalles:

  • ninguno

Por ejemplo:

window.addEventListener('df-session-ended', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session ended*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-url-suggested

Ocurre cuando se proporcionan las URLs de los recursos sugeridos.

Propiedades de los detalles:

  • suggestedUrls (string[]): Es una lista de URLs sugeridas.

Por ejemplo:

window.addEventListener('df-url-suggested', (event) => {
  if (event.detail.suggestedUrls.length === 1) {
    window.location.href = event.detail.suggestedUrls[0];
  }
});

df-accordion-clicked

Ocurre cuando haces clic en un acordeón.

Propiedades de los detalles:

  • actionLink (string): Es el atributo href de ancla del acordeón, si se especifica.

df-button-clicked

Se produce cuando haces clic en un botón.

Propiedades de los detalles:

  • actionLink (string): Es el href de anclaje del botón en el que se hizo clic, si se especifica.
  • event (string): Es el evento del botón en el que se hizo clic, si se especifica.
  • languageCode (string): Es el código de idioma del evento si se especifica; de lo contrario, es el código de idioma principal.
  • text (string): Es el texto del botón en el que se hizo clic.
window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

Se produce cuando haces clic en un chip.

Propiedades de los detalles:

  • actionLink (string): Es el href de anclaje del chip en el que se hizo clic, si se especifica.
  • text (string): Es el texto del chip en el que se hizo clic.

df-citation-clicked

Ocurre cuando haces clic en una cita.

Propiedades de los detalles:

  • actionLink (string): Es el href de anclaje de la cita.
  • title (string): Es el título de la cita.

df-info-card-clicked

Se produce cuando haces clic en una tarjeta de información.

Propiedades de los detalles:

  • actionLink (string): Es el href de anclaje de la tarjeta de información.
  • title (string): Es el título de la tarjeta de información.

df-list-element-clicked

Ocurre cuando haces clic en un elemento de la lista.

Propiedades de los detalles:

  • actionLink (string): Es el href de ancla del elemento de lista, si se especifica.
  • event (string): Es el evento del elemento de la lista en el que se hizo clic, si se especifica.
  • languageCode (string): Es el código de idioma del evento si se especifica; de lo contrario, es el código de idioma principal.
  • title (string): Es el título del elemento de la lista.
window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

Ocurre cuando haces clic en una imagen.

Propiedades de los detalles:

  • actionLink (string): Es el atributo href de ancla de la imagen, si se especifica.