Anda dapat menyesuaikan gaya dialog chat dengan menetapkan variabel CSS.
Gaya 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 untuk 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 utama elemen di seluruh widget (seperti latar belakang panel judul, latar belakang tombol tindakan, dan lainnya) |
df-messenger-focus-color |
Opsional | #1e88e5 | Warna lingkaran fokus di sekitar elemen |
df-messenger-focus-color-contrast |
Opsional | putih | Warna lingkaran 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 |
Penataan gaya 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 | 480px | Tinggi jendela chat |
df-messenger-chat-window-width |
Opsional | 320px | 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-bubble-close-icon-size |
Opsional | 24px | Ukuran ikon tutup untuk balon chat |
df-messenger-chat-collapse-icon-size |
Opsional | tidak disetel | Ukuran ikon tombol ciutkan di bilah judul |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opsional | -90 derajat | Rotasi ikon tutup untuk balon chat, berputar ke 0deg saat menutup chat |
df-messenger-chat-bubble-size |
Opsional | 64px | Ukuran balon chat |
df-messenger-chat-bubble-border-radius |
Opsional | 32px | 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 yang diperkecil |
Penataan gaya untuk panel judul
Untuk titlebar, variabel CSS berikut dapat diberikan:
| Properti | Kebijakan input | Nilai default | Deskripsi |
|---|---|---|---|
df-messenger-titlebar-background |
Opsional | #0b57d0 | Latar belakang kolom judul |
df-messenger-titlebar-padding |
Opsional | 0 15px | Pengisi bilah judul |
df-messenger-titlebar-border |
Opsional | tidak ada | Batas untuk bilah judul |
df-messenger-titlebar-border-bottom |
Opsional | tidak ada | Batas bawah panel judul |
df-messenger-titlebar-title-align |
Opsional | mulai | Perataan teks untuk teks judul di kolom judul, nilai yang diizinkan adalah start, center, atau end |
df-messenger-titlebar-font-color |
Opsional | putih | Warna teks dari teks di bilah judul |
df-messenger-titlebar-letter-spacing |
Opsional | normal | Spasi huruf pada teks dalam bilah judul |
df-messenger-titlebar-title-font-size |
Opsional | 18px | Ukuran teks dari teks judul pada bilah judul |
df-messenger-titlebar-title-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font teks judul dalam bilah judul |
df-messenger-titlebar-title-font-weight |
Opsional | 400 | Ketebalan font teks judul dalam bilah judul |
df-messenger-titlebar-title-line-height |
Opsional | normal | Tinggi baris teks judul pada bilah judul |
df-messenger-titlebar-title-letter-spacing |
Opsional | normal | Spasi huruf pada teks judul dalam bilah judul |
df-messenger-titlebar-subtitle-font-color |
Opsional | putih | Warna teks dari teks sub judul di bilah judul |
df-messenger-titlebar-subtitle-font-size |
Opsional | 18px | Ukuran teks dari teks sub judul di bilah judul |
df-messenger-titlebar-subtitle-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font teks subtitel dalam bilah judul |
df-messenger-titlebar-subtitle-font-weight |
Opsional | 400 | Ketebalan font teks subjudul dalam bilah judul |
df-messenger-titlebar-subtitle-line-height |
Opsional | normal | Tinggi baris teks subtitel dalam bilah judul |
df-messenger-titlebar-subtitle-letter-spacing |
Opsional | normal | Spasi huruf pada teks subjudul dalam bilah judul |
df-messenger-titlebar-title-order |
Opsional | baris | Elemen urutan di kolom 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 pada bilah judul. Nilai ini hanya diterapkan jika chat-title-icon telah ditentukan. |
df-messenger-titlebar-icon-height |
Opsional | 18px | Tinggi ikon pada bilah 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 pada bilah 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 pada 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 | Ruang 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 di kiri atas untuk pesan agen, menggantikan radius generik |
df-messenger-message-bot-border-top-right-radius |
Opsional | 8px | Radius batas di kanan atas untuk pesan agen, mengganti radius generik |
df-messenger-message-bot-border-bottom-left-radius |
Opsional | 8px | Radius batas di kiri bawah untuk pesan agen, menggantikan radius generik |
df-messenger-message-bot-border-bottom-right-radius |
Opsional | 8px | Radius batas di kanan bawah untuk pesan agen, menggantikan radius generik |
df-messenger-message-user-border-top-left-radius |
Opsional | 8px | Radius batas di kiri atas untuk pesan pengguna, menggantikan radius generik |
df-messenger-message-user-border-top-right-radius |
Opsional | 8px | Radius batas di kanan atas untuk pesan pengguna, menggantikan radius generik |
df-messenger-message-user-border-bottom-left-radius |
Opsional | 8px | Radius batas di kiri bawah untuk pesan pengguna, menggantikan radius generik |
df-messenger-message-user-border-bottom-right-radius |
Opsional | 8px | Radius batas di kanan bawah untuk pesan pengguna, menggantikan radius generik |
df-messenger-message-stack-spacing |
Opsional | 10px | Ruang antara dua pesan berturut-turut |
df-messenger-message-bot-stack-border-top-left-radius |
Opsional | 8px | Radius batas di 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 di 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 di 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 di 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 di kiri atas untuk pesan pengguna berturut-turut, menggantikan radius kiri atas pengguna |
df-messenger-message-user-stack-border-top-right-radius |
Opsional | 8px | Radius batas di 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 di kiri bawah untuk pesan pengguna berturut-turut, menggantikan radius kiri bawah pengguna |
df-messenger-message-user-stack-border-bottom-right-radius |
Opsional | 8px | Radius batas di 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 disetel |
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 dari 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 dari 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 | Spasi antara pesan yang ditampilkan saat agen menulis dan pesan sebelumnya |
df-messenger-message-error-background |
Opsional | hitam | Latar belakang pesan error yang ditampilkan dalam dialog agen |
df-messenger-message-error-font-family |
Opsional | "Google Sans", "Helvetica Neue", sans-serif | Jenis font untuk pesan error yang ditampilkan dalam dialog agen |
df-messenger-message-error-font-size |
Opsional | 12px | Ukuran font untuk pesan error yang ditampilkan dalam dialog agen |
df-messenger-message-error-font-color |
Opsional | putih | Warna teks untuk pesan error yang ditampilkan dalam dialog agen |
df-messenger-chat-scroll-button-enabled-display |
Opsional | tidak ada | Menentukan tampilan tombol "Jump to Bottom", tetapkan ke flex untuk mengaktifkan tombol tersebut |
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 container di sekitar tombol "Jump to Bottom" |
df-messenger-chat-scroll-button-text-display |
Opsional | inline | Tampilan teks di samping ikon pada tombol "Lompat ke Bawah", gunakan none untuk menyembunyikan teks |
df-messenger-chat-scroll-button-font-size |
Opsional | 14px | Ukuran teks tombol "Lompat ke Bawah" |
df-messenger-chat-scroll-button-font-color |
Opsional | putih | Warna teks tombol "Lompat ke Bawah" |
df-messenger-chat-scroll-button-background |
Opsional | #0b57d0 | Latar belakang tombol "Lompat ke Bawah" |
df-messenger-chat-scroll-button-border-radius |
Opsional | 999px | Radius batas tombol "Lompat ke Bawah" |
df-messenger-chat-messagelist-scroll-shadow-background |
Opsional | gradien-radial(sisi terjauh di 50% 100%, rgba(0,0,0,.2), transparan) bawah |
Bayangan yang ditampilkan di bagian bawah daftar pesan saat daftar tidak di-scroll ke bagian bawah, disetel ke none untuk menonaktifkan |
Gaya visual untuk gambar aktor
Gambar pelaku adalah gambar yang ditampilkan bersama pesan dari bot atau aktor. 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 pelaku dan pesan |
df-messenger-message-bot-actor-order |
Opsional | baris | Urutan gambar dan pesan pelaku. Gunakan row untuk menempatkan gambar aktor di sebelah kiri dan pesan di sebelah kanan, atau row-reverse untuk menempatkan gambar aktor di sebelah kanan dan pesan di sebelah kiri. |
df-messenger-message-user-actor-order |
Opsional | balikkan baris | Urutan gambar dan pesan pelaku. Gunakan row-reverse untuk menempatkan gambar pelaku di sebelah kanan dan pesan di sebelah kiri, atau row untuk menempatkan gambar aktor di sebelah kiri dan pesan di sebelah kanan. |
df-messenger-message-actor-direction |
Opsional | kolom | Harus kebalikan dari df-messenger-message-bot-actor-order dan df-messenger-message-user-actor-order, gunakan column jika keduanya berbasis row, atau row jika keduanya berbasis column. |
df-messenger-message-actor-align |
Opsional | mulai fleksibel | Penyelarasan pelaku dalam kaitannya dengan pesan. Gunakan flex-start untuk menempatkan gambar aktor di 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 | 999px | 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 |
Penataan gaya 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 kursor diarahkan ke |
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 | -4px | 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 pada input pengguna |
Penataan gaya 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 masukan
Saat 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 jempol ke atas dan ke bawah |
df-messenger-message-feedback-icon-border-radius |
Opsional | 0 | Radius batas tombol jempol atas dan bawah |
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 mengarahkan kursor |
df-messenger-message-feedback-icon-padding |
Opsional | 0 | Bantalan jempol ke atas dan ke bawah |
df-messenger-message-rich-feedback-spacing |
Opsional | 10px | Spasi elemen dalam masukan lengkap |
df-messenger-message-rich-feedback-padding |
Opsional | 0 | Padding masukan lengkap |
df-messenger-message-rich-feedback-background |
Opsional | tidak ada | Latar belakang masukan yang lengkap |
df-messenger-message-rich-feedback-border-radius |
Opsional | 0 | Radius batas masukan multimedia |
df-messenger-message-rich-feedback-border |
Opsional | tidak ada | Batas masukan lengkap |
df-messenger-rich-feedback-offset-left |
Opsional | 0 | Offset di sisi kiri |