Cara Menambahkan Chatbot AI Asyntai ke OpenCart

Panduan langkah demi langkah untuk situs web OpenCart

Platform:

The Easy Way: Install the Asyntai Extension

We publish a free extension on the OpenCart Marketplace. It puts the chatbot on your storefront and connects your account, and there is no code to copy and no template to edit. It works on OpenCart 3.x and 4.x.

Download Asyntai - AI Chatbot from the OpenCart Marketplace
In your admin panel, go to Extensions → Installer and upload the ZIP file
Go to Extensions → Extensions, choose Modules in the list, find Asyntai AI Chatbot and press the green install button
Press edit, then press Connect to Asyntai. A window opens where you sign in or create an account.

That is all. The chatbot is live on your storefront when the window closes.

Your products, prices and stock

When you connect, the extension also lets Asyntai read your catalogue. Your assistant then answers with the price you charge today and tells shoppers what is in stock, instead of repeating whatever your pages said when they were last read.

Asyntai reads your products through a read-only address on your own store. Every request is signed, and the reply carries the prices a shopper would actually pay, with your tax rules already applied. You can switch this off at any time on the extension's settings screen.

Updating from version 1.0.0? OpenCart clears a module's settings when you uninstall it, so press Connect to Asyntai once after the update. From this version on, updates keep your connection.

Or Add the Code Yourself

Prefer not to install an extension? The rest of this page shows how to add the chatbot by hand. You will not get the catalogue reading this way.

Langkah 1: Dapatkan Kode Embed Anda

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

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

Step 2: Edit Footer Template

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/

Tip: 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:

Go to the 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.

Dokumentasi