2.8 Button: Menyesuaikan Ikon dan Kedudukan Web Widget
Kategori: Saluran Komunikasi
Tahap: 🟢 Beginner
👥 Sesuai Untuk:
- 👤 Client / End User
- 🛠 Agency Administrator
📋 Prasyarat:
- ✅ Modul 1 telah selesai
- ✅ Web Widget telah dicipta
- ✅ Akses ke Settings → Widgets → Button
⏱ Masa Membaca: ±12 minit
Pengenalan
Button ialah elemen pertama yang dilihat oleh pengunjung apabila mereka melayari laman web anda.
Walaupun saiznya kecil, button memainkan peranan yang besar dalam menarik perhatian pelanggan dan menggalakkan mereka memulakan perbualan.
Reka bentuk yang sesuai akan membantu widget kelihatan profesional, mudah ditemui dan selari dengan identiti jenama perniagaan anda.
Dalam panduan ini, anda akan mempelajari cara menyesuaikan paparan Button supaya lebih mesra pengguna.
🎯 Objektif
Selepas membaca panduan ini, anda akan dapat:
- Memahami fungsi seksyen Button.
- Menentukan kedudukan widget pada laman web.
- Menyesuaikan rupa ikon mengikut identiti jenama.
- Menghasilkan widget yang jelas tetapi tidak mengganggu pengalaman pelawat.
Apakah Fungsi Button?
Button ialah ikon terapung (floating button) yang dipaparkan pada setiap halaman laman web.
Apabila pengunjung mengklik ikon tersebut, Web Widget akan dibuka dan memaparkan pilihan saluran komunikasi atau ruang Live Chat.
📸 Screenshot Dicadangkan
Paparan tab Button dalam Widget Settings.
Kedudukan Button
Kebanyakan laman web meletakkan widget di salah satu daripada dua lokasi berikut:
- Penjuru kanan bawah (disyorkan)
- Penjuru kiri bawah
Lokasi ini mudah dicapai oleh pengguna tanpa menghalang kandungan utama halaman.
📸 Screenshot Dicadangkan
Contoh pilihan kedudukan Button.
Warna Button
Button biasanya membenarkan anda memilih warna utama.
Gunakan warna yang:
- Selaras dengan identiti jenama.
- Mempunyai kontras yang baik.
- Mudah dilihat pada pelbagai latar belakang.
Sebagai contoh:
- Biru – Korporat
- Hijau – WhatsApp atau perkhidmatan
- Merah – Promosi
- Oren – Mesra dan aktif
Elakkan warna yang terlalu terang sehingga mengganggu pembacaan kandungan laman web.
Ikon Button
Sesetengah tema membenarkan anda memilih ikon yang dipaparkan.
Contohnya:
- 💬 Chat Bubble
- 💬 Message
- 🤖 AI Assistant
- 📞 Contact
Pilih ikon yang mudah difahami oleh pengunjung.
Saiz Button
Button perlu cukup besar untuk mudah diklik, terutamanya pada telefon pintar.
Namun begitu, elakkan saiz yang terlalu besar sehingga menutup kandungan penting atau butang lain di laman web.
Animasi Button
Sesetengah widget menyediakan animasi seperti:
- Pulse
- Bounce
- Glow
Animasi boleh membantu menarik perhatian, tetapi gunakan secara sederhana.
Animasi yang terlalu agresif boleh mengganggu pengalaman pengguna dan menyebabkan laman web kelihatan kurang profesional.
Paparan Pada Peranti Mudah Alih
Pastikan Button diuji pada telefon pintar dan tablet.
Semak perkara berikut:
- Tidak menutup butang menu.
- Tidak menghalang butang WhatsApp atau Call Now yang lain.
- Mudah ditekan menggunakan ibu jari.
- Tidak mengganggu paparan kandungan.
📸 Screenshot Dicadangkan
Paparan widget pada telefon pintar.
Kesilapan Yang Sering Berlaku
❌ Meletakkan Button terlalu hampir dengan butang lain.
❌ Menggunakan warna yang sukar dilihat.
❌ Memilih animasi yang terlalu mengganggu.
❌ Menggunakan ikon yang tidak menggambarkan fungsi komunikasi.
💡 Tip ResellerMY
Untuk kebanyakan laman web pelanggan kami, konfigurasi berikut memberikan hasil yang paling seimbang:
- Kedudukan: Penjuru kanan bawah
- Saiz: Lalai (Default)
- Warna: Mengikut warna jenama
- Animasi: Ringkas atau dimatikan
- Ikon: Chat Bubble
Konfigurasi ini sesuai untuk laman web korporat, landing page dan kebanyakan perniagaan kecil serta sederhana.
🌍 Senario Dunia Sebenar
Sebuah syarikat hartanah menggunakan warna emas sebagai identiti jenama.
Pada mulanya, mereka memilih Button berwarna merah terang kerana lebih menonjol. Namun selepas diuji, warna tersebut kelihatan tidak selari dengan reka bentuk laman web.
Mereka kemudian menukar Button kepada warna emas yang sepadan dengan identiti korporat. Walaupun kurang mencolok, widget kelihatan lebih profesional dan konsisten dengan keseluruhan reka bentuk laman web.
📌 Nota ResellerMY
Reka bentuk Button bukan sekadar elemen hiasan. Ia merupakan titik sentuhan pertama antara pelanggan dan perniagaan anda.
Perubahan kecil seperti warna, kedudukan atau saiz boleh memberi kesan kepada kesediaan pengunjung untuk memulakan perbualan.
❓ Soalan Lazim
Di manakah kedudukan terbaik untuk Button?
Secara umum, penjuru kanan bawah merupakan lokasi yang paling biasa digunakan dan mudah dicapai oleh pengguna.
Adakah saya perlu menggunakan animasi?
Tidak semestinya. Jika laman web anda berkonsep korporat atau profesional, animasi yang minimum atau tanpa animasi sering memberikan pengalaman yang lebih baik.
Bolehkah saya menukar warna Button kemudian?
Ya. Semua tetapan Button boleh dikemas kini pada bila-bila masa tanpa perlu memasang semula widget.
📑 Ringkasan
- Button ialah ikon yang membuka Web Widget.
- Pilih kedudukan yang mudah dicapai tetapi tidak mengganggu kandungan laman web.
- Gunakan warna dan ikon yang selaras dengan identiti jenama.
- Uji paparan pada desktop dan telefon pintar sebelum digunakan secara rasmi.
📖 Learning Path
✅ 2.6 Mengenali Tetapan Web Widget
✅ 2.7 Channels – Memilih Saluran Komunikasi
📍 Anda sedang membaca: 2.8 Button – Menyesuaikan Ikon dan Kedudukan Web Widget
➡️ Seterusnya: 2.9 Menu – Menyusun Pilihan Saluran Komunikasi Dalam Web Widget
