Cara Menambahkan Chatbot AI Asyntai ke PrestaShop

Platform:

PrestaShop

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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:

Langkah 2: Menggunakan Modul Kode Kustom (Direkomendasikan)

Cara termudah untuk menambahkan chatbot adalah menggunakan modul "Custom Code" gratis dari marketplace PrestaShop Addons:

1. Masuk ke Back Office PrestaShop Anda
2. Buka Modules → Module Manager
3. Klik "Upload a module" atau cari di marketplace untuk "Custom Code" atau "Header Footer Scripts\
4. Install a module like "Custom JS and CSS" or similar
5. Setelah terinstal, buka konfigurasi modul
6. Temukan bagian "Footer Scripts" atau "Before </body>"
7. Tempel kode embed Asyntai Anda
8. Klik "Save"

Alternatif: Edit Template Tema (PrestaShop 1.7+/8)

Anda dapat menambahkan kode langsung ke template footer tema Anda:

1. Akses file PrestaShop Anda melalui FTP atau pengelola file
2. Navigasi ke folder tema Anda: themes/your_theme/templates/_partials/
3. Buka file footer.tpl (atau di beberapa tema, periksa templates/layouts/layout-both-columns.tpl)
4. Temukan tag penutup </body> atau bagian {block name='javascript_bottom'}
5. Tempel kode embed Asyntai Anda tepat sebelum tag penutup </body>
6. Simpan file
7. Bersihkan cache PrestaShop: Advanced Parameters → Performance → Clear cache

Alternatif: Menggunakan File JavaScript Kustom Tema

Banyak tema PrestaShop menyertakan file custom.js untuk skrip Anda sendiri:

1. Navigasi ke: themes/your_theme/assets/js/
2. Cari file bernama custom.js (buat jika belum ada)
3. Tambahkan kode berikut untuk memuat chatbot secara dinamis:
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
4. Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
5. Bersihkan cache PrestaShop

Alternatif: Buat Modul Sederhana (Untuk Pengembang)

Untuk pengembang, Anda dapat membuat modul sederhana menggunakan hook displayFooter:

1. Buat folder: modules/asyntaichatbot/
2. Buat asyntaichatbot.php dengan kode ini:
   <?php
class AsyntaiChatbot extends Module {
  public function __construct() {
    $this->name = 'asyntaichatbot';
    $this->version = '1.0.0';
    $this->author = 'Your Name';
    parent::__construct();
    $this->displayName = 'Asyntai Chatbot';
  }
  public function install() {
    return parent::install() && $this->registerHook('displayFooter');
  }
  public function hookDisplayFooter($params) {
    return '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
  }
}
3. Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
4. Instal modul melalui Modules → Module Manager

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.