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:

  • 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.
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 Dialogflow CX Messenger yang tidak diautentikasi diaktifkan, pengguna yang tidak diautentikasi dapat berinteraksi dengan agen. Jika nilai diberikan, dialog agen akan di-overlay dengan "Minta Autentikasi" (teks dapat dikontrol, lihat notifikasi request-auth-text, 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. Defaultnya adalah sessionStorage.
session-ttl Opsional Tetapkan ke durasi dalam detik untuk mempertahankan sesi, harus di bawah 86400 (1d) 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 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. Setelan defaultnya adalah 256. Dokumentasi tambahan.

Penyesuaian HTML untuk df-messenger-chat

Screenshot Messenger Dialogflow

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 Subtitel kotak chat, yang ditampilkan di atasnya, di bawah chat-title
chat-title-icon Opsional Ikon yang ditampilkan di judul kotak chat, ditampilkan di atasnya, di sebelah kiri chat-title secara default
bot-writing-text Opsional Teks yang ditampilkan saat agen menulis
bot-writing-image Opsional Gambar yang ditampilkan saat agen 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. Defaultnya adalah "Ajukan pertanyaan…".
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 Messenger Dialogflow

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 relatif terhadap balon terbuka atau tertutup. Nilainya adalah dua kata arah (top, bottom, left, right) yang dipisahkan 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). Setelan defaultnya adalah 320 piksel.
chat-height Opsional Menentukan tinggi jendela chat. Nilai numerik (dalam piksel). Setelan defaultnya 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 disetel ke small, akan membuka 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 diperkecil. Menggunakan logika yang sama dengan anchor. Akan menjalankan intent awal saat pemuatan jika ditentukan.