Eventos de JavaScript de Dialogflow CX Messenger

Dialogflow CX Messenger activa una variedad de eventos que puedes crear. 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

Primero, se carga el diálogo del agente.

Propiedades de los detalles:

  • ninguno

Por ejemplo:

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

df-chat-open-changed

El chat está abierto o cerrado.

Propiedades de detalle:

  • isOpen (boolean): nuevo estado del chat

Por ejemplo:

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

df-user-input-entered

El usuario ingresó texto.

Propiedades de detalle:

  • 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

Una solicitud enviada al backend de Dialogflow

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

Llegó una respuesta al diálogo del agente.

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

Se produce un error en una solicitud al backend.

Propiedades de detalle:

  • error (object): Error que se produjo

Por ejemplo:

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

df-session-expired

Venció la sesión con el agente.

Propiedades de detalle:

  • 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

Finalizó 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

URLs de los recursos sugeridos

Propiedades de detalle:

  • 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 hizo clic en el acordeón.

Propiedades de detalle:

  • ninguno

df-button-clicked

El usuario hizo 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

El usuario hizo clic en un chip.

Propiedades de detalle:

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

df-citation-clicked

El usuario hizo clic en una cita.

Propiedades de detalle:

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

df-info-card-clicked

El usuario hizo 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

El usuario hizo clic en un elemento de la lista.

Propiedades de los detalles:

  • actionLink (string): Es el href de anclaje del elemento de lista, si se especifica.
  • event (string): Es el evento del elemento de 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 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 hizo clic en una imagen.

Propiedades de los detalles:

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