Eventos de JavaScript de Dialogflow CX Messenger

Dialogflow CX 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 detalle:

• ninguno

Por ejemplo:

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

df-chat-open-changed

El chat está abierto o cerrado.

Nota: Solo está activo si se usa df-messenger-chat-bubble.

Propiedades de detalle:

• isOpen (boolean): Es el 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): Valor que ingresó el usuario

Por ejemplo:

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

df-request-sent

Es una solicitud que se envía al backend de Dialogflow CX.

Nota: La solicitud se puede manipular. Los cambios se reflejan en la solicitud que se envía. Si se evita el comportamiento predeterminado del evento, no se enviará la solicitud.

Propiedades de detalle:

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

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

Propiedades de detalle:

• data (object): Contenedor de datos
• data.messages (object[]): Lista de mensajes de respuesta analizados
• raw (object): 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 un error en una solicitud al backend.

Propiedades de detalle:

• error (object): Error que ocurrió

Por ejemplo:

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

df-session-expired

La sesión con el agente venció.

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 detalle:

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

• actionLink (string): href del ancla del botón en el que se hizo clic, si se especificó
• event (string): Evento del botón en el que se hizo clic, si se especificó
• languageCode (string): 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(); // 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 especificó.
• text (string): Texto de la chip en la que se hizo clic

df-citation-clicked

El usuario hizo clic en una cita.

Propiedades de detalle:

• actionLink (string): href del ancla 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 detalle:

• actionLink (string): Es el href del ancla 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 detalle:

• actionLink (string): href del ancla del elemento de la lista, si se especifica
• event (string): event del elemento de lista en el que se hizo clic, si se especificó
• languageCode (string): 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 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 hizo clic en una imagen.

Propiedades de detalle:

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