Eventi JavaScript di Dialogflow CX Messenger

Dialogflow CX Messenger attiva una serie di eventi per i quali puoi creare event listener. Alcuni eventi hanno un campo dell'oggetto detail, che fornisce ulteriori informazioni sull'evento.

df-messenger-loaded

Viene caricata prima la finestra di dialogo dell'agente.

Proprietà dei dettagli:

• nessuno

Ad esempio:

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

df-chat-open-changed

La chat è aperta o chiusa.

Nota: attivo solo se viene utilizzato df-messenger-chat-bubble.

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

Una richiesta inviata al backend di Dialogflow.

Nota: la richiesta può essere manipolata. Le modifiche vengono applicate alla richiesta inviata. Se il valore predefinito dell'evento viene impedito, la richiesta non verrà inviata.

Proprietà dei dettagli:

• data (object): contenitore di dati
• data.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.

Nota: i messaggi possono essere manipolati e le modifiche verranno applicate alla gestione della risposta dell'agente. Se il valore predefinito dell'evento viene impedito, l'agente non gestirà la risposta.

Proprietà dei dettagli:

• data (object): contenitore di dati
• data.messages (object[]): elenco di messaggi di risposta analizzati
• raw (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 specificato
• event (string): evento del pulsante su cui è stato fatto clic, se specificato
• languageCode (string): codice lingua dell'evento, se specificato, altrimenti il codice lingua principale
• text (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 dell'ancora del chip su cui è stato fatto clic, se specificato
• text (string): il 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 dell'ancora della citazione
• title (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 informativa
• title (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 dell'elemento di ancoraggio dell'elenco, se specificato
• event (string): evento dell'elemento dell'elenco su cui è stato fatto clic, se specificato
• languageCode (string): codice lingua dell'evento, se specificato, altrimenti il codice lingua principale
• title (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