Kustomisasi Widget

Personalisasi tampilan widget chat Anda agar sesuai dengan identitas merek dan desain situs web Anda.

Pengaturan

Semua opsi kustomisasi widget tersedia di Pengaturan → Saluran → Web. Pilih saluran web Anda dan buka tab Tampilan.

Warna Tema

Warna tema diterapkan secara konsisten di seluruh widget:

Latar belakang tombol launcher
Latar belakang bilah header
Warna tombol kirim
Warna sorotan tautan
Latar belakang gelembung pesan pengguna

Pilih warna yang sesuai dengan identitas merek Anda dan memastikan kontras yang baik terhadap teks putih.

Pesan Sambutan

Pesan sambutan adalah teks pertama yang dilihat pelanggan saat membuka widget. Buat pesan yang ramah dan jelaskan dengan jelas apa yang dapat dibantu oleh bot.

Contoh:

“Halo! Ada yang bisa saya bantu hari ini?”
“Selamat datang di Dukungan Acme. Tanyakan apa saja tentang produk dan layanan kami.”
“Hai! Saya siap membantu. Ada yang bisa saya bantu?”

Posisi	Nilai Pengaturan	Kapan Digunakan
Kanan bawah	`bottom-right` (default)	Penempatan standar, cocok untuk sebagian besar situs
Kiri bawah	`bottom-left`	Ketika sisi kanan berbenturan dengan elemen lain

Avatar

v1.6.4

Tampilkan avatar khusus di header widget dan layar beranda dengan menyediakan URL gambar.

Melalui Dashboard: Atur URL avatar di Pengaturan → Saluran → Web → Kustomisasi → URL Avatar.

Melalui Kode Embed: Masukkan avatarUrl dalam konfigurasi tema:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

Persyaratan:

Harus berupa URL https:// (URL http, data:, dan javascript: ditolak demi keamanan)
Ukuran yang disarankan: 128 × 128 piksel (persegi)
Format yang didukung: PNG, JPG, WebP, SVG
Jika URL tidak valid atau gambar gagal dimuat, ikon default akan ditampilkan

Mode Salam

v1.6.2

Pesan salam mendukung tiga mode bahasa. Buka Pengaturan → Saluran → Web → Kustomisasi dan cari bagian Mode Salam.

Statis

Teks salam yang sama ditampilkan kepada setiap pengunjung tanpa memandang bahasa. Ini adalah mode default.

Masukkan satu teks salam di kolom teks. Contoh: “Halo! Ada yang bisa saya bantu hari ini?”

Sesuaikan Pengunjung (lokal)

Tampilkan salam yang berbeda untuk setiap bahasa. Widget membaca bahasa yang terdeteksi dari pengunjung dan menampilkan salam yang sesuai.

Pilih mode Sesuaikan Pengunjung.
Kolom akan muncul untuk masing-masing dari 15 lokal yang didukung.
Isi teks salam untuk setiap bahasa yang ingin Anda dukung.
Biarkan kolom lokal kosong untuk menggunakan salam Statis sebagai cadangan untuk bahasa tersebut.

Contoh pengaturan:

Thai: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
Inggris: “Hi! How can I help you today?”
Jepang: “こんにちは！何かお手伝いできますか？“

Org-Main

Salam selalu ditampilkan dalam bahasa respons utama organisasi, terlepas dari bahasa pengunjung. Mode ini membaca bahasa yang diatur di Pengaturan AI → Bahasa Respons Utama.

Gunakan Org-Main ketika tim Anda beroperasi dalam satu bahasa dan Anda ingin semua salam konsisten.

Pemilih Bahasa

v1.6.2

Pemilih bahasa menambahkan ikon bola dunia (🌐) ke header widget sehingga pengunjung dapat memilih bahasa mereka secara eksplisit. Fitur ini dinonaktifkan secara default.

Untuk mengaktifkan: Di Pengaturan → Saluran → Web → Kustomisasi, aktifkan Tampilkan Pemilih Bahasa ke AKTIF.

Ketika pengunjung memilih bahasa dari dropdown:

Semua respons AI dikunci ke bahasa tersebut untuk sesi berlangsung
Kunci ini mengesampingkan deteksi otomatis meskipun pengunjung mengetik dalam bahasa yang berbeda
Antarmuka widget beralih ke bahasa yang dipilih

Lihat Widget Web — Pemilih Bahasa untuk ikhtisar perilaku lengkap.

Bahasa Default

v1.6.8

Atur bahasa default untuk widget agar pengunjung melihat antarmuka dalam lokal pilihan Anda sebelum deteksi otomatis terjadi. Buka Pengaturan → Saluran → Web → Kustomisasi → Bahasa Default dan pilih dari dropdown.

Urutan prioritas bahasa adalah:

Paksa Bahasa Ini (Pengaturan AI) — mengesampingkan segalanya saat diaktifkan
Pilihan eksplisit pengunjung (melalui pemilih bahasa, jika diaktifkan)
Bahasa Default — pengaturan ini
Lokal konfigurasi embed — nilai locale dalam kode embed
Thai — cadangan ketika tidak ada yang lain diatur

Pilih “Tidak Ada — ikuti konfigurasi embed” untuk melewati pengaturan ini dan mengandalkan nilai lokal dari kode embed.

Mode Gelap & Variabel CSS

v1.6.8

Widget mendukung tombol mode gelap bawaan yang dapat diaktifkan pengunjung dari header chat. Seluruh antarmuka widget menggunakan CSS custom properties, memastikan tampilan yang konsisten di kedua mode.

Variabel CSS Utama

Variabel	Deskripsi
`--cw-primary`	Warna merek utama (dari pengaturan warna tema Anda)
`--cw-primary-rgb`	Komponen RGB dari warna utama, digunakan untuk efek transparansi
`--cw-bg`	Warna latar belakang widget
`--cw-bg-secondary`	Latar belakang sekunder (kolom input, elemen formulir)
`--cw-surface`	Warna permukaan untuk kartu, tooltip, cuplikan kutipan
`--cw-text`	Warna teks utama
`--cw-text-secondary`	Warna teks sekunder/redup
`--cw-border`	Warna border untuk pemisah dan garis tepi input

Saat mode gelap diaktifkan, widget menerapkan kelas cw-dark atau cw-light ke kontainer root, dan semua variabel CSS diperbarui secara otomatis. Header gradien, gelembung pesan, formulir kontak, dan chip kutipan semuanya mengikuti mode yang aktif.

Pratinjau

Setelah membuat perubahan, gunakan panel Pratinjau Langsung di sisi kanan halaman pengaturan untuk melihat persis bagaimana widget akan tampil di situs Anda — sebelum menyimpan.

Kustomisasi Widget

Kustomisasi Widget

Pengaturan

Warna Tema

Pesan Sambutan

Posisi Widget

Avatar

Mode Salam

Statis

Sesuaikan Pengunjung (lokal)

Org-Main

Pemilih Bahasa

Bahasa Default

Mode Gelap & Variabel CSS

Variabel CSS Utama

Pratinjau

Tips