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

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

แพลตฟอร์ม:

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

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

<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: เพิ่มโค้ดไปยังธีม Shopify ของคุณ

ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มแชทบอทไปยังร้านค้า Shopify ของคุณ:

เข้าสู่ระบบแผงควบคุม Shopify Admin ของคุณ
ไปที่ Online Store → Themes
ค้นหาธีมปัจจุบันของคุณและคลิกปุ่ม "..." (สามจุด)
เลือก "Edit code" จากเมนูดรอปดาวน์
ในแถบด้านข้างซ้าย ภายใต้ Layout ให้คลิก theme.liquid
เลื่อนลงเพื่อค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
คลิก "Save" ที่มุมขวาบน

เคล็ดลับ: ใช้ Ctrl+F (Windows) หรือ Cmd+F (Mac) เพื่อค้นหา </body> ในไฟล์ theme.liquid อย่างรวดเร็ว

ทางเลือก: การใช้แอป Shopify

หากคุณไม่ต้องการแก้ไขโค้ด คุณสามารถใช้แอป Shopify เพื่อเพิ่มสคริปต์แบบกำหนดเอง:

ไปที่ Shopify App Store
ค้นหา "Custom Script Injector" หรือ "Header & Footer Scripts"
ติดตั้งแอปที่คุณเลือก
ใช้แอปเพื่อเพิ่มโค้ดฝังตัว Asyntai ของคุณไปยังส่วนท้าย

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

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

ไม่เห็นวิดเจ็ต? Shopify อาจแคชไฟล์ธีมของคุณ ลองเปิดร้านค้าในหน้าต่างเบราว์เซอร์ไม่ระบุตัวตน/ส่วนตัว หรือรอสักครู่แล้วรีเฟรชหน้า

ผู้ใช้ Shopify Plus

หากคุณใช้ Shopify Plus คุณยังสามารถเพิ่มสคริปต์ผ่านไฟล์ checkout.liquid เพื่อแสดงแชทบอทบนหน้าชำระเงิน อย่างไรก็ตาม โปรดทราบว่าร้านค้าส่วนใหญ่ต้องการเฉพาะในหน้าร้านค้าหลักเท่านั้น

การเพิ่มช่องค้นหา AI

ช่องค้นหา AI เป็นวิดเจ็ตแยกต่างหากที่มีโค้ดของตัวเอง จะเพิ่มพร้อมกับแชท หรือเพิ่มเดี่ยว ๆ ก็ได้ ต้องใช้แพ็กเกจ Standard ขึ้นไป หากต่ำกว่านั้น ช่องค้นหาจะปรากฏแต่ไม่แสดงผลลัพธ์

เพิ่มแอตทริบิวต์ data-replace ในแท็กสคริปต์ แล้วแถบค้นหานี้จะเข้าแทนที่แถบเดิมของธีมคุณ วางไว้ใน theme.liquid ก่อนแท็ก body ปิดพอดี ซึ่งเป็นไฟล์เดียวกับโค้ดแชท ธีมของคุณยังคงมีหน้าผลการค้นหาของตัวเอง การกด Enter จึงยังทำงานเหมือนเดิม

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

อ่านคู่มือช่องค้นหา AI ฉบับเต็ม