Embed Widget di Website
Panduan lengkap cara memasang widget chat X78 Chat di website Anda, termasuk opsi kustomisasi dan platform-specific instructions.
Mendapatkan Kode Embed
Buka Pengaturan Widget
Navigasikan ke menu "Widget" dan pilih widget yang ingin dipasang.
Buka Tab Embed
Di halaman detail widget, klik tab "Embed" atau "Kode Embed".
Salin Kode
Klik tombol "Salin Kode" untuk menyalin kode embed ke clipboard.
Kode Embed Dasar
Berikut adalah format kode embed yang perlu Anda tempelkan di website:
<!-- X78 Chat Widget -->
<script>
(function(w, d, s, c) {
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.async = true;
j.src = 'https://chat.x78.dev/widget.js';
j.setAttribute('data-widget-id', c);
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'YOUR_WIDGET_ID');
</script>
<!-- End X78 Chat Widget -->YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya. ID ini bisa ditemukan di halaman pengaturan widget.
Dimana Meletakkan Kode
Tempelkan kode embed di dalam tag <body> website Anda, idealnya sebelum tag penutup </body>. Ini memastikan widget dimuat setelah konten halaman utama.
<html>
<head>
<!-- Head content -->
</head>
<body>
<!-- Konten website Anda -->
<!-- Letakkan kode X78 Chat di sini, sebelum </body> -->
<script>
(function(w, d, s, c) {
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.async = true;
j.src = 'https://chat.x78.dev/widget.js';
j.setAttribute('data-widget-id', c);
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'YOUR_WIDGET_ID');
</script>
</body>
</html>Panduan per Platform
WordPress
Login ke WordPress Admin
Masuk ke dashboard WordPress Anda.
Buka Theme Editor atau Plugin
Navigasikan ke Appearance > Theme Editor dan edit file footer.php. Atau gunakan plugin seperti "Insert Headers and Footers".
Tempel Kode Embed
Tempelkan kode embed sebelum tag </body> di file footer.php, atau di bagian "Footer Scripts" jika menggunakan plugin.
Simpan Perubahan
Klik "Update File" atau simpan pengaturan plugin.
Shopify
Buka Theme Editor
Di Shopify admin, buka Online Store > Themes > Edit Code.
Edit theme.liquid
Buka file theme.liquid di folder Layout.
Tempel Kode
Tempelkan kode embed sebelum tag </body>.
HTML Statis
Untuk website HTML statis, cukup tempelkan kode embed di setiap halaman HTML sebelum tag </body>. Jika menggunakan template/include system, tempelkan di file template footer.
Single Page Application (React, Vue, Angular)
Untuk SPA, tempelkan kode embed di file index.html utama:
<!-- public/index.html (React) -->
<!-- index.html (Vue) -->
<!-- Tempel sebelum </body> -->
<script>
(function(w, d, s, c) {
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.async = true;
j.src = 'https://chat.x78.dev/widget.js';
j.setAttribute('data-widget-id', c);
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'YOUR_WIDGET_ID');
</script>Opsi Kustomisasi via Kode
Anda dapat menambahkan atribut data untuk kustomisasi tambahan:
| Atribut | Deskripsi | Contoh |
|---|---|---|
data-widget-id |
ID widget (wajib) | "abc123" |
data-position |
Posisi widget | "right" atau "left" |
data-locale |
Bahasa widget | "id" atau "en" |
data-color |
Override warna utama | "#2563eb" |
Verifikasi Pemasangan
Setelah memasang kode embed, lakukan verifikasi:
- Buka website Anda di browser
- Pastikan tombol chat muncul di sudut bawah layar
- Klik tombol chat dan pastikan widget terbuka dengan benar
- Coba kirim pesan tes dan periksa apakah muncul di dashboard X78 Chat
Troubleshooting
Widget Tidak Muncul
- Pastikan kode embed sudah benar dan tidak ada typo
- Periksa apakah
YOUR_WIDGET_IDsudah diganti dengan ID yang benar - Buka browser console (F12) dan cek apakah ada error JavaScript
- Pastikan domain website terdaftar di pengaturan widget
- Coba bersihkan cache browser dan refresh halaman
Widget Tertutup Elemen Lain
Jika widget tertutup oleh elemen website lain, coba tambahkan CSS berikut:
<style>
.x78-chat-widget {
z-index: 99999 !important;
}
</style>