Penyesuaian HTML Messenger Dialogflow CX

Anda dapat menerapkan banyak penyesuaian HTML ke dialog chat.

Opsi elemen chat HTML

Elemen turunan dari elemen df-messenger dapat berupa salah satu dari berikut:

  • df-messenger-chat: dialog agen selalu terbuka.
  • df-messenger-chat-bubble: dialog agen dapat dibuka atau ditutup dengan tombol buka atau tutup balon.

Penyesuaian HTML untuk df-messenger

Elemen HTML df-messenger memiliki atribut berikut:

Atribut Kebijakan Input Nilai
agent-id Wajib ID Agen yang terkait dengan agen Dialogflow CX.
allow-feedback Opsional Tetapkan ke all untuk mengizinkan pengguna akhir memberikan masukan tentang jawaban agen.
language-code Wajib Kode bahasa default.
project-id Wajib Project ID untuk agen.
location Opsional Region agen. Nilai defaultnya adalah global.
intent Opsional Peristiwa kustom yang dipanggil saat dialog chat dibuka. Jika chat dibuka di awal (seperti dengan df-messenger-chat atau expanded/minimized df-messenger-chat-bubble), peristiwa ini akan dipicu saat pemuatan halaman. Anda dapat menggunakan pengendali peristiwa yang dipanggil untuk peristiwa ini dan menghasilkan pesan agen pertama.
oauth-client-id Opsional Diperlukan untuk autentikasi OAuth. Default-nya adalah null. Jika Anda tidak memberikan nilai ini dan mengaktifkan akses Dialogflow CX Messenger yang tidak diautentikasi, pengguna yang tidak diautentikasi dapat berinteraksi dengan agen. Jika Anda memberikan nilai ini, dialog agen akan menampilkan overlay "Minta Autentikasi" yang mengharuskan pengguna login sebelum dapat menggunakan agen (Anda dapat mengontrol teks menggunakan atribut request-auth-text).
storage-option Opsional Menentukan penyimpanan lokal untuk pesan percakapan. Gunakan none jika pesan tidak boleh disimpan. Penggunaan none akan menghapus semua pesan saat halaman dimuat ulang atau dimuat kembali. Defaultnya adalah sessionStorage.
session-ttl Opsional Tetapkan ke durasi dalam detik untuk mempertahankan sesi, harus kurang dari 86400 (1 hari) dan defaultnya adalah 1800 (30 menit).
url-allowlist Opsional Memungkinkan gambar dimuat dari daftar awalan URL yang dipisahkan koma. URL gambar yang digunakan dalam respons HTML atau Markdown harus diawali dengan salah satu awalan yang tercantum. Gunakan * untuk mengizinkan semua URL.
max-query-length Opsional Menentukan panjang maksimum untuk kueri teks. Jika nilainya negatif, panjangnya tidak terbatas. Default-nya adalah 256. Dokumentasi tambahan.

Penyesuaian HTML untuk df-messenger-chat

Sidebar Dialogflow CX Messenger

Elemen HTML df-messenger-chat memiliki atribut berikut:

Atribut Kebijakan Input Nilai
chat-title Opsional Judul kotak chat. Ditampilkan di bagian atas kotak chat.
chat-subtitle Opsional Subjudul kotak chat. Ditampilkan di bawah chat-title.
chat-title-icon Opsional Ikon yang ditampilkan di judul kotak chat. Ditampilkan di atas kotak chat, di sebelah kiri chat-title secara default.
bot-writing-text Opsional Teks yang ditampilkan saat agen sedang menulis.
bot-writing-image Opsional Gambar yang ditampilkan saat agen sedang menulis. Lebih diprioritaskan daripada bot-writing-text.
request-auth-text Opsional Teks tombol jika autentikasi diperlukan.
placeholder-text Opsional Teks yang akan ditampilkan di kolom input saat kosong. Default-nya adalah "Tanyakan sesuatu…".
bot-actor-image Opsional Sumber gambar yang akan digunakan untuk gambar aktor agen. Ditampilkan di setiap grup respons agen.
user-actor-image Opsional Sumber gambar yang akan digunakan untuk gambar aktor pengguna. Ditampilkan di setiap pesan pengguna.

Penyesuaian HTML untuk df-messenger-chat-bubble

Balon chat Dialogflow CX Messenger

Elemen HTML df-messenger-chat-bubble memiliki atribut yang sama dengan df-messenger-chat dan atribut tambahan berikut:

Atribut Kebijakan Input Nilai
expanded Opsional Boolean yang menentukan apakah chat awalnya terbuka. Jika tidak ditetapkan, chat akan mengingat status terakhirnya.
chat-icon Opsional Ikon untuk balon chat. Harus berupa URI yang tersedia secara publik.
chat-close-icon Opsional Ikon tutup untuk balon chat. Harus berupa URI yang tersedia secara publik.
chat-collapse-icon Opsional Ikon untuk tombol ciutkan di kolom judul. Harus berupa URI yang tersedia secara publik.
anchor Opsional Menentukan tempat dialog chat ditempatkan sesuai dengan balon buka atau tutup. Nilainya adalah dua kata arah (top, bottom, left, right) yang dibatasi oleh -. Nilai defaultnya adalah top-left. Arah pertama menentukan titik anchor, dan arah kedua menentukan arah perluasan utama dari balon. Misalnya: top-left ditempatkan di atas balon dan diperluas ke kiri dan ke atas (menjauh dari balon).
chat-width Opsional Menentukan lebar jendela chat. Nilai numerik (dalam piksel). Default-nya adalah 320 px.
chat-height Opsional Menentukan tinggi jendela chat. Nilai numerik (dalam piksel). Default-nya adalah 480 px.
allow-fullscreen Opsional Menentukan apakah jendela chat dapat dibuka dalam layar penuh. Jika ditetapkan ke always, akan terbuka dalam layar penuh untuk semua ukuran layar. Jika disetel ke small, akan terbuka dalam layar penuh untuk ukuran layar kurang dari 500 piksel, jika tidak, akan terbuka sebagai jendela normal. Dapat mengganti chat-width, chat-height, dan anchor jika ditetapkan.
minimized Opsional Menentukan apakah chat awalnya dibuka dalam bentuk yang diperkecil. Menggunakan logika yang sama dengan anchor. Jika ditentukan, atribut ini lebih diprioritaskan daripada expanded. Tindakan ini juga memicu intent awal saat dimuat.