Eventi JavaScript di Dialogflow CX Messenger

Puoi creare listener di eventi per una serie di eventi attivati da Dialogflow CX Messenger. Per saperne di più, consulta Listener di eventi. Alcuni eventi hanno un campo oggetto detail, che fornisce ulteriori informazioni sull'evento.

df-messenger-loaded

Si verifica quando 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

Si verifica quando apri o chiudi la chat.

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

Si verifica quando inserisci del testo nella chat.

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

Si verifica quando invii una richiesta al backend di Dialogflow CX.

Proprietà dei dettagli:

  • data (object): container 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

Si verifica quando viene ricevuta una risposta dalla finestra di dialogo dell'agente.

Proprietà dei dettagli:

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

Si verifica quando 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

Si verifica quando la sessione con l'agente scade.

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

Si verifica al termine della sessione.

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

Si verifica quando vengono forniti gli 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

Si verifica quando fai clic su una sezione di un menu a fisarmonica.

Proprietà dei dettagli:

  • actionLink (string): href anchor della fisarmonica, se specificato

df-button-clicked

Si verifica quando fai clic su un pulsante.

Proprietà dei dettagli:

  • actionLink (string): l'anchor href del pulsante selezionato, se specificato
  • event (string): evento del pulsante selezionato, se specificato
  • languageCode (string): codice lingua dell'evento, se specificato, altrimenti il codice lingua principale
  • text (string): 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

Si verifica quando fai clic su un chip.

Proprietà dei dettagli:

  • actionLink (string): l'ancoraggio href del chip selezionato, se specificato
  • text (string): testo del chip selezionato

df-citation-clicked

Si verifica quando fai clic su una citazione.

Proprietà dei dettagli:

  • actionLink (string): l'attributo href dell'ancora della citazione
  • title (string): titolo della citazione

df-info-card-clicked

Si verifica quando fai clic su una scheda informativa.

Proprietà dei dettagli:

  • actionLink (string): anchor href della scheda informativa
  • title (string): titolo della scheda informativa

df-list-element-clicked

Si verifica quando fai clic su un elemento dell'elenco.

Proprietà dei dettagli:

  • actionLink (string): href di ancoraggio dell'elemento dell'elenco, se specificato
  • event (string): evento dell'elemento dell'elenco selezionato, 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

Si verifica quando fai clic su un'immagine.

Proprietà dei dettagli:

  • actionLink (string): href anchor dell'immagine, se specificato