Desain Widget Chat yang Tidak Mengganggu Pengunjung

Panduan desain widget chat website yang tidak mengganggu: posisi, ukuran, warna, waktu muncul pop-up, tampilan mobile, dan aksesibilitas.

Desain widget chat yang tidak mengganggu punya tiga ciri: mudah ditemukan saat dibutuhkan, diam saat tidak dibutuhkan, dan tidak pernah menutupi konten atau tombol penting. Pengunjung datang untuk melihat produk, bukan untuk ditanya “Ada yang bisa dibantu?” tiga detik setelah halaman terbuka.

Widget yang terlalu agresif bisa menurunkan konversi, sementara widget yang terlalu tersembunyi tidak pernah dipakai. Panduan ini membahas titik tengahnya.

Prinsip dasar: hadir, bukan menyela

Bayangkan pramuniaga di toko fisik. Yang baik berdiri di dekat kasir dan siap saat dipanggil. Yang menyebalkan mengikuti Anda dari rak ke rak. Widget chat bekerja sama: tombolnya selalu ada, tapi inisiatif percakapan sebaiknya datang dari pengunjung atau dari sinyal minat yang jelas.

Elemen desain yang perlu diperhatikan

Posisi

Pojok kanan bawah adalah konvensi yang sudah dipahami. Masalah muncul saat bertabrakan dengan elemen lain:

• Tombol “Tambah ke keranjang” yang menempel di bawah layar ponsel.
• Banner persetujuan cookie.
• Tombol WhatsApp mengambang dari plugin lain.
• Tombol “kembali ke atas”.

Periksa setiap halaman penting, terutama halaman produk dan checkout. Jika ada tabrakan, geser widget sedikit ke atas atau pindahkan ke kiri bawah.

Ukuran tombol

Tombol peluncur sekitar 56-64 piksel cukup terlihat di desktop dan nyaman disentuh di ponsel. Lebih besar dari itu mulai menutupi konten.

Warna dan kontras

Pakai warna brand yang kontras dengan latar. Ikon di dalam tombol harus tetap terbaca, misalnya ikon putih di atas warna gelap. Hindari merah menyala atau animasi berkedip yang terkesan seperti notifikasi darurat.

Label teks

Ikon saja kadang ambigu. Label pendek seperti “Tanya kami” atau “Chat admin” di samping ikon membantu, terutama untuk pengunjung yang jarang belanja online. Di ponsel, label bisa disembunyikan agar hemat ruang.

Jendela chat saat terbuka

• Di desktop, jendela sekitar 360-400 piksel lebar, tidak menutupi seluruh halaman.
• Tampilkan nama atau foto tim agar terasa ada manusia di baliknya.
• Sebutkan perkiraan waktu balas, misalnya “Biasanya membalas dalam beberapa menit”.
• Tombol tutup dan minimalkan harus jelas.

Pop-up dan sapaan otomatis: kapan muncul

Sapaan otomatis adalah sumber gangguan paling besar sekaligus pemicu percakapan paling efektif. Bedanya ada di waktu dan konteks.

Situasi	Rekomendasi
Halaman beranda, pengunjung baru masuk	Jangan munculkan sapaan, cukup tombol
Halaman produk, lebih dari 20-30 detik	Sapaan kecil terkait produk
Halaman checkout, pengunjung diam lama	Tawarkan bantuan soal pembayaran atau ongkir
Halaman blog atau artikel	Biasanya tidak perlu sapaan
Pengunjung sudah menutup sapaan	Jangan muncul lagi di sesi yang sama

Bentuk sapaan sebaiknya bubble kecil di atas tombol, bukan jendela penuh yang menutupi halaman. Contoh kalimat yang tidak memaksa ada di sapaan otomatis live chat.

Desain untuk layar ponsel

Mayoritas pengunjung toko online Indonesia datang dari ponsel, dan di sinilah widget paling sering mengganggu.

1. Pastikan tombol widget tidak menutupi tombol beli yang menempel di bawah.
2. Saat dibuka, jendela chat boleh layar penuh, tapi harus ada tombol tutup yang besar dan jelas.
3. Kolom ketik tidak boleh tertutup keyboard ponsel.
4. Jangan tampilkan sapaan otomatis di ponsel secepat di desktop.
5. Uji di ponsel Android kelas menengah, bukan hanya iPhone terbaru.

Tips lebih detail ada di live chat di mobile.

Aksesibilitas yang sering dilupakan

• Tombol widget punya label yang bisa dibaca pembaca layar, misalnya “Buka live chat”.
• Widget bisa dibuka dan ditutup dengan keyboard.
• Kontras teks di dalam jendela chat cukup tinggi, terutama teks abu-abu kecil.
• Animasi tidak berlebihan, dan menghormati pengaturan kurangi gerakan di perangkat.

Konsistensi dengan brand

Widget yang terlihat “tempelan” membuat pengunjung ragu apakah itu benar milik toko. Samakan:

• Warna dengan tombol utama website.
• Gaya bahasa sapaan dengan cara toko berbicara di Instagram.
• Nama yang ditampilkan, misalnya “Tim CS Batik Laras” bukan “Support”.

Sebagian besar platform live chat, termasuk chatagent.id, menyediakan pengaturan warna dan teks sapaan, sehingga penyesuaian ini tidak perlu kode tambahan.

Kesalahan desain yang paling sering ditemui

• Widget berkedip atau bergoyang terus. Menarik perhatian, tapi juga mengalihkan dari produk dan terasa murahan.
• Suara notifikasi saat sapaan muncul. Mengagetkan, terutama bagi orang yang membuka website di kantor.
• Status “online” palsu. Widget menulis “Kami online” padahal tidak ada yang menjaga. Pengunjung menunggu, lalu kecewa.
• Formulir wajib sebelum chat. Meminta nama, email, dan nomor HP sebelum boleh bertanya membuat banyak pengunjung batal.
• Dua widget sekaligus. Tombol live chat di kanan dan tombol WhatsApp mengambang di posisi yang sama, saling tumpang tindih.
• Teks sapaan generik. “Halo! Ada yang bisa kami bantu?” muncul di semua halaman, termasuk halaman kebijakan privasi.

Setiap kesalahan ini kecil, tapi jika digabung membuat pengunjung merasa diganggu dan memilih menutup widget, bahkan saat sebenarnya punya pertanyaan.

Sesuaikan isi widget per halaman

Widget yang sama tidak harus berperilaku sama di semua halaman. Di halaman produk, sapaan bisa menyebut ukuran atau stok. Di halaman harga untuk bisnis jasa, sapaan bisa menawarkan konsultasi. Di halaman bantuan atau pelacakan pesanan, sapaan bisa langsung menanyakan nomor pesanan. Penyesuaian kecil ini membuat widget terasa relevan, bukan sekadar tempelan yang muncul di mana-mana.

Checklist sebelum widget dipublikasikan

• Tidak menutupi tombol beli, cookie banner, atau navigasi di desktop dan ponsel.
• Sapaan otomatis hanya muncul di halaman yang relevan.
• Ada info jam layanan atau perkiraan waktu balas.
• Pesan di luar jam kerja sudah diatur.
• Bisa dioperasikan dengan keyboard.
• Diuji di minimal dua ponsel berbeda.

Uji, lalu perbaiki

Setelah widget berjalan dua minggu, lihat datanya: berapa pengunjung yang membuka chat, berapa yang menutup sapaan tanpa membalas, dan halaman mana yang paling banyak memicu percakapan. Jika banyak yang langsung menutup sapaan, perlambat waktunya atau ubah kalimatnya. Hubungan antara widget yang baik dan penjualan dibahas di meningkatkan konversi dengan live chat.

Widget terbaik adalah yang tidak disadari pengunjung sampai mereka butuh, lalu terasa sangat membantu saat dipakai.

Pertanyaan yang sering diajukan

Di mana posisi terbaik widget live chat?

Pojok kanan bawah adalah posisi yang paling dikenal pengunjung. Pastikan tidak menutupi tombol beli, tombol kembali ke atas, atau banner cookie.

Apakah widget chat sebaiknya langsung terbuka otomatis?

Sebaiknya tidak. Biarkan widget tertutup, lalu tampilkan sapaan kecil setelah pengunjung menunjukkan minat, misalnya setelah beberapa detik di halaman produk.

Warna widget chat sebaiknya apa?

Gunakan warna brand yang cukup kontras dengan latar website agar mudah ditemukan, tapi jangan warna peringatan seperti merah menyala yang terkesan darurat.