Peristiwa JavaScript Messenger Dialogflow CX

Messenger Dialogflow CX memicu berbagai peristiwa yang dapat Anda buat pemroses peristiwa-nya. Beberapa peristiwa memiliki kolom objek detail, yang memberikan informasi selengkapnya 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.

Catatan: Hanya aktif jika df-messenger-chat-bubble digunakan.

Properti detail:

• isOpen (boolean): status chat baru

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.

Catatan: Permintaan dapat dimanipulasi. Perubahan tersebut tercermin dalam permintaan yang dikirim. Jika default peristiwa dicegah, permintaan tidak akan dikirim.

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 diterima di dialog agen.

Catatan: Pesan dapat dimanipulasi, perubahan akan tercermin dalam penanganan respons agen. Jika default peristiwa dicegah, agen tidak akan menangani respons.

Properti detail:

• data (object): penampung data
• data.messages (object[]): daftar pesan respons yang diuraikan
• raw (object): respons verbatim 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 peristiwa 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 anchor chip yang diklik, jika ditentukan
• text (string): teks chip yang diklik

df-citation-clicked

Pengguna mengklik kutipan.

Properti detail:

• actionLink (string): href anchor 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): peristiwa elemen daftar yang diklik, jika ditentukan
• languageCode (string): kode bahasa peristiwa 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