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

คู่มือทีละขั้นตอนสำหรับร้านค้า BigCommerce

แพลตฟอร์ม:

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

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>

หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ

ขั้นตอนที่ 2: เลือกวิธีการติดตั้ง

มีหลายวิธีในการเพิ่มวิดเจ็ตแชทลงใน BigCommerce เลือกวิธีที่เหมาะกับคุณที่สุด:

วิธีที่ 1: ใช้ Script Manager (แนะนำ)

Script Manager เป็นวิธีที่ง่ายที่สุดและแนะนำในการเพิ่มสคริปต์ที่กำหนดเองลงในร้านค้า BigCommerce ของคุณ ไม่ต้องมีความรู้ด้านโค้ดและยังคงอยู่เมื่อเปลี่ยนธีม

เข้าสู่ระบบ BigCommerce Control Panel ของคุณ
ไปที่ Storefront → Script Manager
คลิกปุ่ม "Create a Script"
กำหนดค่าสคริปต์ของคุณด้วยการตั้งค่าเหล่านี้:
- Name: Asyntai AI Chatbot
- Description: วิดเจ็ตแชทขับเคลื่อนด้วย AI (ไม่บังคับ)
- Placement: Footer
- Location: All Pages
- Script Category: Functional
- Script Type: Script
ในกล่อง "Script Contents" วางโค้ดฝังตัว Asyntai ของคุณ
คลิก "Save"

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

วิธีที่ 2: ใช้ Page Builder

คุณสามารถใช้ Page Builder ของ BigCommerce เพื่อเพิ่มวิดเจ็ตแชทโดยใช้องค์ประกอบ HTML วิธีนี้มีประโยชน์หากคุณต้องการควบคุมมากขึ้นว่าวิดเจ็ตจะปรากฏที่ไหน

เข้าสู่ระบบ BigCommerce Control Panel ของคุณ
ไปที่ Storefront → My Themes
คลิกปุ่ม "Customize" บนธีมที่ใช้งานอยู่
ในแถบด้านข้างซ้ายของ Page Builder ค้นหาองค์ประกอบ "HTML"
ลากและวางองค์ประกอบ HTML ไปที่ส่วนท้ายของเทมเพลตหน้าของคุณ
คลิกที่องค์ประกอบ HTML และเลือก "Edit HTML"
วางโค้ดฝังตัว Asyntai ของคุณ
คลิก "Save HTML"
คลิก "Publish" เพื่อใช้การเปลี่ยนแปลงกับร้านค้าออนไลน์ของคุณ

หมายเหตุ: หากคุณต้องการแชทบอทในทุกหน้า คุณต้องเพิ่มลงในส่วนทั่วไปเช่นส่วนท้าย วิธี Script Manager ง่ายกว่าสำหรับการติดตั้งทั่วทั้งไซต์

วิธีที่ 3: แก้ไขไฟล์ธีม (Stencil Themes)

สำหรับนักพัฒนาที่ใช้ธีม Stencil คุณสามารถเพิ่มโค้ดลงในไฟล์ธีมโดยตรง วิธีนี้ต้องเข้าถึงไฟล์ซอร์สของธีม

ใช้ BigCommerce Control Panel

ไปที่ Storefront → My Themes
คลิก "Advanced" บนธีมที่ใช้งานอยู่
เลือก "Edit Theme Files"
ไปที่ templates → components → common
เปิด footer.html
เลื่อนลงไปด้านล่างของไฟล์
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็กปิด
คลิก "Save & Apply File"

ใช้ Stencil CLI (การพัฒนาในเครื่อง)

หากคุณกำลังพัฒนาในเครื่องด้วย Stencil CLI:

เปิดไฟล์ในเครื่องของธีมคุณ
ไปที่ templates/components/common/footer.html
เพิ่มโค้ดฝังตัว Asyntai ของคุณก่อนแท็กปิด
พุชการเปลี่ยนแปลงของคุณโดยใช้ stencil push

สำคัญ: การเปลี่ยนแปลงไฟล์ธีมอาจถูกเขียนทับเมื่อคุณอัปเดตธีม สำหรับวิธีแก้ปัญหาถาวรที่คงอยู่เมื่ออัปเดตธีม ใช้วิธี Script Manager

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

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

ไม่เห็นวิดเจ็ต? ล้างแคชเบราว์เซอร์และลองอีกครั้ง หากคุณทำการเปลี่ยนแปลงผ่าน Theme Editor ตรวจสอบให้แน่ใจว่าคุณคลิก "Publish" เพื่อใช้การเปลี่ยนแปลงกับร้านค้าที่เผยแพร่

เอกสาร