วิธีเพิ่มแชทบอท AI Asyntai ลงใน WooCommerce

แพลตฟอร์ม:

WooCommerce

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: ใช้ปลั๊กอิน (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทลงในร้านค้า WooCommerce ของคุณคือการใช้ปลั๊กอิน header/footer ฟรี:

1. เข้าสู่ระบบ แดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ
2. ไปที่ Plugins → Add New
3. ค้นหา "Insert Headers and Footers" โดย WPCode (หรือปลั๊กอินที่คล้ายกัน)
4. คลิก "Install Now" จากนั้น "Activate"
5. ไปที่ Code Snippets → Header & Footer (หรือหน้าการตั้งค่าของปลั๊กอิน)
6. วางโค้ดฝังของ Asyntai ในส่วน "Footer"
7. คลิก "Save Changes"

ทางเลือก: ใช้ Theme Customizer

ธีม WooCommerce หลายตัวมีตัวเลือกในตัวสำหรับเพิ่มสคริปต์กำหนดเอง:

1. ไปที่ Appearance → Customize
2. ค้นหาส่วนที่ชื่อ "Additional CSS/JS", "Custom Code" หรือ "Footer Scripts"
3. วางโค้ดฝังของ Asyntai ในช่องที่เหมาะสม
4. คลิก "Publish" เพื่อบันทึกการเปลี่ยนแปลงของคุณ

ทางเลือก: แก้ไขไฟล์ธีม (functions.php)

สำหรับนักพัฒนาหรือผู้ที่ถนัดการแก้ไขไฟล์ธีม:

1. ไปที่ Appearance → Theme File Editor
2. เลือกธีมที่ใช้งานอยู่ (หรือควรเลือกธีมย่อย)
3. เปิดไฟล์ functions.php
4. เพิ่มโค้ดต่อไปนี้ที่ท้ายไฟล์:
   function add_asyntai_chatbot() {
  echo '<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>';
}
add_action('wp_footer', 'add_asyntai_chatbot');
5. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
6. คลิก "Update File"

ทางเลือก: Hook เฉพาะของ WooCommerce

ในการโหลดแชทบอทเฉพาะบนหน้า WooCommerce (ร้านค้า, สินค้า, ตะกร้า, ชำระเงิน):

1. เพิ่มโค้ดนี้ลงในไฟล์ functions.php ของธีม:
   function add_asyntai_chatbot_woocommerce() {
  if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) {
    echo '<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>';
  }
}
add_action('wp_footer', 'add_asyntai_chatbot_woocommerce');
2. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
3. บันทึกไฟล์

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

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