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

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

แพลตฟอร์ม:

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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"
Click "Publish" to apply changes to your live store

หมายเหตุ: หากคุณต้องการแชทบอทในทุกหน้า คุณต้องเพิ่มลงในส่วนทั่วไปเช่นส่วนท้าย วิธี 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" เพื่อใช้การเปลี่ยนแปลงกับร้านค้าที่เผยแพร่

เอกสาร