Peristiwa JavaScript Messenger Dialogflow CX

Anda dapat membuat pemroses peristiwa untuk berbagai peristiwa yang dipicu oleh Dialogflow CX Messenger. Untuk mengetahui informasi selengkapnya, lihat Pemroses peristiwa. Beberapa peristiwa memiliki kolom objek detail, yang memberikan informasi lebih lanjut tentang peristiwa tersebut.

df-messenger-loaded

Terjadi saat dialog agen dimuat untuk pertama kalinya.

Properti detail:

  • tidak ada

Contoh:

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

df-chat-open-changed

Terjadi saat Anda membuka atau menutup chat.

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

Terjadi saat Anda memasukkan teks dalam chat.

Properti detail:

  • input (string): nilai yang dimasukkan pengguna

Contoh:

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

df-request-sent

Terjadi saat Anda mengirim permintaan 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

Terjadi saat respons diterima dari dialog agen.

Properti detail:

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

Terjadi saat 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

Terjadi saat sesi dengan agen 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

Terjadi saat sesi 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

Terjadi saat URL referensi yang disarankan diberikan.

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

Terjadi saat Anda mengklik akordeon.

Properti detail:

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

df-button-clicked

Terjadi saat Anda 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

Terjadi saat Anda mengklik chip.

Properti detail:

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

df-citation-clicked

Terjadi saat Anda mengklik kutipan.

Properti detail:

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

df-info-card-clicked

Terjadi saat Anda mengklik kartu info.

Properti detail:

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

df-list-element-clicked

Terjadi saat Anda mengklik elemen daftar.

Properti detail:

  • actionLink (string): href anchor elemen daftar, jika ditentukan
  • event (string): peristiwa 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

Terjadi saat Anda mengklik gambar.

Properti detail:

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