Peristiwa JavaScript Dialogflow Messenger

Dialogflow Messenger memicu berbagai peristiwa yang dapat Anda gunakan untuk membuat pemroses peristiwa. Beberapa peristiwa memiliki kolom objek detail, yang memberikan informasi selengkapnya tentang peristiwa tersebut.

df-messenger-loaded

Dialog agen akan dimuat terlebih dahulu.

Properti detail:

  • tidak ada

Contoh:

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

df-chat-open-changed

Chat akan dibuka atau ditutup.

Properti detail:

  • isOpen (boolean): status baru chat

Contoh:

window.addEventListener('df-chat-open-changed', (event) => {
  console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});

df-user-input-entered

Pengguna memasukkan teks.

Properti detail:

  • input (string): nilai yang dimasukkan pengguna

Contoh:

window.addEventListener('df-user-input-entered', (event) => {
  console.log(event.detail.input);
});

df-request-sent

Permintaan yang dikirim ke backend Dialogflow.

Properti detail:

  • data (object): penampung data
  • data.requestBody (object): permintaan yang dikirim

Contoh:

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

Respons telah masuk ke dialog agen.

Properti detail:

  • data (object): penampung data
  • data.messages (object[]): daftar pesan respons yang diurai
  • raw (object): respons kata demi kata yang diterima

Contoh:

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

Permintaan ke backend gagal.

Properti detail:

  • error (object): error yang terjadi

Contoh:

window.addEventListener('df-messenger-error', (event) => {
  console.log(event.detail.error);
});

df-session-expired

Sesi dengan agen telah berakhir.

Properti detail:

  • tidak ada

Contoh:

window.addEventListener('df-session-expired', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session expired*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-session-ended

Sesi telah berakhir.

Properti detail:

  • tidak ada

Contoh:

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 referensi yang disarankan.

Properti detail:

  • suggestedUrls (string[]): daftar URL yang disarankan

Contoh:

window.addEventListener('df-url-suggested', (event) => {
  if (event.detail.suggestedUrls.length === 1) {
    window.location.href = event.detail.suggestedUrls[0];
  }
});

df-accordion-clicked

Pengguna mengklik akordeon.

Properti detail:

  • tidak ada

df-button-clicked

Pengguna mengklik tombol.

Properti detail:

  • actionLink (string): href anchor dari tombol yang diklik, jika ditentukan
  • event (object): peristiwa tombol yang diklik, jika ditentukan

df-chip-clicked

Pengguna mengklik chip.

Properti detail:

  • actionLink (string): href anchor dari chip yang diklik, jika ditentukan
  • text (string): teks chip yang diklik

df-citation-clicked

Pengguna mengklik kutipan.

Properti detail:

  • actionLink (string): anchor href kutipan

df-info-card-clicked

Pengguna mengklik kartu info.

Properti detail:

  • actionLink (string): anchor href kartu info

df-list-element-clicked

Pengguna mengklik elemen daftar.

Properti detail:

  • actionLink (string): href anchor elemen daftar, jika ditentukan
  • event (object): peristiwa elemen daftar yang diklik, jika ditentukan
  • languageCode (string): kode bahasa elemen daftar, jika ditentukan

df-image-clicked

Pengguna mengklik gambar.

Properti detail:

  • actionLink (string): href anchor gambar, jika ditentukan