Cara Menambahkan Chatbot AI Asyntai ke BigCommerce

Panduan langkah demi langkah untuk toko BigCommerce

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: Pilih Metode Instalasi

Ada beberapa cara untuk menambahkan widget obrolan ke BigCommerce. Pilih metode yang paling cocok untuk Anda:

Metode 1: Menggunakan Script Manager (Disarankan)

Script Manager adalah cara termudah dan yang disarankan untuk menambahkan skrip kustom ke toko BigCommerce Anda. Tidak memerlukan pengetahuan coding dan tetap berlaku saat tema berubah.

Masuk ke Panel Kontrol BigCommerce Anda
Buka Storefront → Script Manager
Klik tombol "Create a Script"
Konfigurasi skrip Anda dengan pengaturan berikut:
- Nama: Asyntai AI Chatbot
- Deskripsi: Widget obrolan bertenaga AI (opsional)
- Penempatan: Footer
- Lokasi: Semua Halaman
- Kategori Skrip: Fungsional
- Tipe Skrip: Script
Di kotak "Script Contents", tempel kode embed Asyntai Anda
Klik "Save"

Mengapa menggunakan Script Manager? Skrip yang ditambahkan melalui Script Manager dikelola terpisah dari tema Anda. Skrip tidak akan terpengaruh saat Anda memperbarui atau mengubah tema toko Anda.

Metode 2: Menggunakan Page Builder

Anda dapat menggunakan Page Builder BigCommerce untuk menambahkan widget obrolan menggunakan elemen HTML. Metode ini berguna jika Anda ingin kontrol lebih besar atas di mana widget muncul.

Masuk ke Panel Kontrol BigCommerce Anda
Buka Storefront → My Themes
Klik tombol "Customize" pada tema aktif Anda
Di sidebar kiri Page Builder, temukan elemen "HTML"
Seret dan lepas elemen HTML ke area footer templat halaman Anda
Klik pada elemen HTML dan pilih "Edit HTML"
Tempel kode embed Asyntai Anda
Klik "Save HTML"
Click "Publish" to apply changes to your live store

Catatan: Jika Anda ingin chatbot di semua halaman, Anda perlu menambahkannya ke area global seperti footer. Metode Script Manager lebih mudah untuk instalasi di seluruh situs.

Metode 3: Edit File Tema (Tema Stencil)

Untuk pengembang yang menggunakan tema Stencil, Anda dapat menambahkan kode langsung ke file tema Anda. Ini memerlukan akses ke file sumber tema Anda.

Menggunakan Panel Kontrol BigCommerce

Buka Storefront → My Themes
Klik "Advanced" pada tema aktif Anda
Pilih "Edit Theme Files"
Navigasi ke templates → components → common
Buka footer.html
Gulir ke bagian bawah file
Tempel kode embed Asyntai Anda tepat sebelum tag penutup
Klik "Save & Apply File"

Menggunakan Stencil CLI (Pengembangan Lokal)

Jika Anda mengembangkan secara lokal dengan Stencil CLI:

Buka file lokal tema Anda
Navigasi ke templates/components/common/footer.html
Tambahkan kode embed Asyntai Anda sebelum tag penutup
Push perubahan Anda menggunakan stencil push

Penting: Perubahan file tema mungkin ditimpa saat Anda memperbarui tema. Untuk solusi permanen yang tetap berlaku saat tema diperbarui, gunakan metode Script Manager.

Langkah 3: Verifikasi Instalasi

Setelah menambahkan kode, kunjungi toko BigCommerce Anda di tab browser baru atau jendela penyamaran. Anda seharusnya melihat tombol widget obrolan di pojok kanan bawah toko Anda. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Bersihkan cache browser Anda dan coba lagi. Jika Anda telah melakukan perubahan melalui Theme Editor, pastikan Anda mengklik "Publish" untuk menerapkan perubahan ke toko live Anda.

Dokumentasi