Cara Menambahkan Chatbot AI Asyntai ke WooCommerce

Panduan langkah demi langkah untuk toko WooCommerce

Platform:

Langkah 1: Dapatkan Kode Embed Anda

Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Catatan: Kode di atas hanya contoh. Anda harus menyalin kode embed unik Anda sendiri dari Dasbor karena berisi ID widget personal Anda.

Langkah 2: Menggunakan Plugin (Direkomendasikan)

Cara termudah untuk menambahkan chatbot ke toko WooCommerce Anda adalah menggunakan plugin header/footer gratis:

Masuk ke Dashboard Admin WordPress Anda
Buka Plugins → Add New
Cari "Insert Headers and Footers" oleh WPCode (atau plugin serupa)
Klik "Install Now" lalu "Activate"
Buka Code Snippets → Header & Footer (atau halaman pengaturan plugin)
Tempel kode embed Asyntai Anda di bagian "Footer"
Klik "Save Changes"

Tips: Menambahkan kode ke footer memastikan kode dimuat setelah konten toko Anda, yang ideal untuk widget chat dan tidak akan memperlambat pemuatan halaman atau mengganggu fungsionalitas WooCommerce.

Alternatif: Menggunakan Theme Customizer

Banyak tema WooCommerce memiliki opsi bawaan untuk menambahkan script kustom:

Buka Appearance → Customize
Cari bagian bernama "Additional CSS/JS", "Custom Code", atau "Footer Scripts"
Tempel kode embed Asyntai Anda di kolom yang sesuai
Klik "Publish" untuk menyimpan perubahan Anda

Catatan: Tidak semua tema memiliki opsi ini. Jika tema Anda tidak menyertakan kolom script kustom, gunakan metode plugin atau edit file functions.php tema Anda.

Alternatif: Edit File Tema (functions.php)

Untuk developer atau mereka yang nyaman mengedit file tema:

Buka Appearance → Theme File Editor
Pilih tema aktif Anda (atau sebaiknya child theme Anda)
Buka file functions.php
Tambahkan kode berikut di akhir file:
function add_asyntai_chatbot() { echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>'; } add_action('wp_footer', 'add_asyntai_chatbot');
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Klik "Update File"

Penting: Selalu gunakan child theme saat mengedit file tema. Perubahan pada tema induk akan hilang saat Anda memperbarui tema. Jika Anda tidak nyaman mengedit kode, gunakan metode plugin sebagai gantinya.

Alternatif: Hook Khusus WooCommerce

Untuk memuat chatbot hanya di halaman WooCommerce (toko, produk, keranjang, checkout):

Tambahkan kode ini ke file functions.php tema Anda:
function add_asyntai_chatbot_woocommerce() { if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) { echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>'; } } add_action('wp_footer', 'add_asyntai_chatbot_woocommerce');
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Simpan file

Tips: Metode ini berguna jika Anda hanya ingin chatbot AI muncul di halaman toko untuk membantu pelanggan dengan produk dan pesanan, bukan di seluruh website Anda.

Langkah 3: Verifikasi Instalasi

Setelah menyimpan perubahan, kunjungi toko WooCommerce Anda di tab browser baru atau jendela incognito. Anda akan melihat tombol widget chat di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Jika Anda memiliki plugin caching terinstal (seperti WP Super Cache, W3 Total Cache, atau WP Rocket), bersihkan cache terlebih dahulu. Coba juga bersihkan cache browser atau lihat di jendela incognito.