Dialogflow CX Messenger activa una variedad de eventos para los que puedes crear
objetos de escucha de eventos
para.
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 se abre o se cierra.
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): Es el valor que ingresó el usuario.
Por ejemplo:
window.addEventListener('df-user-input-entered', (event) => {
console.log(event.detail.input);
});
df-request-sent
Se envió una solicitud al backend de Dialogflow CX.
Propiedades de detalle:
data(object): Es el contenedor de datos.data.requestBody(object): Es la 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 detalle:
data(object): Es el contenedor de datos.data.messages(object[]): Es la lista de mensajes de respuesta analizados.raw(object): Es la 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
Falla una solicitud al backend.
Propiedades de detalle:
error(object): Es el error que ocurrió.
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 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
Son las URLs de los recursos sugeridos.
Propiedades de detalle:
suggestedUrls(string[]): Es la 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): 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): Es el 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): Es el 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 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 lista.
Propiedades de detalle:
actionLink(string): Es el href de anclaje del elemento de lista en el que se hizo clic, 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 detalle:
actionLink(string): Es el href de anclaje de la imagen, si se especifica.