วิธีเพิ่มแชทบอท AI Asyntai ไปยัง PrestaShop

แพลตฟอร์ม:

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

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

ขั้นแรก ไปที่ แดชบอร์ด Asyntai ของคุณ แล้วเลื่อนลงไปที่ส่วน "โค้ดฝัง" คัดลอกโค้ดฝังเฉพาะของคุณ ซึ่งจะมีลักษณะดังนี้:

ขั้นตอนที่ 2: การใช้โมดูล Custom Code (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทคือใช้โมดูล "Custom Code" ฟรีจาก PrestaShop Addons marketplace:

1. เข้าสู่ระบบ PrestaShop Back Office ของคุณ
2. ไปที่ Modules → Module Manager
3. คลิก "Upload a module" หรือค้นหาใน marketplace สำหรับ "Custom Code" หรือ "Header Footer Scripts
4. ติดตั้งโมดูลเช่น "Custom JS and CSS" หรือที่คล้ายกัน
5. เมื่อติดตั้งแล้ว ไปที่การกำหนดค่าของโมดูล
6. ค้นหาส่วน "Footer Scripts" หรือ "Before </body>"
7. วางโค้ดฝังตัว Asyntai ของคุณ
8. คลิก "Save"

ทางเลือก: แก้ไขเทมเพลตธีม (PrestaShop 1.7+/8)

คุณสามารถเพิ่มโค้ดโดยตรงไปยังเทมเพลตส่วนท้ายของธีม:

1. เข้าถึงไฟล์ PrestaShop ของคุณผ่าน FTP หรือตัวจัดการไฟล์
2. นำทางไปยังโฟลเดอร์ธีมของคุณ: themes/your_theme/templates/_partials/
3. เปิดไฟล์ footer.tpl (หรือในบางธีม ตรวจสอบ templates/layouts/layout-both-columns.tpl)
4. ค้นหาแท็กปิด </body> หรือส่วน {block name='javascript_bottom'}
5. วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็กปิด </body>
6. บันทึกไฟล์
7. ล้างแคช PrestaShop: Advanced Parameters → Performance → Clear cache

ทางเลือก: การใช้ไฟล์ Custom JavaScript ของธีม

ธีม PrestaShop หลายตัวมีไฟล์ custom.js สำหรับสคริปต์ของคุณเอง:

1. นำทางไปยัง: themes/your_theme/assets/js/
2. มองหาไฟล์ชื่อ custom.js (สร้างหากยังไม่มี)
3. เพิ่มโค้ดต่อไปนี้เพื่อโหลดแชทบอทแบบไดนามิก:
   (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. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
5. ล้างแคช PrestaShop

ทางเลือก: สร้างโมดูลอย่างง่าย (สำหรับนักพัฒนา)

สำหรับนักพัฒนา คุณสามารถสร้างโมดูลอย่างง่ายโดยใช้ displayFooter hook:

1. สร้างโฟลเดอร์: modules/asyntaichatbot/
2. สร้าง asyntaichatbot.php พร้อมโค้ดนี้:
   <?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. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
4. ติดตั้งโมดูลผ่าน Modules → Module Manager

ขั้นตอนที่ 3: ยืนยันการติดตั้ง

หลังจากบันทึกการเปลี่ยนแปลงและล้างแคชแล้ว ให้เปิดร้านค้าของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างไม่ระบุตัวตน คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดขึ้นมาและทำงานได้อย่างถูกต้อง