Eventi JavaScript di Dialogflow Messenger

Dialogflow Messenger attiva una serie di eventi per cui 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 inizialmente.

Proprietà dettaglio:

• nessuno

Ad esempio:

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

df-chat-open-changed

La chat è aperta o chiusa.

Nota: attiva solo se si utilizza df-messenger-chat-bubble.

Proprietà dettaglio:

• 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à dettaglio:

• 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.

Nota: la richiesta può essere manipolata. Le modifiche si riflettono nella richiesta inviata. Se l'impostazione predefinita dell'evento viene bloccata, la richiesta non verrà inviata.

Proprietà dettaglio:

• 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(); // Dialogflow Messenger won't send the request.

  // Send request yourself.
});

df-response-received

È arrivata una risposta nella finestra di dialogo dell'agente.

Nota: i messaggi possono essere manipolati e le modifiche verranno applicate alla gestione delle risposte dell'agente. Se l'impostazione predefinita dell'evento viene impedita, l'agente non gestirà la risposta.

Proprietà dettaglio:

• data (object): contenitore di dati
• data.messages (object[]): elenco di messaggi di risposta analizzati
• raw (object): risposta testata 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(); // 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 richiesta al backend ha esito negativo.

Proprietà dettaglio:

• 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à dettaglio:

• 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à dettaglio:

• 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à dettaglio:

• 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 sull'accordon.

Proprietà dettaglio:

• nessuno

df-button-clicked

L'utente ha fatto clic su un pulsante.

Proprietà dettaglio:

• actionLink (string): anchor href del pulsante su cui è stato fatto clic, se specificato
• event (string): evento del pulsante selezionato, se specificato
• languageCode (string): il 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(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

L'utente ha fatto clic su un chip.

Proprietà dettaglio:

• actionLink (string): anchor href del chip su cui è stato fatto clic, se specificato
• text (string): testo del chip su cui è stato fatto clic

df-citation-clicked

L'utente ha fatto clic su una citazione.

Proprietà dettaglio:

• actionLink (string): href anchor della citazione
• title (string): titolo della citazione

df-info-card-clicked

L'utente ha fatto clic su una scheda informativa.

Proprietà dettaglio:

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

df-list-element-clicked

L'utente ha fatto clic su un elemento dell'elenco.

Proprietà dettaglio:

• actionLink (string): anchor href dell'elemento elenco, se specificato
• event (string): evento dell'elemento dell'elenco su cui è stato fatto clic, se specificato
• languageCode (string): il codice lingua dell'evento, se specificato, altrimenti il codice lingua principale
• title (string): titolo dell'elemento elenco

window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

L'utente ha fatto clic su un'immagine.

Proprietà dettaglio:

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