Appearance

Halaman Appearance mengatur tampilan chat agent Anda di mata pengunjung. Halaman ini menawarkan tiga langkah, dari yang paling mudah sampai yang paling teknis. Pilih yang sesuai dengan Anda:

Dalam tutorial ini Anda memberi Atlas, asisten operasional Kirana Group, warna brand Kirana: navy #0F4C81 sebagai primary dan teal #14B8A6 sebagai accent.

Sebelum memulai

• Upload logo dan avatar Anda di Profile, agar Anda bisa menilai warna di samping keduanya.
• Siapkan warna brand Anda dalam bentuk kode hex. Untuk Atlas: #0F4C81 dan #14B8A6.

Langkah 1: Buka halaman Appearance

Di CMS, buka agent Anda lalu pilih Persona → Appearance di sidebar kiri. Halaman ini menampilkan tiga kartu bernomor (langkah 1, 2, dan 3). Klik header kartu untuk membuka atau menutupnya. Bilah di bagian bawah halaman berisi tiga tombol:

Langkah 2: Lihat tampilan siap pakai (The easy way)

Kartu 1 · Just make it pretty bertanya What does your chatbot do? Setiap chip menampilkan tampilan yang dirancang untuk jenis agent tersebut: Patient care, Staff operations, Data & analytics, Document Q&A, Lead & intake, Field & logistics, dan Finance & IR.

Atlas membantu karyawan internal dengan SOP, jadi klik Staff operations. Deskripsinya berbunyi "SOP lookup, compliance Q&A, HR onboarding. Internal staff, functional and low-distraction." Empat tampilan muncul: Qlar (seimbang dan sesuai brand), Slate (netral, lugas), Moss (hijau yang tenang dan operasional), dan Obsidian (gelap penuh, fokus).

Mengklik sebuah tampilan langsung menerapkannya: empat warnanya, beserta header bar, color scheme, dan background bawaannya. Jika Anda tidak punya warna brand, hanya ini yang Anda perlukan. Klik Preview untuk melihatnya, lalu Save.

Kirana punya warna brand, jadi untuk Atlas Anda lanjut ke langkah 2. Melihat-lihat tampilan siap pakai tetap berguna: Anda jadi tahu gaya header bar dan background yang cocok untuk alat internal karyawan.

Langkah 3: Masukkan warna brand (If you have brand colors)

Kartu 2 · Use my colors and style punya dua kolom: Your brand colors di kiri dan Display options di kanan.

Warna brand adalah dasar seluruh tema. Atur warna ini dan semua warna komponen akan mengikutinya.

Neutral dan Surface dikelompokkan di bawah teks "Optional. Text, borders, and backgrounds. Defaults suit most chatbots." Gradasinya menyesuaikan mode terang dan gelap secara otomatis.

Untuk mengatur warna Atlas:

1. Klik baris Primary untuk membukanya, lalu masukkan #0F4C81 di field warna (atau pilih salah satu swatch).
2. Klik baris Accent dan masukkan #14B8A6.
3. Biarkan Neutral (#3D3D44) dan Surface (#F3F5F6) pada nilai default-nya.

Saat sebuah baris terbuka, baris itu juga menampilkan gradasi warna yang dihasilkan dari warna Anda, dan catatan jika warnanya mungkin sulit dibaca atau bertabrakan dengan Primary. Jika agent Anda tidak memakai accent terpisah, klik Use primary instead di baris Accent: link, chip, dan referensi akan mengikuti warna primary.

Langkah 4: Pilih opsi tampilan

Kolom Display options mengatur tampilan chat di mata pengunjung.

Untuk Atlas:

1. Biarkan Background pada One color dan atur Intensity ke Subtle. Atlas adalah alat kerja, jadi gradiennya cukup samar di latar belakang.
2. Atur Header bar color ke Brand, agar top bar memakai warna Kirana.
3. Biarkan Color scheme pada Auto, agar chat mengikuti pengaturan perangkat setiap pengunjung.
4. Kosongkan Font.

Catatan: Seperti tertulis di catatan di bawah opsi tersebut, display options tidak tampil di panel preview. Simpan perubahan Anda untuk melihatnya di chat live.

Langkah 5 (opsional): Setel warna satu per satu

Di bawah kedua kolom, Fine-tune individual colors membuka daftar warna per komponen. Gunakan hanya jika satu komponen membutuhkan warna yang berbeda. Komponen lain tetap mengikuti brand Anda.

• Gunakan tab Light mode dan Dark mode untuk memilih mode yang sedang Anda edit.
• Warna dikelompokkan per komponen: General (latar halaman dan scrollbar), Introduction (teks pembuka di bawah logo), Top bar, References & citations, User bubble, Input box, Send button, Suggestions, Uploads, dan Tables.
• Setiap warna bertuliskan Unset sampai Anda menimpanya. Unset berarti warna itu memakai nilai yang diturunkan dari warna brand Anda. Hapus nilai yang Anda timpa untuk kembali ke nilai tersebut.
• Anda bisa mengunci sebuah warna agar Reset dan re-sync per bagian tidak mengubahnya.

Jika Anda sudah menimpa beberapa warna lalu mengganti warna brand, sebuah notifikasi muncul: Changed your base colors? Pilih Update colors untuk menyelaraskan semua komponen dengan warna brand yang baru. Warna yang dikunci tetap dipertahankan.

Atlas tidak memerlukan penimpaan warna apa pun. Biarkan bagian ini tertutup.

Langkah 6 (opsional): Tambahkan custom CSS (For developers)

Kartu 3 · I know my CSS ditujukan untuk developer yang menginginkan kendali penuh.

• Theme CSS dihasilkan otomatis dari warna brand dan display options Anda. Editor ini read-only dan diperbarui setiap kali Anda mengubahnya. Klik Copy untuk menyalinnya, misalnya untuk melihat variabel --qlar-* apa saja yang tersedia.
• Custom CSS, di bawahnya, adalah tempat Anda menambahkan styling tambahan. Isinya disimpan terpisah dari Theme CSS, sehingga tetap aman saat tema dibuat ulang setelah perubahan warna.

Gunakan Custom CSS untuk detail yang tidak dicakup tema. Contohnya:

/* A slightly cooler page background */
:root {
  --qlar-body-bg: #F5F8FB;
}

Periksa custom CSS di mode terang dan gelap sebelum publish. Atlas tidak memerlukan custom CSS.

Langkah 7: Simpan perubahan

1. Klik Save di bilah bagian bawah halaman.
2. CMS menampilkan pertanyaan Are you sure to save your changes?
3. Klik Yes.

Periksa hasilnya

Setelah Anda menyimpan, panel preview di sebelah kanan dimuat ulang dengan tema baru. Ajukan pertanyaan ke Atlas, misalnya "Who approves a USD 80,000 purchase?", lalu pastikan:

• Top bar memakai warna brand.
• Bubble user memakai warna muda dari warna primary.
• Link referensi di jawaban berwarna teal, dari warna accent.

Jawaban di screenshot ini berasal dari SOP persetujuan yang Anda upload di Dokumen. Jika Anda belum mengunggahnya, ajukan pertanyaan apa saja: yang Anda periksa di sini adalah warnanya.

Periksa juga chat di mode terang dan gelap, dan pastikan teks tetap mudah dibaca di setiap latar belakang. Display options (background, header bar, color scheme, font) tampil di chat live; buka chat dalam ukuran penuh lewat tombol Preview di top bar.

User akhir baru melihat tampilan baru setelah Anda publish. Lihat Preview dan Publish Perubahan.

Langkah berikutnya

• About: tambahkan deskripsi publik, tautan media sosial, dan detail kontak (langkah berikutnya).
• Profile: sesuaikan logo dan avatar yang tampil bersama warna-warna ini.