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.
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.
Propiedades de los detalles:
data
(object
): contenedor de datosdata.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.
Propiedades de los detalles:
data
(object
): contenedor de datosdata.messages
(object[]
): lista de mensajes de respuesta analizadosraw
(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 citatitle
(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óntitle
(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.