Appearance
Buka di CMSLayar Appearance mengatur tampilan chat bagi user Anda. Pilih tampilan siap pakai, gunakan warna brand Anda, atau tulis custom CSS: layar ini menyajikannya sebagai tiga langkah, dan Anda bisa memakai mana pun yang paling cocok. Terdapat di sidebar agent pada Persona → Appearance.
Step 1: Just make it pretty
| What does your chatbot do? | Deretan chip use case: Patient care, Staff operations, Data & analytics, Document Q&A, Lead & intake, Field & logistics, Finance & IR. Memilih salah satunya menampilkan deskripsi singkat dan preset tampilan yang dibuat untuk use case tersebut. |
| Kartu preset | Tampilan siap pakai. Tampilan Qlar disematkan paling depan di setiap use case kecuali Patient care. Memilih sebuah kartu menerapkan empat warna brand-nya dan juga mengatur Header bar color, Color scheme dan Background dari Step 2. Warna yang sudah Anda sesuaikan secara manual akan dihapus. |
Step 2: Use my colors and style
Your brand colors
Atur keempat warna ini dan semua yang lain akan mengikutinya. Klik baris warna untuk membuka editornya (color picker, swatch yang disarankan, dan skala shade yang dihasilkan; klik sebuah shade untuk menyalin nilai hex-nya).
| Primary | Mengatur tombol, top bar, tombol kirim, dan tombol call-to-action utama. Sebuah catatan memberi tahu apakah teks tombol putih terbaca jelas di atasnya; jika tidak, Use a darker shade memilih shade lebih gelap terdekat yang terbaca jelas. |
| Accent | Opsional. Mengatur tautan, teks referensi, dan panah saran. Tambahkan dengan Add a different accent color; tanpa accent, elemen-elemen ini mengikuti warna Primary. Jika accent terlihat hampir sama dengan Primary, Fix it menggesernya menjauh dengan tetap mempertahankan kecerahannya. Use primary instead menghapus accent kembali. |
| Neutral | Opsional. Mengatur teks, border, ikon, dan status nonaktif. Shade-nya menyesuaikan dengan mode terang atau gelap. |
| Surface | Opsional. Mengatur latar belakang dan isian kartu. Shade-nya menyesuaikan dengan mode terang atau gelap. |
| Changed your base colors? | Muncul saat Anda mengubah warna brand setelah menyesuaikan warna satu per satu. Update colors menyinkronkan ulang setiap komponen ke warna brand yang baru (warna yang dikunci tetap dipertahankan). Anda dapat menutup pemberitahuan ini untuk mempertahankan warna yang sudah Anda sesuaikan. |
Display options
Tampilan chat bagi pengunjung. Opsi ini tidak tampil di panel preview; simpan perubahan Anda untuk melihatnya di chat langsung.
| Background | Plain (latar belakang polos), One color atau Two colors (gradien lembut dalam warna brand Anda). Pengunjung dapat mematikan gradien untuk diri mereka sendiri; pilih Plain untuk menghapusnya bagi semua orang. |
| Intensity | Seberapa kuat gradien terlihat: Subtle, Balanced atau Vivid. Disembunyikan saat Background diatur ke Plain. |
| Header bar color | Gaya top bar chat: Glass (memberi efek buram pada apa pun yang bergulir di belakang bar), Subtle atau Brand. |
| Color scheme | Tampilan yang pertama kali dilihat pengunjung baru: Light, Dark atau Auto. Pengunjung tetap dapat beralih di dalam chat. |
| Font family | Opsional. Pilih dari daftar saran (Google font populer dan font sistem) atau ketik nama font apa pun. Kosongkan untuk font default. |
| Size (px) | Ukuran teks dasar opsional, dari 10 hingga 40 piksel. |
| Add font URL | Menampilkan field Font URL untuk stylesheet web font yang di-hosting (misalnya tautan Google Fonts). Jika font family kosong, nilainya diisi dari URL Google Fonts. Remove mengosongkan dan menyembunyikan field tersebut. |
Fine-tune individual colors
Opsional dan tertutup secara default. Setiap warna diturunkan dari warna brand Anda kecuali Anda mengubahnya di sini.
| Light mode / Dark mode | Pilih mode yang sedang Anda edit. Setiap mode menyimpan warnanya sendiri. |
| Bagian warna | General (Background, Scrollbar), Introduction (Text), Top bar (Background, Text), References & citations (Link color, Hover), User bubble (Background, Text), Input box (Background, Text, Border, Focus border, Mic icon), Send button (Icon bg, Icon, Hover bg, Disabled bg, Disabled icon), Suggestions (Chip bg, Hover bg, Chip text, Arrow), Uploads (Chip bg), Tables (Header bg, Header text). |
| Unset | Warna yang menampilkan "Unset" memakai nilai otomatis dari warna brand Anda. |
| Sinkron ulang bagian | Tombol di samping judul bagian menyinkronkan ulang bagian tersebut ke warna brand Anda, kecuali warna yang dikunci. |
| Lock | Di dalam editor warna. Warna yang dikunci tetap dipertahankan saat Anda memakai Update colors, sinkron ulang bagian, atau reset. Berlaku untuk mode terang maupun gelap. |
| Reset (per warna) | Di dalam editor warna. Mengembalikan warna tersebut ke nilai otomatis. |
Step 3: I know my CSS
Untuk developer. Tertutup secara default.
| Theme CSS | CSS read-only yang dihasilkan dari Step 1 dan 2. Copy menyalinnya ke clipboard. |
| Custom CSS | Aturan CSS tambahan milik Anda sendiri. Aturan ini disimpan terpisah dari Theme CSS yang dihasilkan, sehingga tetap utuh saat warna brand atau pengaturan lain membuat ulang Theme CSS. |
Action Bar
Bar ini menempel di bagian bawah layar.
| Reset | Setelah konfirmasi, membuang semua perubahan yang belum disimpan dan memulihkan appearance terakhir yang Anda simpan. |
| Save | Meminta konfirmasi, lalu menyimpan appearance. Mungkin perlu beberapa menit sampai chat langsung menampilkan perubahannya. Perubahan yang disimpan masuk ke draft agent; publish agent agar perubahan berlaku untuk user. |
| Preview | Memperbarui panel preview dengan warna dan CSS Anda saat ini yang belum disimpan. |
Panduan terkait: Appearance