Cách thêm Chatbot AI Asyntai vào PrestaShop

Nền tảng:

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

Bước 1: Lấy Mã Nhúng của Bạn

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

Bước 2: Sử dụng module Mã tùy chỉnh (Khuyến nghị)

Cách dễ nhất để thêm chatbot là sử dụng module "Mã tùy chỉnh" miễn phí từ marketplace PrestaShop Addons:

1. Đăng nhập vào Back Office PrestaShop
2. Vào Module → Quản lý module
3. Nhấp "Tải lên module" hoặc tìm trên marketplace "Custom Code" hoặc "Header Footer Scripts"
4. Cài đặt một module như "Custom JS and CSS" hoặc tương tự
5. Sau khi cài đặt, vào cấu hình của module
6. Tìm phần "Script chân trang" hoặc "Trước </body>"
7. Dán mã nhúng Asyntai của bạn
8. Nhấp "Save"

Thay thế: Chỉnh sửa mẫu giao diện (PrestaShop 1.7+/8)

Bạn có thể thêm mã trực tiếp vào mẫu chân trang của giao diện:

1. Truy cập các tệp PrestaShop qua FTP hoặc trình quản lý tệp
2. Chuyển đến thư mục giao diện: themes/your_theme/templates/_partials/
3. Mở tệp footer.tpl (hoặc trong một số giao diện, kiểm tra templates/layouts/layout-both-columns.tpl)
4. Tìm thẻ đóng </body> hoặc phần {block name='javascript_bottom'}
5. Dán mã nhúng Asyntai ngay trước thẻ đóng </body>
6. Lưu tệp
7. Xóa bộ nhớ đệm PrestaShop: Tham số nâng cao → Hiệu suất → Xóa bộ nhớ đệm

Thay thế: Sử dụng tệp JavaScript tùy chỉnh của giao diện

Nhiều giao diện PrestaShop bao gồm tệp custom.js cho các đoạn mã của bạn:

1. Chuyển đến: themes/your_theme/assets/js/
2. Tìm tệp có tên custom.js (tạo nếu chưa tồn tại)
3. Thêm mã sau để tải động chatbot:
   (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. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
5. Xóa bộ nhớ đệm PrestaShop

Thay thế: Tạo module đơn giản (Dành cho nhà phát triển)

Dành cho nhà phát triển, bạn có thể tạo module đơn giản sử dụng hook displayFooter:

1. Tạo thư mục: modules/asyntaichatbot/
2. Tạo asyntaichatbot.php với mã này:
   <?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>(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>';
  }
}
3. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
4. Cài đặt module qua Module → Quản lý module

Bước 3: Xác minh Cài đặt

Sau khi lưu các thay đổi và xóa bộ nhớ đệm, hãy truy cập cửa hàng trong tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút tiện ích chat ở góc dưới bên phải. Nhấp vào để đảm bảo nó mở và hoạt động đúng.