Penyesuaian HTML Dialogflow Messenger

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 Diperlukan ID Agen yang terkait dengan agen Dialogflow.
allow-feedback Opsional Setel ke all untuk mengizinkan pengguna akhir memberikan masukan pada jawaban agen.
language-code Diperlukan Kode bahasa default.
project-id Diperlukan ID project untuk agen.
location Opsional Wilayah agen. Nilai defaultnya adalah global.
intent Opsional Peristiwa kustom yang akan dipanggil saat dialog chat dibuka. Anda dapat menggunakan sebuah 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 Messenger 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 untuk login sebelum mereka 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. Nilai defaultnya adalah sessionStorage.
session-ttl Opsional Setel ke durasi dalam detik untuk mempertahankan sesi, harus benar-benar di bawah 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 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 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 Subtitel kotak chat, yang ditampilkan di atasnya, di bawah chat-title
chat-title-icon Opsional Ikon yang ditampilkan dalam judul kotak chat, yang 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 kolom kosong. Default-nya adalah "Tanyakan sesuatu...".
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 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 disetel, chat akan mengingat status terakhirnya.
chat-icon Opsional Ikon 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 bilah judul. Harus berupa URI yang tersedia untuk 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 tambatan, 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 membuka layar penuh. Jika disetel 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 seperti jendela normal. Dapat menggantikan chat-width, chat-height, dan anchor jika ditetapkan.
minimized Opsional Menentukan apakah chat awalnya terbuka dalam bentuk yang diperkecil. Menggunakan logika yang sama seperti anchor. Akan menjalankan intent awal saat dimuat jika ditentukan.