Anda dapat menyesuaikan gaya dialog chat dengan menetapkan variabel CSS.
Gaya visual umum
Variabel CSS berikut menyediakan opsi gaya umum:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font yang akan digunakan di seluruh widget |
df-messenger-font-size |
Opsional | 14px | Ukuran teks yang akan digunakan di seluruh widget |
df-messenger-font-color |
Opsional | #1f1f1f | Warna teks yang akan digunakan di seluruh widget |
df-messenger-primary-color |
Opsional | #0b57d0 | Warna primer untuk elemen di seluruh widget (seperti latar belakang panel judul, latar belakang tombol tindakan, dan lainnya) |
df-messenger-focus-color |
Opsional | #1e88e5 | Warna cincin fokus di sekitar elemen |
df-messenger-focus-color-contrast |
Opsional | putih | Warna cincin fokus di sekitar elemen saat berada di dalam induk dengan warna latar belakang (seperti panel judul) |
df-messenger-chat-border |
Opsional | tidak ada | Batas untuk dialog |
df-messenger-chat-border-radius |
Opsional | 0 | Radius batas untuk dialog |
Gaya visual untuk df-messenger-chat-bubble
Saat menggunakan elemen df-messenger-chat-bubble, variabel CSS berikut dapat diberikan:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-chat-window-height |
Opsional | 480 piksel | Tinggi jendela chat |
df-messenger-chat-window-width |
Opsional | 320 piksel | Lebar jendela chat |
df-messenger-chat-window-offset |
Opsional | 16px | Jarak antara balon chat dan jendela chat |
df-messenger-chat-window-box-shadow |
Opsional | tidak ada | Bayangan kotak jendela chat |
df-messenger-chat-collapse-icon-size |
Opsional | tidak disetel | Ukuran ikon tombol ciutkan di panel judul |
df-messenger-chat-bubble-icon-size |
Opsional | 36px | Ukuran ikon untuk balon chat |
df-messenger-chat-bubble-close-icon-size |
Opsional | 24px | Ukuran ikon tutup untuk balon chat |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opsional | -90deg | Rotasi ikon tutup untuk balon chat, berputar ke 0 derajat saat menutup chat |
df-messenger-chat-bubble-icon-color |
Opsional | putih | Warna ikon dan ikon tutup untuk balon chat |
df-messenger-chat-bubble-size |
Opsional | 64 piksel | Ukuran balon chat |
df-messenger-chat-bubble-background |
Opsional | #0b57d0 | Latar belakang balon chat |
df-messenger-chat-bubble-border-radius |
Opsional | 32 piksel | Radius batas balon chat |
df-messenger-chat-bubble-border |
Opsional | tidak ada | Batas balon chat |
df-messenger-chat-border-minimized |
Opsional | tidak ada | Batas chat dalam bentuk yang diperkecil |
df-messenger-chat-border-radius-minimized |
Opsional | 0 | Radius batas chat dalam bentuk diperkecil |
Gaya visual untuk panel judul
Untuk judul jendela, variabel CSS berikut dapat diberikan:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-titlebar-background |
Opsional | #0b57d0 | Latar belakang panel judul |
df-messenger-titlebar-padding |
Opsional | 0 15px | Padding panel judul |
df-messenger-titlebar-border |
Opsional | tidak ada | Batas untuk panel judul |
df-messenger-titlebar-border-bottom |
Opsional | tidak ada | Batas bawah panel judul |
df-messenger-titlebar-title-align |
Opsional | mulai | Perataan teks judul di panel judul, nilai yang diizinkan adalah start, center, atau end |
df-messenger-titlebar-font-color |
Opsional | putih | Warna teks di panel judul |
df-messenger-titlebar-letter-spacing |
Opsional | normal | Spasi huruf teks di panel judul |
df-messenger-titlebar-title-font-size |
Opsional | 18px | Ukuran teks judul di panel judul |
df-messenger-titlebar-title-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font teks judul di panel judul |
df-messenger-titlebar-title-font-weight |
Opsional | 400 | Ketebalan font teks judul di panel judul |
df-messenger-titlebar-title-line-height |
Opsional | normal | Tinggi baris teks judul di panel judul |
df-messenger-titlebar-title-letter-spacing |
Opsional | normal | Spasi huruf teks judul di panel judul |
df-messenger-titlebar-subtitle-font-color |
Opsional | putih | Warna teks subtitel di panel judul |
df-messenger-titlebar-subtitle-font-size |
Opsional | 18px | Ukuran teks teks subtitel di panel judul |
df-messenger-titlebar-subtitle-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font teks subtitel di panel judul |
df-messenger-titlebar-subtitle-font-weight |
Opsional | 400 | Ketebalan font teks subjudul di panel judul |
df-messenger-titlebar-subtitle-line-height |
Opsional | normal | Tinggi baris teks subjudul di panel judul |
df-messenger-titlebar-subtitle-letter-spacing |
Opsional | normal | Spasi huruf teks subtitel di panel judul |
df-messenger-titlebar-title-order |
Opsional | baris | Mengurutkan elemen di panel judul, nilai yang diizinkan adalah row atau row-reverse. Nilai ini hanya berlaku jika atribut chat-title-icon telah ditentukan. |
df-messenger-titlebar-icon-width |
Opsional | 18px | Lebar ikon di panel judul. Nilai ini hanya diterapkan jika chat-title-icon telah ditentukan. |
df-messenger-titlebar-icon-height |
Opsional | 18px | Tinggi ikon di panel judul. Nilai ini hanya diterapkan jika chat-title-icon telah ditentukan. |
df-messenger-titlebar-icon-padding |
Opsional | 0 12px 0 0 | Padding di sekitar ikon di panel judul. Nilai ini hanya diterapkan jika chat-title-icon telah ditentukan. |
Gaya visual untuk jendela chat
Untuk jendela chat, variabel CSS berikut dapat diberikan:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-chat-background |
Opsional | #fafafa | Latar belakang dialog agen tempat pesan ditampilkan |
df-messenger-chat-padding |
Opsional | 10px | Padding dialog agen tempat pesan ditampilkan |
df-messenger-messagelist-border |
Opsional | tidak ada | Batas daftar pesan |
df-messenger-message-border |
Opsional | tidak ada | Batas pesan dialog agen |
df-messenger-message-font-size |
Opsional | 14px | Ukuran teks pesan dialog agen |
df-messenger-message-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font pesan dialog agen |
df-messenger-message-font-weight |
Opsional | normal | Ketebalan font pesan dialog agen |
df-messenger-message-bot-background |
Opsional | #ecf3fe | Latar belakang pesan yang dikirim oleh agen |
df-messenger-message-bot-border |
Opsional | tidak ada | Batas pesan yang dikirim oleh agen |
df-messenger-message-bot-font-color |
Opsional | #1f1f1f | Warna teks pesan yang dikirim oleh agen |
df-messenger-message-bot-font-weight |
Opsional | normal | Ketebalan font pesan yang dikirim oleh agen |
df-messenger-message-user-background |
Opsional | #e1e3e1 | Latar belakang pesan yang dikirim oleh pengguna |
df-messenger-message-user-border |
Opsional | tidak ada | Batas pesan yang dikirim oleh pengguna |
df-messenger-message-user-font-color |
Opsional | #1f1f1f | Warna teks pesan yang dikirim oleh pengguna |
df-messenger-message-user-font-weight |
Opsional | normal | Ketebalan font pesan yang dikirim oleh pengguna |
df-messenger-message-spacing |
Opsional | 10px | Spasi antara dua pesan |
df-messenger-message-border-radius |
Opsional | 8px | Radius batas untuk pesan, berlaku untuk semua sudut |
df-messenger-message-bot-border-top-left-radius |
Opsional | 8px | Radius batas kiri atas untuk pesan agen, mengganti radius umum |
df-messenger-message-bot-border-top-right-radius |
Opsional | 8px | Radius batas kanan atas untuk pesan agen, mengganti radius umum |
df-messenger-message-bot-border-bottom-left-radius |
Opsional | 8px | Radius batas kiri bawah untuk pesan agen, mengganti radius generik |
df-messenger-message-bot-border-bottom-right-radius |
Opsional | 8px | Radius batas kanan bawah untuk pesan agen, mengganti radius umum |
df-messenger-message-user-border-top-left-radius |
Opsional | 8px | Radius batas kiri atas untuk pesan pengguna, mengganti radius umum |
df-messenger-message-user-border-top-right-radius |
Opsional | 8px | Radius batas kanan atas untuk pesan pengguna, mengganti radius umum |
df-messenger-message-user-border-bottom-left-radius |
Opsional | 8px | Radius batas kiri bawah untuk pesan pengguna, mengganti radius umum |
df-messenger-message-user-border-bottom-right-radius |
Opsional | 8px | Radius batas kanan bawah untuk pesan pengguna, mengganti radius umum |
df-messenger-message-stack-spacing |
Opsional | 10px | Spasi di antara dua pesan berturut-turut |
df-messenger-message-bot-stack-border-top-left-radius |
Opsional | 8px | Radius batas kiri atas untuk pesan agen berturut-turut, mengganti radius kiri atas agen |
df-messenger-message-bot-stack-border-top-right-radius |
Opsional | 8px | Radius batas kanan atas untuk pesan agen berturut-turut, mengganti radius kanan atas agen |
df-messenger-message-bot-stack-border-bottom-left-radius |
Opsional | 8px | Radius batas kiri bawah untuk pesan agen berturut-turut, mengganti radius kiri bawah agen |
df-messenger-message-bot-stack-border-bottom-right-radius |
Opsional | 8px | Radius batas kanan bawah untuk pesan agen berturut-turut, mengganti radius kanan bawah agen |
df-messenger-message-user-stack-border-top-left-radius |
Opsional | 8px | Radius batas kiri atas untuk pesan pengguna berturut-turut, mengganti radius kiri atas pengguna |
df-messenger-message-user-stack-border-top-right-radius |
Opsional | 8px | Radius batas kanan atas untuk pesan pengguna berturut-turut, mengganti radius kanan atas pengguna |
df-messenger-message-user-stack-border-bottom-left-radius |
Opsional | 8px | Radius batas kiri bawah untuk pesan pengguna berturut-turut, mengganti radius kiri bawah pengguna |
df-messenger-message-user-stack-border-bottom-right-radius |
Opsional | 8px | Radius batas kanan bawah untuk pesan pengguna berturut-turut, mengganti radius kanan bawah pengguna |
df-messenger-message-user-writing-image-width |
Opsional | 24px | Lebar gambar yang ditampilkan saat agen menulis, hanya aktif jika bot-writing-image ditetapkan |
df-messenger-message-bot-writing-image-height |
Opsional | 24px | Tinggi gambar yang ditampilkan saat agen menulis, hanya aktif jika bot-writing-image ditetapkan |
df-messenger-message-bot-writing-font-color |
Opsional | #1f1f1f | Warna teks yang ditampilkan saat agen menulis |
df-messenger-message-bot-writing-font-weight |
Opsional | normal | Ketebalan font teks yang ditampilkan saat agen menulis |
df-messenger-message-bot-writing-font-size |
Opsional | 14px | Ukuran teks yang ditampilkan saat agen menulis |
df-messenger-message-bot-writing-border |
Opsional | tidak ada | Batas pesan yang ditampilkan saat agen menulis |
df-messenger-message-bot-writing-background |
Opsional | #ecf3fe | Latar belakang pesan yang ditampilkan saat agen menulis |
df-messenger-message-bot-writing-padding |
Opsional | 12px | Padding pesan yang ditampilkan saat agen menulis |
df-messenger-message-bot-writing-spacing |
Opsional | 10px | Ruang antara pesan yang ditampilkan saat agen menulis dan pesan sebelumnya |
df-messenger-chat-scroll-button-enabled-display |
Opsional | tidak ada | Menentukan tampilan tombol "Lompat ke Bawah", ditetapkan ke flex untuk mengaktifkan tombol |
df-messenger-chat-scroll-button-align |
Opsional | center | Perataan tombol "Lompat ke Bawah", nilai yang diizinkan mencakup flex-start, center, flex-end |
df-messenger-chat-scroll-button-container-padding |
Opsional | 8px | Padding penampung di sekitar tombol "Lompat ke Bawah" |
df-messenger-chat-scroll-button-text-display |
Opsional | inline | Tampilan teks di samping ikon di tombol "Lompat ke Bawah", gunakan none untuk menyembunyikan teks |
df-messenger-chat-scroll-button-font-size |
Opsional | 14px | Ukuran teks tombol "Langsung ke Bawah" |
df-messenger-chat-scroll-button-font-color |
Opsional | putih | Warna teks tombol "Langsung ke Bawah" |
df-messenger-chat-scroll-button-background |
Opsional | #0b57d0 | Latar belakang tombol "Lompat ke Bawah" |
df-messenger-chat-scroll-button-border-radius |
Opsional | 999 piksel | Radius batas tombol "Lompat ke Bawah" |
df-messenger-chat-messagelist-scroll-shadow-background |
Opsional | radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom |
Bayangan yang ditampilkan di bagian bawah daftar pesan saat daftar tidak di-scroll ke bawah, tetapkan ke none untuk menonaktifkan |
Gaya visual untuk gambar aktor
Gambar pelaku adalah gambar yang ditampilkan bersama pesan bot atau pelaku. Untuk gambar aktor tersebut, variabel CSS berikut dapat diberikan:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-message-actor-spacing |
Opsional | 16px | Jarak antara gambar aktor dan pesan |
df-messenger-message-bot-actor-order |
Opsional | baris | Urutan gambar dan pesan aktor. Gunakan row untuk menampilkan gambar aktor di sebelah kiri dan pesan di sebelah kanan, atau row-reverse untuk menampilkan gambar aktor di sebelah kanan dan pesan di sebelah kiri. |
df-messenger-message-user-actor-order |
Opsional | row-reverse | Urutan gambar dan pesan aktor. Gunakan row-reverse untuk menampilkan gambar aktor di sebelah kanan dan pesan di sebelah kiri, atau row untuk menampilkan gambar aktor di sebelah kiri dan pesan di sebelah kanan. |
df-messenger-message-actor-direction |
Opsional | kolom | Harus berlawanan dengan df-messenger-message-bot-actor-order dan df-messenger-message-user-actor-order, gunakan column jika berbasis row, atau row jika berbasis column. |
df-messenger-message-actor-align |
Opsional | flex-start | Penyesuaian pelaku sehubungan dengan pesan. Gunakan flex-start untuk menempatkan gambar aktor di bagian atas, center untuk menempatkan gambar aktor di tengah, atau flex-end untuk menempatkan gambar aktor di bagian bawah. |
df-messenger-message-actor-border-radius |
Opsional | 999 piksel | Radius batas gambar aktor |
df-messenger-message-actor-padding |
Opsional | 8px | Padding gambar aktor |
df-messenger-message-actor-image-size |
Opsional | 24px | Ukuran gambar aktor |
df-messenger-message-bot-actor-background |
Opsional | putih | Latar belakang gambar aktor agen |
df-messenger-message-bot-actor-border |
Opsional | tidak ada | Batas gambar aktor agen |
df-messenger-message-bot-actor-offset |
Opsional | 0 | Offset untuk memindahkan gambar aktor agen |
df-messenger-message-user-actor-background |
Opsional | putih | Latar belakang gambar aktor pengguna |
df-messenger-message-user-actor-border |
Opsional | tidak ada | Batas gambar aktor pengguna |
df-messenger-message-user-actor-offset |
Opsional | 0 | Offset untuk memindahkan gambar aktor pengguna |
Gaya visual untuk input pengguna
Untuk input pengguna, variabel CSS berikut dapat diberikan:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-send-icon-color |
Opsional | #0b57d0 | Warna ikon "kirim" di input pengguna |
df-messenger-send-icon-color-hover |
Opsional | #0b57d0 | Warna ikon "kirim" di input pengguna saat diarahkan kursor |
df-messenger-send-icon-color-active |
Opsional | #0b57d0 | Warna ikon "kirim" di input pengguna saat teks dapat dikirim |
df-messenger-send-icon-offset-x |
Opsional | 0 | Offset vertikal ikon "kirim" di input pengguna |
df-messenger-send-icon-offset-y |
Opsional | -4 piksel | Offset horizontal ikon "kirim" di input pengguna |
df-messenger-input-background |
Opsional | putih | Latar belakang input pengguna |
df-messenger-input-padding |
Opsional | 8px | Padding keseluruhan antara kolom input pengguna (termasuk tombol kirim pesan) dan penampung. |
df-messenger-input-inner-padding |
Opsional | 0px 48px 0px 0 | Padding dalam antara kolom input pengguna (tidak termasuk tombol kirim pesan) dan penampung. |
df-messenger-input-border |
Opsional | tidak ada | Batas input pengguna |
df-messenger-input-border-top |
Opsional | 1px solid #e0e0e0 | Batas atas input pengguna |
df-messenger-input-border-bottom |
Opsional | tidak ada | Batas bawah kolom teks input pengguna |
df-messenger-input-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font input pengguna |
df-messenger-input-font-color |
Opsional | #1f1f1f | Warna teks input pengguna |
df-messenger-input-font-size |
Opsional | 14px | Ukuran teks input pengguna |
df-messenger-input-font-weight |
Opsional | normal | Ketebalan font input pengguna |
df-messenger-input-box-border |
Opsional | tidak ada | Batas kotak input pengguna |
df-messenger-input-box-focus-border |
Opsional | tidak ada | Batas kotak input pengguna saat difokuskan |
df-messenger-input-box-border-radius |
Opsional | 0 | Radius batas kotak input pengguna |
df-messenger-input-box-padding |
Opsional | 12px 0 | Padding kotak input pengguna |
df-messenger-input-box-focus-padding |
Opsional | 12px 0 | Padding kotak input pengguna saat difokuskan |
df-messenger-input-gutter |
Opsional | stabil | Gutter scrollbar dari input pengguna |
df-messenger-input-info-font-size |
Opsional | 14px | Ukuran teks pesan informasi dalam input pengguna |
df-messenger-input-info-font-weight |
Opsional | normal | Ketebalan font pesan informasi dalam input pengguna |
df-messenger-input-info-padding |
Opsional | 14px 16px | Padding pesan informasi dalam input pengguna |
df-messenger-input-info-line-height |
Opsional | 20px | Tinggi baris pesan informasi dalam input pengguna |
df-messenger-input-long-text-warning-display |
Opsional | tidak ada | Jika disetel ke block, akan menampilkan pesan peringatan setelah input melebihi 256 karakter. Hanya aktif jika atribut max-query-length lebih tinggi (misalnya, dinonaktifkan). Dokumentasi tambahan. |
df-messenger-input-warning-background |
Opsional | #fef7e0 | Latar belakang pesan peringatan dalam input pengguna |
df-messenger-input-warning-color |
Opsional | #410e0b | Warna teks pesan peringatan dalam input pengguna |
df-messenger-input-warning-icon-color |
Opsional | #e37400 | Warna ikon dalam pesan peringatan di input pengguna |
df-messenger-input-error-background |
Opsional | #f9dedc | Latar belakang pesan error dalam input pengguna |
df-messenger-input-error-color |
Opsional | #410e0b | Warna teks pesan error dalam input pengguna |
df-messenger-input-error-icon-color |
Opsional | #b3261e | Warna ikon dalam pesan peringatan di input pengguna |
Gaya visual untuk overlay autentikasi
Saat menggunakan penyiapan yang diautentikasi, variabel CSS berikut dapat diberikan untuk overlay:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-auth-background |
Opsional | rgba(204, 204, 204, .8) | Latar belakang dialog agen saat autentikasi ditampilkan |
df-messenger-auth-button-background |
Opsional | #0b57d0 | Latar belakang tombol autentikasi |
df-messenger-auth-button-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font tombol autentikasi |
df-messenger-auth-button-font-color |
Opsional | putih | Warna teks tombol autentikasi |
df-messenger-auth-button-font-size |
Opsional | 14px | Ukuran teks tombol autentikasi |
df-messenger-auth-button-border |
Opsional | tidak ada | Batas tombol autentikasi |
df-messenger-auth-button-border-radius |
Opsional | 8px | Radius batas tombol autentikasi |
Gaya visual masukan
Jika fitur masukan jawaban diaktifkan, variabel CSS berikut dapat diberikan untuk kontrol masukan.
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
Opsional | 8px | Jarak antara tombol suka dan tidak suka |
df-messenger-message-feedback-icon-font-color |
Opsional | #444746 | Warna tombol suka dan tidak suka |
df-messenger-message-feedback-icon-font-color-active |
Opsional | #444746 | Warna tombol suka dan tidak suka saat aktif |
df-messenger-message-feedback-icon-border |
Opsional | tidak ada | Batas tombol suka dan tidak suka |
df-messenger-message-feedback-icon-border-radius |
Opsional | 0 | Radius batas tombol suka dan tidak suka |
df-messenger-message-feedback-icon-background |
Opsional | tidak ada | Latar belakang tombol suka dan tidak suka |
df-messenger-message-feedback-icon-background-hover |
Opsional | tidak ada | Latar belakang tombol suka dan tidak suka saat diarahkan kursor |
df-messenger-message-feedback-icon-padding |
Opsional | 0 | Padding tombol suka dan tidak suka |
df-messenger-message-rich-feedback-spacing |
Opsional | 10px | Spasi elemen dalam masukan yang bermanfaat |
df-messenger-message-rich-feedback-padding |
Opsional | 0 | Padding masukan yang kaya |
df-messenger-message-rich-feedback-background |
Opsional | tidak ada | Latar belakang masukan yang kaya |
df-messenger-message-rich-feedback-border-radius |
Opsional | 0 | Radius batas masukan yang kaya |
df-messenger-message-rich-feedback-border |
Opsional | tidak ada | Batas masukan yang kaya |
df-messenger-rich-feedback-offset-left |
Opsional | 0 | Offset di sisi kiri |