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

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ October 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: เพิ่มไปยังเทมเพลต Layout (แนะนำ)

วิธีที่แนะนำในการเพิ่มแชทบอทคือแก้ไข layout เริ่มต้นของคุณใน October CMS backend:

เข้าสู่ระบบ October CMS backend ของคุณ
ไปที่ CMS > Layouts ในเมนูหลัก
เปิด layout เริ่มต้นของคุณ (โดยปกติคือ default.htm)
ค้นหาแท็กปิด </body> แท็กและ {% scripts %} placeholder
เพิ่มโค้ดฝัง Asyntai ของคุณก่อน {% scripts %} และ </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% scripts %} </body>
คลิก "Save" เพื่อใช้การเปลี่ยนแปลงของคุณ

เคล็ดลับ: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

คุณสามารถใช้ scripts placeholder ของ October CMS เพื่อฉีดแชทบอทจากหน้าหรือ partial:

เปิดหน้าหรือ partial ใดก็ได้ในตัวแก้ไข CMS
เพิ่มโค้ดต่อไปนี้โดยใช้ {% put scripts %} บล็อก:
{% put scripts %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endput %}
แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณจากแดชบอร์ด
คลิก "Save"

หมายเหตุ: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

วิธีทางเลือกที่ 2: การใช้ Component PHP

หากคุณต้องการวิธีเชิงโปรแกรม คุณสามารถเพิ่มสคริปต์แชทบอทผ่าน component แบบกำหนดเอง:

สร้างหรือแก้ไข component ใน October CMS plugin ของคุณ
ในเมธอด onRun() ของ component ให้ใช้เมธอด addJs():
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
ลงทะเบียน component ในหน้าที่คุณต้องการให้แชทบอทปรากฏ

เคล็ดลับ: การใช้ component ให้คุณควบคุมเชิงโปรแกรมว่าแชทบอทจะโหลดเมื่อใดและที่ไหน คุณสามารถเพิ่มตรรกะเงื่อนไขภายใน onRun() เพื่อควบคุมการโหลดตามบทบาทผู้ใช้ ประเภทหน้า หรือเกณฑ์อื่นๆ

วิธีทางเลือกที่ 3: การใช้ Partial

คุณสามารถสร้าง partial ที่นำกลับมาใช้ซ้ำได้สำหรับวิดเจ็ตแชทบอท:

ไปที่ CMS > Partials ใน October CMS backend
คลิก "+ Add" เพื่อสร้าง partial ใหม่
ตั้งชื่อเป็น asyntai-widget.htm
เพิ่มโค้ดฝังตัว Asyntai ของคุณไปยัง partial:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
คลิก "Save"
เปิดเทมเพลต layout ของคุณและรวม partial ก่อน </body>:
{% partial 'asyntai-widget' %}
บันทึก layout

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

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

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณบันทึกการเปลี่ยนแปลงทั้งหมดใน CMS backend แล้ว ล้างแคชเบราว์เซอร์หรือดูในหน้าต่างไม่ระบุตัวตน หากเว็บไซต์ของคุณใช้แคช ให้ล้างแคช October CMS โดยรัน php artisan cache:clear จาก command line หรือใช้ตัวเลือก Settings > System > Clear Cache ใน backend

การเลือก Layout: ตรวจสอบให้แน่ใจว่าหน้าที่คุณต้องการให้แชทบอทปรากฏใช้ layout ที่ถูกต้อง คุณสามารถตรวจสอบว่าหน้าใช้ layout ใดโดยเปิดหน้าใน CMS > Pages และดูที่ดรอปดาวน์ Layout ในการตั้งค่าหน้า