JavaScript Messenger Dialogflow CX

Dialogflow CX Messenger menyediakan fungsi yang dapat Anda panggil untuk memengaruhi perilakunya.

renderCustomText

Fungsi ini merender pesan teks, seolah-olah berasal dari agen atau dimasukkan oleh pengguna.

Argumen:

  • string: pesan teks
  • boolean: true untuk pesan dari agen, false dari pengguna akhir

Returns:

  • void

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

Fungsi ini merender kartu kustom seolah-olah berasal dari fulfillment Dialogflow CX.

Argumen:

  • payload: daftar respons payload kustom, yang ditentukan di bagian Fulfillment

Returns:

  • void

Contoh:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

Fungsi ini mengirimkan kueri ke Dialogflow CX API dan menunggu respons. Tindakan ini menyimulasikan input pengguna akhir yang biasanya diberikan ke dialog agen. Sistem menangani respons seperti kueri pengguna akhir.

Argumen:

  • string: kueri teks

Returns:

  • Promise<void>: nilai yang ditampilkan untuk operasi asinkron

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

Fungsi ini mengirimkan permintaan ke Dialogflow CX API dan menunggu respons.

Argumen:

  • string: jenis permintaan, mendukung query (lihat juga sebelumnya sendQuery) dan event (lihat peristiwa kustom)
  • any: payload yang sesuai dengan jenis permintaan, yang merupakan string untuk kedua jenis permintaan yang didukung

Returns:

  • Promise<void>: nilai yang ditampilkan untuk operasi asinkron

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

Fungsi ini menetapkan nilai default untuk kolom queryParams dari permintaan detectIntent Dialogflow CX API. Metode Dialogflow CX Messenger lainnya dapat menggantikan nilai default masing-masing dalam parameter kueri.

Argumen:

Returns:

  • void

Contoh:

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

Fungsi ini mengirimkan informasi personalisasi generatif dari pengguna akhir ke Dialogflow CX. Informasi ini akan dipertahankan selama sisa sesi.

Argumen:

  • object: Data JSON, lihat dokumentasi personalisasi generatif

Returns:

  • void

Contoh:

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

Fungsi ini menghapus penyimpanan persisten dialog agen. Tindakan ini juga menghapus status dialog agen saat ini. Secara default, status autentikasi pengguna akan dipertahankan. Anda dapat menggunakan args opsional untuk menyesuaikan perilaku ini.

Argumen:

Nama Jenis Deskripsi
args object? Argumen opsional untuk mengonfigurasi operasi hapus penyimpanan.
args.clearAuthentication boolean? Flag opsional untuk menghapus status autentikasi. Jika disetel ke benar (true), status autentikasi akan dihapus. Jika tidak, status autentikasi akan dipertahankan.

Returns:

  • void

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

Fungsi ini menghapus autentikasi dialog agen.

Argumen:

  • tidak ada

Returns:

  • void

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

Fungsi ini memulai sesi baru di dalam dialog agen. Secara default, tindakan ini akan menghapus histori pesan, tetapi mempertahankan status autentikasi pengguna. Sesuaikan perilaku ini menggunakan parameter args opsional.

Argumen:

Nama Jenis Deskripsi
args object? Argumen opsional untuk mengonfigurasi pembuatan sesi baru.
args.retainHistory boolean? Flag opsional untuk mempertahankan histori. Jika disetel ke benar (true), histori akan disimpan. Jika tidak, histori akan dihapus.
args.clearAuthentication boolean? Flag opsional untuk menghapus status autentikasi. Jika disetel ke benar (true), status autentikasi akan dihapus. Jika tidak, status autentikasi akan dipertahankan.

Returns:

  • void

Contoh:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

Panggil fungsi ini di elemen df-messenger-chat-bubble untuk membuka chat. Tindakan ini tidak akan melakukan apa pun jika chat sudah terbuka.

Argumen:

  • tidak ada

Returns:

  • void

Contoh:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

Fungsi ini menutup chat. Panggil di elemen df-messenger-chat-bubble untuk menutup chat. Tidak melakukan apa pun jika chat sudah ditutup.

Argumen:

  • tidak ada

Returns:

  • void

Contoh:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Chat yang diperkecil di Dialogflow CX Messenger

Anda dapat membuka jendela chat dalam versi yang diperkecil dengan memanggil fungsi ini pada elemen df-messenger-chat-bubble. Fungsi ini tidak melakukan apa pun jika chat sudah diperkecil.

Argumen:

Nama Jenis Deskripsi
args object? Argumen opsional untuk mengonfigurasi chat yang diperkecil.
args.anchor string? anchor opsional untuk mengonfigurasi tempat chat yang diperkecil dibuka. Logika yang sama dengan atribut anchor pada elemen balon chat. Setelan defaultnya adalah left-top.
args.showActorImages boolean? Flag opsional untuk menampilkan gambar aktor (jika ditentukan di elemen df-messenger-chat-bubble). Defaultnya adalah false.

Contoh:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

Panggil fungsi ini pada elemen df-messenger-chat-bubble untuk menutup chat yang diminimalkan. Fungsi ini tidak melakukan apa pun jika chat sudah ditutup.

Contoh:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();