Eventos de JavaScript de Dialogflow Messenger

Dialogflow Messenger activa una variedad de eventos para los 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 se abre o se cierra.

Nota: Solo se activa si se usa df-messenger-chat-bubble.

Propiedades de los detalles:

• 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 los detalles:

• input (string): 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.

Nota: La solicitud se puede manipular. Los cambios se reflejan en la solicitud que se envía. Si se impide la configuración predeterminada del evento, no se enviará la solicitud.

Propiedades de los detalles:

• data (object): contenedor de datos
• data.requestBody (object): Se envió la solicitud

Por ejemplo:

window.addEventListener('df-request-sent', (event) => {
  console.log('Request', event.detail.data.requestBody);
});

window.addEventListener('df-request-sent', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the request.

  // Send request yourself.
});

df-response-received

Llegó una respuesta al diálogo del agente.

Nota: Los mensajes se pueden manipular y los cambios se reflejarán en el control de respuestas del agente. Si se impide el valor predeterminado del evento, el agente no controlará la respuesta.

Propiedades de los detalles:

• data (object): contenedor de datos
• data.messages (object[]): lista de mensajes de respuesta analizados
• raw (object): Respuesta literal 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(); // Dialogflow 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

Una solicitud al backend falla.

Propiedades de los detalles:

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

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 recursos sugeridos.

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

Propiedades de los detalles:

• ninguno

df-button-clicked

El usuario hizo clic en un botón.

Propiedades de los detalles:

• actionLink (string): Indica el atributo 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): Texto del botón en el que se hizo clic

window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

El usuario hizo clic en un chip.

Propiedades de los detalles:

• actionLink (string): Indica el atributo 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 los detalles:

• actionLink (string): 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): el atributo href de anclaje de la tarjeta de información
• title (string): 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): Indica el atributo href de anclaje 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): título del elemento de lista

window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Dialogflow 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): Indica el atributo href de anclaje de la imagen, si se especifica.