Cara Menambahkan Chatbot AI Asyntai ke OpenCart

Panduan langkah demi langkah untuk situs web OpenCart

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: Edit Template Footer (Direkomendasikan)

Cara paling mudah untuk menambahkan chatbot adalah dengan mengedit template footer tema Anda:

Akses file OpenCart Anda melalui FTP atau pengelola file
Navigasi ke template footer tema Anda:
- OpenCart 3.x/4.x: catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x: catalog/view/theme/YOUR_THEME/template/common/footer.tpl
Buka file footer untuk diedit
Temukan tag penutup </body>
Tempel kode embed Asyntai Anda tepat sebelum tag </body>
Simpan file
Bersihkan cache OpenCart: Dashboard → Ikon roda gigi biru (kanan atas) → Refresh atau hapus isi dari system/storage/cache/

Tips: Jika Anda menggunakan tema bawaan, jalurnya adalah catalog/view/theme/default/template/common/footer.twig. Selalu buat cadangan sebelum mengedit file template.

Alternatif: Menggunakan Opsi Kode Kustom Tema

Banyak tema OpenCart modern menyertakan opsi bawaan untuk kode kustom:

Masuk ke Panel Admin OpenCart Anda
Buka Extensions → Themes (atau Extensions → Extensions → Themes)
Klik Edit pada tema aktif Anda
Cari bagian "Custom Code", "Footer Scripts", atau "Custom JavaScript"
Tempel kode embed Asyntai Anda
Klik "Save"
Bersihkan cache

Catatan: Tidak semua tema memiliki opsi ini. Jika tema Anda tidak menyertakan kolom kode kustom, gunakan metode pengeditan template atau instal ekstensi.

Alternatif: Menggunakan Ekstensi Kode Kustom

Anda dapat menginstal ekstensi gratis dari OpenCart Marketplace untuk menambahkan skrip kustom:

Buka OpenCart Marketplace
Cari "Custom Script", "Header Footer Scripts", atau "Custom Code"
Unduh dan instal ekstensi yang sesuai
Di panel admin Anda, buka Extensions → Extensions → Modules
Temukan dan instal modul kode kustom
Konfigurasikan modul dan tempel kode embed Asyntai Anda di bagian footer
Simpan dan bersihkan cache

Penting: Menggunakan ekstensi direkomendasikan daripada mengedit file inti, karena ekstensi tetap bertahan saat pembaruan OpenCart. Ekstensi populer termasuk "Custom Script in Header & Footer" yang tersedia di marketplace.

Alternatif: Menggunakan Metode addScript (Untuk Pengembang)

Untuk pengembang, OpenCart 3.x/4.x menyediakan cara programatik untuk menambahkan skrip:

Buka catalog/controller/common/footer.php
Tambahkan baris berikut sebelum $data['scripts'] = $this->document->getScripts('footer');:
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
Untuk atribut data, Anda perlu memodifikasi footer.twig untuk menyertakannya secara manual, atau menambahkan JavaScript inline setelah loop skrip

Catatan: Agar widget berfungsi dengan benar dengan atribut data, metode template lebih sederhana karena metode addScript tidak mendukung atribut kustom secara langsung.

Langkah 3: Verifikasi Instalasi

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

Tidak melihat widget? Pastikan untuk membersihkan cache OpenCart. Buka panel admin Anda, klik ikon roda gigi biru di pojok kanan atas, dan klik tombol refresh. Coba juga bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika Anda memodifikasi file template yang salah, periksa bahwa tema Anda menggunakan file yang Anda edit.