Basic, Style, and Agent Configuration

Basic Configuration

Basic Configuration mendefinisikan identitas inti web widget dan cara widget terhubung ke bot. Anda dapat mengatur nama widget untuk identifikasi internal dan menetapkan label yang menghubungkan web widget ke bot yang sesuai. Koneksi ini memastikan percakapan yang masuk diarahkan dengan benar.

Style Configuration

Style Configuration mengontrol tampilan visual web widget di website Anda. Anda dapat mengatur posisi dan ukuran tombol widget, serta menyesuaikan warna untuk widget, layar utama, dan halaman chat, sehingga widget menyatu dengan desain website Anda.

Berikut penjelasan setiap bagian.

Title & Tagline

Masukkan judul yang singkat dan jelas untuk web widget Anda. Judul ini akan muncul di bagian atas widget dan sebaiknya mewakili tujuan utamanya.

Untuk tagline, berikan pesan sambutan untuk pengguna. Tagline akan muncul di bawah judul dan sebaiknya menyoroti manfaat utama widget.

Button Icon, Transparent Icon Background, Button Position

Anda dapat menyesuaikan ikon widget yang muncul di website Anda atau menggunakan ikon default. Aktifkan toggle Transparent Icon Background untuk menghapus warna latar belakang di belakang ikon tombol chat. Jika Anda mengunggah ikon sendiri, disarankan mengaktifkan opsi ini agar ikon menyatu dengan desain website Anda.

Anda juga dapat mengatur ukuran ikon. Secara default, ukuran ikon diset 24 × 24 px dan tombol widget muncul di pojok kanan bawah halaman. Meskipun ini posisi yang paling umum, disarankan memilih penempatan yang paling sesuai dengan layout dan desain situs Anda.

Show Link Preview

Ketika diaktifkan, link yang dikirim di chatbot akan menampilkan preview dengan judul, gambar, dan deskripsi. Matikan untuk menampilkan link biasa saja.

Conversation Preview

Gunakan toggle untuk beralih antara preview ikon tombol dan preview layout percakapan. Semua perubahan akan langsung muncul di live preview di atas.

Custom Widget Colors

Pengaturan kustomisasi warna dibagi menjadi tiga bagian utama, masing-masing mengontrol tampilan bagian widget yang berbeda untuk memastikan pengalaman chat yang konsisten dan menarik.

General

Bagian ini memungkinkan Anda menyesuaikan warna utama widget, termasuk live chat button, live chat button icon, dan header text. Warna ini mewakili identitas utama widget dan terlihat sebelum chat dibuka.

Detail setiap warna:

1. Live chat button

   

2. Live chat button icon

   

3. Header text

   

Welcome Page

Bagian ini memungkinkan Anda mengontrol tampilan welcome page, yaitu layar pertama yang dilihat pelanggan ketika mereka membuka widget. Anda dapat menyesuaikan elemen seperti warna latar belakang primer dan sekunder untuk membuat kesan pertama yang menyambut.

Detail setiap warna:

1. Home Primary Background

   

2. Home Secondary Background

   

3. Card Title

   

4. Card Background

   

Chat Page

Bagian ini berfokus pada antarmuka chat. Anda dapat menyesuaikan latar belakang chat, serta warna bubble dan teks untuk pesan agen dan pelanggan, sehingga percakapan tetap jelas dan nyaman secara visual.

Detail setiap warna:

1. Chat background

   

2. Customer bubble

   

3. Customer text

   

4. Agent bubble

   

5. Agent text

   

6. Form button

   

7. Form button text

   

Tips desain:

• Gunakan warna brand utama untuk tombol chat agar tampil konsisten.
• Pastikan teks memiliki kontras yang cukup dengan latar belakang agar mudah dibaca.
• Aktifkan fitur Conversation Preview di sebelah kanan tepat di bawah simulasi tampilan widget untuk melihat contoh hasil. Kemudian Anda dapat mulai mensimulasikan interaksi dengan widget.

---

Web widget dapat dibuat dan digunakan hanya dengan melengkapi Style Configuration, karena pengaturan lain akan mengikuti konfigurasi default. Namun, untuk memastikan routing optimal, branding konsisten, dan pengalaman pelanggan yang lebih baik, disarankan meninjau dan mengonfigurasi semua bagian sebelum memublikasikan widget.

---

Agent Configuration

Agent Configuration menentukan agen mana yang dapat mengakses dan menangani percakapan yang berasal dari web widget. Secara default, semua agen di workspace dapat mengaksesnya, tetapi pengaturan ini dapat disesuaikan untuk membatasi akses hanya ke agen yang dipilih.