Dokumentasi Widget Embed

🔌 Widget Embed

Pelajari cara embed chatbot di website anda dengan dua pilihan: widget floating atau embedded inline.

Dua Cara Embed

💬

Widget Mode

Butang floating di penjuru skrin. Bila klik, chat window akan terbuka. Sesuai untuk kebanyakan website.

  • ✅ Tidak ganggu content
  • ✅ Pelawat boleh minimize
  • ✅ Posisi kiri atau kanan
📋

Embedded Mode

Chat window terus embedded dalam page. Sesuai untuk landing page atau halaman sokongan khusus.

  • ✅ Terus visible kepada pelawat
  • ✅ Full width dalam container
  • ✅ Tinggi boleh disesuaikan

Widget Mode (Floating Button)

Kod Asas

Salin kod ini dan tampal sebelum tag </body> di website anda: 

<script 
    src="https://chatbot.com.my/widget/embed.js" 
    data-bot-id="YOUR_BOT_ID"
    data-mode="widget">
</script>
💡 Tip: Ganti YOUR_BOT_ID dengan Bot ID anda. Dapatkan dari halaman Preview di dashboard.

Semua Pilihan

<script 
    src="https://chatbot.com.my/widget/embed.js" 
    data-bot-id="YOUR_BOT_ID"
    data-mode="widget"
    data-position="right"
    data-color="#4F46E5">
</script>

Attributes

Attribute Required Default Keterangan
data-bot-id Ya - ID unik bot anda
data-mode Tidak widget widget atau embedded
data-position Tidak right left atau right
data-color Tidak #4F46E5 Warna tema dalam format hex

Embedded Mode (Inline)

Kod Asas

Untuk embedded mode, anda perlu sediakan container div dan letakkan script selepasnya: 

<!-- Container untuk chat -->
<div id="chatbot-container" style="height: 500px;"></div>

<!-- Script embed -->
<script 
    src="https://chatbot.com.my/widget/embed.js" 
    data-bot-id="YOUR_BOT_ID"
    data-mode="embedded"
    data-container="chatbot-container">
</script>

Dengan Styling

<!-- Container dengan styling -->
<div id="chatbot-container" style="
    height: 600px;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
"></div>

<script 
    src="https://chatbot.com.my/widget/embed.js" 
    data-bot-id="YOUR_BOT_ID"
    data-mode="embedded"
    data-container="chatbot-container"
    data-color="#10B981">
</script>

Attributes Tambahan

Attribute Required Default Keterangan
data-container Ya (untuk embedded) - ID element container

Troubleshooting

  • Pastikan Bot ID betul
  • Pastikan script diletakkan sebelum </body>
  • Pastikan domain anda sudah di-whitelist
  • Check Console browser untuk error

Error ini muncul bila domain website anda tidak dalam senarai domain dibenarkan:

  1. Login ke dashboard
  2. Pergi ke Edit Bot
  3. Tambah domain anda di bahagian Domain Dibenarkan
  4. Klik Simpan
  • Pastikan ID container sama dengan data-container
  • Pastikan container mempunyai height (contoh: height: 500px)
  • Pastikan script diletakkan SELEPAS container div
📋

Dapatkan Kod Embed Anda

Cara paling mudah adalah dapatkan kod embed terus dari dashboard dengan Bot ID sudah diisi.

Pergi ke Dashboard