วิธีเพิ่มแชทบอท AI Asyntai ไปยัง Adobe Commerce (Magento)

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ Magento

แพลตฟอร์ม:

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

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

<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: การใช้ Page Builder (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทคือการใช้บล็อก HTML Code ของ Page Builder:

เข้าสู่ระบบแผงควบคุม Magento Admin ของคุณ
ไปที่ Content → Pages
แก้ไขหน้า Home ของคุณ (หรือหน้าใดก็ได้ที่คุณต้องการแชทบอท)
ใน Page Builder ลาก element "HTML Code" ไปวางบนหน้า
วางโค้ดฝังตัว Asyntai ของคุณ
คลิก "Save"
ล้างแคช: System → Cache Management → Flush Magento Cache

สำคัญ: การใช้ Page Builder จะเพิ่มโค้ดเฉพาะแต่ละหน้าเท่านั้น สำหรับการติดตั้งทั่วทั้งเว็บไซต์ ให้ใช้วิธี Layout XML ด้านล่าง

ทางเลือก: การใช้ Layout XML (ทุกหน้า)

เพื่อเพิ่มแชทบอทในทุกหน้า ให้สร้างไฟล์ layout ในธีมของคุณ:

นำทางไปยังโฟลเดอร์ธีมของคุณ: app/design/frontend/[Vendor]/[theme]/
สร้างโครงสร้างโฟลเดอร์หากยังไม่มี: Magento_Theme/layout/
สร้างหรือแก้ไขไฟล์ default_head_blocks.xml
เพิ่มโค้ดต่อไปนี้:
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="https://asyntai.com/static/js/chat-widget.js" src_type="url" async="true" data-asyntai-id="YOUR_WIDGET_ID"/> </head> </page>
แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
รัน: bin/magento cache:flush
รัน: bin/magento setup:static-content:deploy -f (หากอยู่ในโหมด production)

ทางเลือก: การใช้ CMS Block

คุณยังสามารถสร้าง CMS block และรวมไว้ในส่วนท้ายของคุณ:

ไปที่ Content → Blocks
คลิก "Add New Block"
ตั้งชื่อเช่น "Asyntai Chatbot"
ตั้ง Identifier เป็น asyntai_chatbot
ในตัวแก้ไขเนื้อหา สลับไปโหมด HTML และวางโค้ดฝังตัวของคุณ
คลิก "Save Block"
เพิ่มบล็อกไปยังเทมเพลตส่วนท้ายของคุณโดยใช้: {{block id="asyntai_chatbot"}}
ล้างแคช

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

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