Lewati ke konten
Clienta.ai

Kustomisasi Widget

Kustomisasi Widget

Section titled “Kustomisasi Widget”

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

Pengaturan

Section titled “Pengaturan”

Semua opsi kustomisasi widget tersedia di Settings → Channels → Web. Pilih saluran web Anda dan buka tab Appearance.

Warna Tema

Section titled “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

Section titled “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:

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

Posisi Widget

Section titled “Posisi Widget”
PosisiNilai PengaturanKapan Digunakan
Kanan bawahbottom-right (default)Penempatan standar, cocok untuk sebagian besar situs
Kiri bawahbottom-leftKetika sisi kanan bertabrakan dengan elemen lain

Avatar

Section titled “Avatar”
v1.6.4

Tampilkan avatar kustom di header widget dan layar utama dengan menyediakan URL gambar.

Melalui Dashboard: Atur URL avatar di Settings → Channels → Web → Customizer → Avatar URL.

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 direkomendasikan: 128 × 128 piksel (persegi)
  • Format yang didukung: PNG, JPG, WebP, SVG
  • Jika URL tidak valid atau gambar gagal dimuat, ikon default akan ditampilkan

Mode Sapaan

Section titled “Mode Sapaan”
v1.6.2

Pesan sapaan mendukung tiga mode bahasa. Buka Settings → Channels → Web → Customizer dan cari bagian Greeting Mode.

Statis

Section titled “Statis”

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

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

Sesuaikan Pengunjung (locale)

Section titled “Sesuaikan Pengunjung (locale)”

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

  1. Pilih mode Match Visitor.
  2. Kolom akan muncul untuk masing-masing dari 15 locale yang didukung.
  3. Isi teks sapaan untuk setiap bahasa yang ingin Anda dukung.
  4. Biarkan kolom locale kosong untuk menggunakan sapaan Statis sebagai cadangan untuk bahasa tersebut.

Contoh pengaturan:

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

Org-Main

Section titled “Org-Main”

Sapaan selalu ditampilkan dalam bahasa respons utama organisasi, terlepas dari bahasa pengunjung. Mode ini membaca bahasa yang diatur di AI Settings → Main Response Language.

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

Pemilih Bahasa

Section titled “Pemilih Bahasa”
v1.6.2

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

Untuk mengaktifkan: Di Settings → Channels → Web → Customizer, aktifkan Show Language Selector ke ON.

Ketika pengunjung memilih bahasa dari dropdown:

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

Lihat Web Widget — Language Selector untuk gambaran lengkap perilakunya.

Bahasa Default

Section titled “Bahasa Default”
v1.6.8

Atur bahasa default untuk widget agar pengunjung melihat antarmuka dalam locale pilihan Anda sebelum deteksi otomatis terjadi. Buka Settings → Channels → Web → Customizer → Default Language dan pilih dari dropdown.

Urutan prioritas bahasa adalah:

  1. Force This Language (AI Settings) — menggantikan segalanya ketika diaktifkan
  2. Pilihan eksplisit pengunjung (melalui pemilih bahasa, jika diaktifkan)
  3. Bahasa Default — pengaturan ini
  4. Locale kode embed — nilai locale dalam kode embed
  5. Thai — cadangan ketika tidak ada yang lain diatur

Pilih “None — follow embed config” untuk melewati pengaturan ini dan mengandalkan nilai locale kode embed sebagai gantinya.

Pratinjau

Section titled “Pratinjau”

Setelah melakukan perubahan, gunakan panel Live Preview di sisi kanan halaman pengaturan untuk melihat tampilan widget di situs Anda secara tepat — sebelum menyimpan.

Tips

Section titled “Tips”