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

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

แพลตฟอร์ม:

ขั้นตอนที่ 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: เพิ่มไปยังเทมเพลต MODX (แนะนำ)

วิธีที่แนะนำในการเพิ่มแชทบอทคือแก้ไขเทมเพลต MODX ของคุณโดยตรงใน MODX Manager:

เข้าสู่ระบบ MODX Manager ของคุณ (แผงควบคุมผู้ดูแล)
ในแถบด้านข้างซ้าย ไปที่ Elements > Templates
เปิดเทมเพลตของเว็บไซต์คุณ (โดยปกติเรียกว่า "BaseTemplate" หรือเทมเพลตที่ใช้งานอยู่)
ค้นหาแท็กปิด </body> ในโค้ดเทมเพลต
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็กปิด </body>
คลิก "Save" เพื่อบันทึกเทมเพลต

<!-- Your existing template content -->

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

เคล็ดลับ: การเพิ่มโค้ดก่อนแท็กปิด </body> ทำให้แชทบอทโหลดหลังจากเนื้อหาหน้าทั้งหมด ซึ่งเป็นตำแหน่งที่แนะนำสำหรับวิดเจ็ตแชทและจะไม่ทำให้หน้าโหลดช้าลง

วิธีทางเลือกที่ 1: การใช้ MODX Chunk

คุณสามารถใช้ MODX Chunk เพื่อเก็บโค้ดฝังตัวแยกต่างหากและนำกลับมาใช้ซ้ำได้:

ใน MODX Manager ไปที่ Elements > Chunks
คลิก "New Chunk" เพื่อสร้าง chunk ใหม่
ตั้งชื่อ chunk เป็น "asyntaiWidget"
วางโค้ดฝังตัว Asyntai ของคุณในพื้นที่เนื้อหา chunk
คลิก "Save"
เปิดเทมเพลตของคุณ (ภายใต้ Elements > Templates)
เพิ่มการเรียก chunk [[$asyntaiWidget]] ก่อนแท็กปิด </body>
บันทึกเทมเพลต

<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

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

วิธีทางเลือกที่ 2: การใช้ MODX System Settings (HTML Head/Footer)

การตั้งค่า MODX บางแบบมี placeholder สำหรับสคริปต์ส่วนท้ายผ่าน System Settings:

ใน MODX Manager ไปที่ System > System Settings
กรองตาม "htmlhead" หรือค้นหาการตั้งค่าระบบแบบกำหนดเองสำหรับสคริปต์ส่วนท้าย
หากการตั้งค่าของคุณมี placeholder สำหรับสคริปต์ส่วนท้าย (เช่น [[++footer_scripts]]) คุณสามารถใช้มันได้
ตั้งค่าระบบเป็นโค้ดฝังตัว Asyntai ของคุณ
ตรวจสอบให้แน่ใจว่า placeholder ที่สอดคล้องกัน [[++footer_scripts]] มีอยู่ในเทมเพลตของคุณก่อนแท็กปิด </body>
บันทึกการตั้งค่าระบบ

<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

หมายเหตุ: วิธีนี้ขึ้นอยู่กับการตั้งค่า MODX ของคุณที่มีการตั้งค่าระบบแบบกำหนดเองสำหรับสคริปต์ส่วนท้าย หากไม่มี คุณสามารถสร้างการตั้งค่าระบบแบบกำหนดเองและอ้างอิงในเทมเพลตโดยใช้ syntax [[++setting_key]]

วิธีทางเลือกที่ 3: การใช้ MODX Plugin (OnWebPagePrerender)

สำหรับวิธีขั้นสูง คุณสามารถสร้าง MODX Plugin ที่ฉีดโค้ดแชทบอทเข้าไปในทุกหน้าโดยอัตโนมัติ:

ใน MODX Manager ไปที่ Elements > Plugins
คลิก "New Plugin" เพื่อสร้าง plugin ใหม่
ตั้งชื่อ plugin เป็น "AsyntaiChatbot"
วางโค้ด PHP ต่อไปนี้ในพื้นที่โค้ด plugin:

$output = &$modx->resource->_output;
$script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
$output = str_replace('</body>', $script . '</body>', $output);

คลิกแท็บ "System Events"
ทำเครื่องหมายในช่องถัดจาก "OnWebPagePrerender" เพื่อเรียกใช้ plugin นี้เมื่อเกิดเหตุการณ์นั้น
คลิก "Save"

สำคัญ: เปลี่ยน YOUR_WIDGET_ID เป็น widget ID จริงของคุณจาก Asyntai Dashboard Plugin นี้จะฉีดสคริปต์แชทบอทเข้าไปในทุกหน้าบนเว็บไซต์ MODX ของคุณโดยอัตโนมัติก่อนที่จะแสดงผล

ขั้นตอนที่ 3: ล้างแคชและยืนยัน

หลังจากเพิ่มโค้ดฝังตัวโดยใช้วิธีใดก็ได้ข้างต้น คุณต้องล้างแคช MODX และตรวจสอบการติดตั้ง:

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณล้างแคช MODX จาก Manage > Clear Cache ใน MODX Manager แล้ว ลองล้างแคชเบราว์เซอร์หรือดูเว็บไซต์ในหน้าต่างไม่ระบุตัวตน หากคุณใช้วิธี Plugin ให้ตรวจสอบว่าเหตุการณ์ระบบ "OnWebPagePrerender" ถูกเลือกสำหรับ plugin ของคุณแล้ว