Dialogflow CX Messenger attiva una serie di eventi che puoi creare
Listener di eventi
.
Alcuni eventi hanno un campo oggetto detail
,
che fornisce ulteriori informazioni sull'evento.
df-messenger-loaded
La finestra di dialogo dell'agente viene caricata per la prima volta.
Proprietà dei dettagli:
- nessuno
Ad esempio:
window.addEventListener('df-messenger-loaded', () => {
// Messenger is now ready.
});
df-chat-open-changed
La chat è aperta o chiusa.
Proprietà dei dettagli:
isOpen
(boolean
): nuovo stato della chat
Ad esempio:
window.addEventListener('df-chat-open-changed', (event) => {
console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});
df-user-input-entered
L'utente ha inserito il testo.
Proprietà dei dettagli:
input
(string
): valore inserito dall'utente
Ad esempio:
window.addEventListener('df-user-input-entered', (event) => {
console.log(event.detail.input);
});
df-request-sent
Richiesta inviata al backend Dialogflow.
Proprietà dei dettagli:
data
(object
): contenitore di datidata.requestBody
(object
): richiesta inviata
Ad esempio:
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
È arrivata una risposta alla finestra di dialogo dell'agente.
Proprietà dei dettagli:
data
(object
): contenitore di datidata.messages
(object[]
): elenco di messaggi di risposta analizzatiraw
(object
): risposta letterale ricevuta
Ad esempio:
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
Una richiesta al backend non va a buon fine.
Proprietà dei dettagli:
error
(object
): errore che si è verificato
Ad esempio:
window.addEventListener('df-messenger-error', (event) => {
console.log(event.detail.error);
});
df-session-expired
La sessione con l'agente è scaduta.
Proprietà dei dettagli:
- nessuno
Ad esempio:
window.addEventListener('df-session-expired', () => {
const messenger = document.querySelector('df-messenger');
messenger.renderCustomText(`*Session expired*`, /* isBot= */ true);
messenger.startNewSession({ retainHistory: true });
});
df-session-ended
La sessione è terminata.
Proprietà dei dettagli:
- nessuno
Ad esempio:
window.addEventListener('df-session-ended', () => {
const messenger = document.querySelector('df-messenger');
messenger.renderCustomText(`*Session ended*`, /* isBot= */ true);
messenger.startNewSession({ retainHistory: true });
});
df-url-suggested
URL delle risorse suggerite.
Proprietà dei dettagli:
suggestedUrls
(string[]
): elenco di URL suggeriti
Ad esempio:
window.addEventListener('df-url-suggested', (event) => {
if (event.detail.suggestedUrls.length === 1) {
window.location.href = event.detail.suggestedUrls[0];
}
});
df-accordion-clicked
L'utente ha fatto clic sulla sezione a scomparsa.
Proprietà dei dettagli:
- nessuno
df-button-clicked
L'utente ha fatto clic su un pulsante.
Proprietà dei dettagli:
actionLink
(string
): href dell'ancora del pulsante su cui è stato fatto clic, se specificatoevent
(string
): evento del pulsante su cui è stato fatto clic, se specificatolanguageCode
(string
): codice della lingua dell'evento, se specificato, altrimenti il codice della lingua principaletext
(string
): il testo del pulsante su cui è stato fatto clic
window.addEventListener('df-button-clicked', (event) => {
event.preventDefault(); // Messenger won't send the "event" request.
// Handle "event" yourself.
});
df-chip-clicked
L'utente ha fatto clic su un chip.
Proprietà dei dettagli:
actionLink
(string
): href anchor del chip su cui è stato fatto clic, se specificatotext
(string
): testo del chip su cui è stato fatto clic
df-citation-clicked
L'utente ha fatto clic su una citazione.
Proprietà dei dettagli:
actionLink
(string
): href anchor della citazionetitle
(string
): titolo della citazione
df-info-card-clicked
L'utente ha fatto clic su una scheda informativa.
Proprietà dei dettagli:
actionLink
(string
): href dell'ancora della scheda informativatitle
(string
): titolo della scheda informativa
df-list-element-clicked
L'utente ha fatto clic su un elemento dell'elenco.
Proprietà dei dettagli:
actionLink
(string
): href anchor dell'elemento elenco, se specificatoevent
(string
): evento dell'elemento dell'elenco su cui è stato fatto clic, se specificatolanguageCode
(string
): codice della lingua dell'evento, se specificato, altrimenti il codice della lingua principaletitle
(string
): titolo dell'elemento dell'elenco
window.addEventListener('df-list-element-clicked', (event) => {
event.preventDefault(); // Messenger won't send the "event" request.
// Handle "event" yourself.
});
df-image-clicked
L'utente ha fatto clic su un'immagine.
Proprietà dei dettagli:
actionLink
(string
): href anchor dell'immagine, se specificato