Penyesuaian HTML Messenger Dialogflow CX

Ada banyak penyesuaian HTML yang dapat Anda terapkan ke dialog chat.

Opsi elemen chat HTML

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

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

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 Wilayah agen. Nilai defaultnya adalah global.
intent Opsional Peristiwa kustom yang akan dipanggil saat dialog chat dibuka. Anda dapat menggunakan pengendali peristiwa yang akan dipanggil untuk peristiwa ini dan akan menghasilkan pesan agen pertama.
oauth-client-id Opsional Diperlukan untuk autentikasi OAuth. Nilai defaultnya adalah null. Jika nilai tidak diberikan dan akses tanpa autentikasi Dialogflow CX Messenger diaktifkan, pengguna tanpa autentikasi dapat berinteraksi dengan agen. Jika nilai diberikan, dialog agen akan ditimpa dengan "Request Authentication" (teks dapat dikontrol, lihat request-auth-text notifikasi), yang mengharuskan pengguna login sebelum dapat menggunakan agen.
storage-option Opsional Menentukan penyimpanan lokal untuk pesan percakapan. Gunakan none jika pesan tidak boleh disimpan. Menggunakan none akan menghapus semua pesan saat halaman dimuat ulang atau dimuat ulang. Default-nya adalah sessionStorage.
session-ttl Opsional Tetapkan ke durasi dalam detik untuk mempertahankan sesi, harus di bawah 86400 (1 hari) dan default-nya 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 dimulai 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

Screenshot Dialogflow CX Messenger

Elemen HTML df-messenger-chat memiliki atribut berikut:

Atribut Kebijakan input Nilai
chat-title Opsional Judul kotak chat, yang ditampilkan di atasnya.
chat-subtitle Opsional Subjudul kotak chat, yang ditampilkan di atasnya, di bawah chat-title
chat-title-icon Opsional Ikon yang ditampilkan di judul kotak chat, yang ditampilkan di atasnya, 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. 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 "Ask something…".
bot-actor-image Opsional Sumber gambar yang akan digunakan untuk gambar aktor agen. Akan ditampilkan di setiap grup respons agen.
user-actor-image Opsional Sumber gambar yang akan digunakan untuk gambar aktor pengguna. Akan ditampilkan di setiap pesan pengguna.

Penyesuaian HTML untuk df-messenger-chat-bubble

Screenshot 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 untuk publik.
chat-close-icon Opsional Ikon tutup untuk balon chat. Harus berupa URI yang tersedia untuk publik.
chat-collapse-icon Opsional Ikon untuk tombol ciutkan di panel judul. Harus berupa URI yang tersedia untuk publik.
anchor Opsional Menentukan tempat dialog chat ditempatkan relatif terhadap 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 anchoring, dan arah kedua menentukan arah ekspansi utama dari balon. Misalnya: top-left ditempatkan di atas balon dan diperluas ke kiri dan ke atas (dari balon).
chat-width Opsional Menentukan lebar jendela chat. Nilai numerik (dalam piksel). Default-nya adalah 320 piksel.
chat-height Opsional Menentukan tinggi jendela chat. Nilai numerik (dalam piksel). Default-nya adalah 480 piksel.
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 ditetapkan ke small, akan terbuka dalam layar penuh untuk ukuran layar di bawah 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 terbuka dalam bentuk yang diciutkan. Menggunakan logika yang sama dengan anchor. Akan menjalankan intent awal saat dimuat jika ditentukan.