Eventos de JavaScript de Dialogflow CX Messenger

Dialogflow CX Messenger activa varios eventos para los que puedes crear listeners de eventos. Algunos eventos tienen un campo de objeto detail, que proporciona más información sobre el evento.

df-messenger-loaded

Primero se carga el cuadro de diálogo del agente.

Propiedades de detalles:

  • ninguno

Por ejemplo:

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

df-chat-open-changed

El chat se abre o se cierra.

Propiedades de detalles:

  • isOpen (boolean): nuevo estado de la conversación.

Por ejemplo:

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

df-user-input-entered

El usuario ha introducido texto.

Propiedades de detalles:

  • input (string): valor que ha introducido el usuario.

Por ejemplo:

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

df-request-sent

Una solicitud enviada al backend de Dialogflow.

Propiedades de detalles:

  • data (object): contenedor de datos
  • data.requestBody (object): solicitud que se ha enviado

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

Ha llegado una respuesta al cuadro de diálogo del agente.

Propiedades de detalles:

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

Falla una solicitud al backend.

Propiedades de detalles:

  • error (object): error que se ha producido

Por ejemplo:

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

df-session-expired

La sesión con el agente ha caducado.

Propiedades de 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

La sesión ha finalizado.

Propiedades de 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

URLs de los recursos sugeridos.

Propiedades de detalles:

  • suggestedUrls (string[]): 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

El usuario ha hecho clic en el acordeón.

Propiedades de detalles:

  • ninguno

df-button-clicked

El usuario ha hecho clic en un botón.

Propiedades de detalles:

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

  // Handle "event" yourself.
});

df-chip-clicked

El usuario ha hecho clic en un chip.

Propiedades de detalles:

  • actionLink (string): href de anclaje del chip en el que se ha hecho clic, si se ha especificado.
  • text (string): texto del chip en el que se ha hecho clic.

df-citation-clicked

El usuario ha hecho clic en una cita.

Propiedades de detalles:

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

df-info-card-clicked

El usuario ha hecho clic en una tarjeta informativa.

Propiedades de detalles:

  • actionLink (string): href del anchor de la tarjeta de información.
  • title (string): título de la tarjeta informativa.

df-list-element-clicked

El usuario ha hecho clic en un elemento de la lista.

Propiedades de detalles:

  • actionLink (string): href del anclaje del elemento de la lista, si se especifica.
  • event (string): evento del elemento de lista en el que se ha hecho clic, si se ha especificado
  • languageCode (string): código de idioma del evento, si se ha especificado. De lo contrario, se usará el código de idioma principal.
  • title (string): 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

El usuario ha hecho clic en una imagen.

Propiedades de detalles:

  • actionLink (string): atributo href de anclaje de la imagen, si se ha especificado