Penyesuaian CSS Messenger Dialogflow CX

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