Peristiwa JavaScript Messenger Dialogflow CX

Dialogflow CX Messenger memicu berbagai peristiwa yang dapat Anda buat pemroses peristiwa untuknya. 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