Kategori: Communication Channels → Web Widget
Tahap: 🟢 Beginner
Sasaran: 👤 Client & 🛠 Agency Administrator
Masa Membaca: ±12 minit

---

Pengenalan

Selepas memahami cara mereka bentuk dan menyusun Web Widget, sekarang kita masuk satu tahap lebih mendalam:

Apakah sebenarnya yang membentuk sebuah widget?

Web Widget AnyChat tidak sepatutnya dilihat sebagai satu butang chat sahaja.

Sebaliknya, ia boleh terdiri daripada beberapa komponen yang bekerjasama untuk memberikan maklumat, menyediakan pilihan komunikasi dan membawa pelanggan kepada tindakan tertentu.

Cara paling mudah memahaminya ialah seperti membina sebuah Landing Page.

Landing Page mempunyai:

Tajuk → Teks → Gambar → Butang → Borang → CTA

Manakala sebuah Web Widget pula boleh mempunyai elemen seperti:

Header → Message → Channels → Menu → Links → Live Chat → Kandungan tambahan

Setiap elemen mempunyai fungsi tersendiri.

---

🎯 Objektif

Selepas membaca panduan ini, anda akan dapat:

• Memahami konsep komponen dalam Web Widget.
• Mengenali peranan setiap jenis elemen.
• Menentukan komponen yang sesuai berdasarkan tujuan widget.
• Menyusun komponen mengikut perjalanan pelanggan.
• Mengelakkan widget yang terlalu padat atau mengelirukan.

---

🧩 Apa Itu Widget Component?

Widget Component ialah elemen atau blok yang digunakan untuk membentuk pengalaman pengguna di dalam Web Widget.

Bayangkan widget sebagai sebuah rumah.

Rumah bukan hanya mempunyai pintu.

Ia mempunyai:

🏠 Struktur
🚪 Pintu
🪟 Tingkap
🛋️ Ruang
💡 Lampu

Begitu juga Web Widget.

Setiap komponen mempunyai fungsi tertentu, tetapi semuanya digabungkan untuk menghasilkan satu pengalaman yang lengkap.

---

🏗️ Struktur Asas Sebuah Widget

Secara konsep, sebuah widget boleh disusun seperti ini:

┌─────────────────────────────┐
│          HEADER             │
│   Logo / Nama Perniagaan    │
├─────────────────────────────┤
│                             │
│       WELCOME MESSAGE       │
│                             │
├─────────────────────────────┤
│       COMMUNICATION         │
│                             │
│   💬 Live Chat              │
│   📱 WhatsApp               │
│   ✈️ Telegram               │
│                             │
├─────────────────────────────┤
│       QUICK ACTIONS         │
│                             │
│   📚 Knowledge Base         │
│   📢 Announcement           │
│   📅 Booking                │
│                             │
├─────────────────────────────┤
│       OTHER LINKS           │
│                             │
│   🌐 Website                │
│   📸 Instagram              │
└─────────────────────────────┘

Tidak semua widget perlu mempunyai semua bahagian tersebut.

Pilih berdasarkan tujuan.

---

1. 🏷️ Header

Header memberikan identiti kepada widget.

Ia boleh membantu pelanggan memahami siapa yang menyediakan bantuan tersebut.

Contohnya:

ResellerMY Support

atau:

Ada yang boleh kami bantu?

Header yang baik memberikan konteks dengan segera.

---

2. 👋 Welcome Message

Welcome Message digunakan untuk menyambut pelanggan atau menerangkan apa yang boleh dilakukan melalui widget.

Contohnya:

Hai 👋 Selamat datang ke ResellerMY. Pilih salah satu pilihan di bawah untuk mendapatkan bantuan.

Untuk jualan:

Sedang mencari pakej yang sesuai? Kami sedia membantu anda.

Untuk support:

Perlukan bantuan? Cari jawapan dalam Knowledge Base atau hubungi pasukan kami.

Mesej ini tidak perlu panjang.

---

3. 💬 Communication Channels

Ini merupakan antara komponen terpenting dalam AnyChat.

Ia menyediakan cara untuk pelanggan berkomunikasi dengan perniagaan.

Contohnya:

💬 Live Chat
📱 WhatsApp
✈️ Telegram
📧 Email
Messenger
Instagram

Pilihan channel bergantung kepada saluran yang benar-benar digunakan oleh perniagaan.

---

4. 🔘 Button

Button digunakan untuk membawa pengguna kepada sesuatu tindakan.

Contohnya:

Chat Sekarang

atau:

Dapatkan Bantuan

atau:

Hubungi Kami

Button sebaiknya mempunyai satu tujuan yang jelas.

Elakkan label yang terlalu umum seperti:

Click Here

Gunakan label berdasarkan tindakan.

---

5. ☰ Menu

Menu membolehkan beberapa pilihan dikumpulkan secara lebih teratur.

Contohnya:

📚 Knowledge Base
📢 Kemas Kini
🎥 Tutorial
📅 Booking

Menu sangat berguna apabila widget mempunyai beberapa fungsi selain komunikasi.

---

6. 🔗 Quick Links

Quick Links memberikan jalan pintas kepada halaman yang sering diperlukan.

Contohnya:

📚 Pusat Bantuan
📝 Minta Sebut Harga
📅 Buat Tempahan
📍 Lokasi Kami

Konsep ini telah kita bincangkan secara lebih mendalam dalam 2.16 – Quick Links.

---

7. 🌐 External Links

Pautan boleh membawa pelanggan keluar daripada widget kepada perkhidmatan lain.

Contohnya:

Google Maps
Booking System
Customer Portal
Marketplace
Borang
Website

Gunakan label berdasarkan tindakan pelanggan, bukan nama teknologi semata-mata.

---

8. 📱 Social Media Links

Widget juga boleh menjadi pintu masuk kepada platform sosial.

Contohnya:

Facebook
Instagram
TikTok
YouTube
LinkedIn

Tetapi jangan masukkan semua akaun hanya kerana ia wujud.

Utamakan platform yang aktif.

---

9. 📚 Knowledge Base

Knowledge Base ialah salah satu komponen paling berguna untuk customer support.

Ia memberikan pelanggan peluang mendapatkan jawapan sendiri sebelum menghubungi ejen.

Contohnya:

📚 Cari Dalam Pusat Bantuan

Pelanggan boleh mendapatkan panduan berkaitan:

Getting Started
Tutorial
FAQ
Troubleshooting

Ini membantu mengurangkan pertanyaan berulang.

---

10. 📢 Announcement

Announcement pula digunakan untuk maklumat semasa.

Contohnya:

🆕 Feature Baharu
⚠️ Maintenance
🚀 Pelancaran Produk
📅 Perubahan Operasi

Knowledge Base menjawab:

“Bagaimana?”

Announcement pula menjawab:

“Apa yang sedang berlaku?”

---

11. 💬 Live Chat

Live Chat memberikan pelanggan akses kepada perbualan secara langsung.

Ia sesuai apabila masalah tidak dapat diselesaikan melalui Knowledge Base atau pautan bantuan lain.

Strategi yang baik ialah:

Knowledge Base
      ↓
Tidak jumpa jawapan?
      ↓
Live Chat
      ↓
Human Agent

Dengan cara ini, Live Chat digunakan apabila benar-benar diperlukan.

---

12. 🤖 AI Assistance

Jika AI dikonfigurasikan, ia boleh menjadi lapisan bantuan tambahan.

Contoh perjalanan:

Pelanggan bertanya
       ↓
AI cuba membantu
       ↓
Jawapan ditemui
       ↓
Selesai

Jika masih memerlukan bantuan:

AI
 ↓
Live Chat
 ↓
Human Agent

Ini mewujudkan sistem sokongan berlapis.

---

🧠 Component ≠ Channel

Ini penting.

Channel ialah tempat komunikasi berlaku.

Contohnya:

WhatsApp
Telegram
Messenger
Instagram
Live Chat

Manakala Component ialah elemen yang membentuk pengalaman widget.

Contohnya:

Header
Message
Button
Menu
Link
Knowledge Base

Jadi jangan anggap semua perkara dalam widget sebagai “channel”.

---

🧭 Susun Mengikut Customer Journey

Jangan susun komponen secara rawak.

Contoh untuk customer support:

👋 Welcome

      ↓

📚 Knowledge Base

      ↓

🤖 AI Assistance

      ↓

💬 Live Chat

      ↓

📱 WhatsApp

Pelanggan diberikan pilihan bantuan daripada paling mudah kepada bantuan manusia.

---

💼 Susunan Untuk Sales

Untuk sales, susunannya mungkin:

👋 Welcome

      ↓

🛠 Perkhidmatan

      ↓

💼 Portfolio

      ↓

💰 Pakej

      ↓

📝 Minta Sebut Harga

      ↓

💬 WhatsApp Sales

Tujuannya berbeza.

Sebab itu widget tidak patut menggunakan satu template untuk semua website.

---

🌍 Contoh ResellerMY

Sebagai contoh, widget ResellerMY boleh dibina seperti:

👋 Selamat Datang ke ResellerMY

             ↓

📚 Knowledge Base

📢 Kemas Kini

🎥 Video Tutorial

             ↓

💬 Live Chat

📱 WhatsApp

             ↓

🌐 Laman Web ResellerMY

Pelanggan yang mahu belajar boleh menggunakan Knowledge Base.

Pelanggan yang mahu mengetahui perkembangan terkini boleh membuka Kemas Kini.

Pelanggan yang masih memerlukan bantuan boleh menggunakan Live Chat atau WhatsApp.

Satu widget menjadi pusat bantuan lengkap.

---

💡 Tip ResellerMY

Jangan tanya:

“Berapa banyak komponen saya boleh masukkan?”

Tanya:

“Berapa sedikit komponen yang saya perlukan untuk membantu pelanggan mencapai tujuan mereka?”

Ini menghasilkan widget yang jauh lebih kemas.

---

🚀 Pro Tip: Bina Secara Berlapis

Gunakan tiga lapisan:

Lapisan 1 — Self-Service

📚 Knowledge Base
❓ FAQ
🎥 Tutorial

Lapisan 2 — Automated Assistance

🤖 AI
⚙️ Automation

Lapisan 3 — Human Assistance

💬 Live Chat
📱 WhatsApp
📧 Email

Ini boleh menghasilkan sistem bantuan yang lebih scalable apabila jumlah pelanggan meningkat.

---

⚠️ Jangan Gunakan Semua Komponen Sekali Gus

Bayangkan widget mempunyai:

Header
Welcome
Live Chat
WhatsApp
Telegram
Messenger
Instagram
Facebook
Knowledge Base
Announcement
Booking
Maps
Store
YouTube
TikTok
LinkedIn

Walaupun semuanya boleh berguna secara berasingan, gabungan terlalu banyak pilihan boleh menjadikan widget sukar digunakan.

Pilih berdasarkan tujuan.

---

📱 Uji Susunan Pada Mobile

Komponen yang kelihatan kemas pada desktop boleh menjadi terlalu panjang pada telefon.

Uji:

scroll
button
menu
link
text
popup

Pastikan tindakan utama masih mudah dicapai.

---

❌ Kesilapan Lazim

Elakkan:

• Terlalu banyak komponen.
• Semua komponen dianggap sama penting.
• Menu terlalu panjang.
• Label teknikal.
• Welcome Message terlalu panjang.
• Terlalu banyak channel komunikasi.
• Tiada laluan kepada human support.
• Susunan tidak diuji pada mobile.

---

❓ Soalan Lazim

Adakah saya perlu menggunakan semua komponen?

Tidak. Gunakan hanya elemen yang diperlukan.

Apakah komponen paling penting?

Ia bergantung kepada objektif widget. Untuk support, Knowledge Base dan saluran bantuan mungkin penting. Untuk sales, CTA seperti quotation atau WhatsApp mungkin lebih utama.

Adakah channel dan component sama?

Tidak. Channel ialah saluran komunikasi, manakala component ialah elemen yang digunakan untuk membina pengalaman widget.

Bolehkah susunan komponen diubah?

Bergantung kepada fungsi dan konfigurasi yang tersedia dalam AnyChat. Susun berdasarkan keutamaan pelanggan dan uji hasilnya sebelum diterbitkan.

Perlukah AI digunakan dalam semua widget?

Tidak. AI berguna apabila terdapat kes penggunaan yang sesuai. Widget masih boleh berfungsi dengan baik menggunakan Knowledge Base, Live Chat dan saluran komunikasi biasa.

---

📑 Ringkasan

Widget Components ialah blok yang bersama-sama membentuk pengalaman pelanggan.

Secara mudah:

🏷️ Header → identiti
👋 Message → penerangan
💬 Channels → komunikasi
🔘 Button → tindakan
☰ Menu → navigasi
🔗 Links → destinasi
📚 Knowledge Base → bantuan kendiri
📢 Announcement → maklumat semasa
🤖 AI → bantuan automatik
👤 Live Chat → bantuan manusia

Anda tidak perlu menggunakan semuanya.

Widget terbaik ialah widget yang mempunyai komponen yang tepat untuk tujuan yang tepat.

---

📖 Learning Path

✅ 2.21 – Widget Design Ideas: Contoh Susunan Web Widget Mengikut Jenis Perniagaan

✅ 2.22 – Widget Best Practices: Amalan Terbaik Membina Web Widget Yang Profesional

📍 Anda sedang membaca:
2.23 – Widget Components: Memahami Komponen Yang Membina Web Widget AnyChat

➡️ Seterusnya: 2.24 – Dedicated Chat Page: Menyediakan Halaman Chat Khas Untuk Pelanggan