Peristiwa JavaScript Messenger Dialogflow CX

Dialogflow CX Messenger memicu berbagai peristiwa yang dapat Anda buat pemroses peristiwanya. Beberapa peristiwa memiliki kolom objek detail, yang memberikan informasi lebih lanjut tentang peristiwa tersebut.

df-messenger-loaded

Dialog agen dimuat terlebih dahulu.

Properti detail:

  • tidak ada

Contoh:

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

df-chat-open-changed

Chat dibuka atau ditutup.

Properti detail:

  • isOpen (boolean): status baru percakapan

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

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

  // Send request yourself.
});

df-response-received

Respons telah tiba di dialog agen.

Properti detail:

  • data (object): penampung data
  • data.messages (object[]): daftar pesan respons yang diuraikan
  • 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(); // 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 tombol yang diklik, jika ditentukan
  • event (string): peristiwa tombol yang diklik, jika ditentukan
  • languageCode (string): kode bahasa acara jika ditentukan, jika tidak, kode bahasa utama
  • text (string): teks tombol yang diklik
window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

Pengguna mengklik chip.

Properti detail:

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

df-citation-clicked

Pengguna mengklik kutipan.

Properti detail:

  • actionLink (string): href link kutipan
  • title (string): judul kutipan

df-info-card-clicked

Pengguna mengklik kartu info.

Properti detail:

  • actionLink (string): href anchor kartu info
  • title (string): judul kartu info

df-list-element-clicked

Pengguna mengklik elemen daftar.

Properti detail:

  • actionLink (string): href anchor elemen daftar, jika ditentukan
  • event (string): event dari elemen daftar yang diklik, jika ditentukan
  • languageCode (string): kode bahasa acara jika ditentukan, jika tidak, kode bahasa utama
  • title (string): judul elemen daftar
window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

Pengguna mengklik gambar.

Properti detail:

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