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

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

แพลตฟอร์ม:

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

Backdrop CMS ใช้ไฟล์เทมเพลต .tpl.php ในธีม วิธีที่แนะนำคือเพิ่มโค้ดฝังตัวลงในเทมเพลตหน้าของธีมที่ใช้งานอยู่โดยตรง:

เข้าถึงการติดตั้ง Backdrop CMS ของคุณผ่าน FTP หรือ File Manager
ไปที่ไดเรกทอรีธีมที่ใช้งานอยู่: themes/yourtheme/
เปิดไฟล์ page.tpl.php (หรือ layout.tpl.php ขึ้นอยู่กับธีมของคุณ)
ค้นหาแท็กปิด </body> หรือบรรทัด <?php print $page_bottom; ?>
วางโค้ดฝังตัว Asyntai ของคุณก่อนบรรทัดนั้น
บันทึกไฟล์

<!-- Asyntai AI Chatbot -->
<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>
<?php print $page_bottom; ?>
</body>

เคล็ดลับ: การวางโค้ดก่อน <?php print $page_bottom; ?> หรือแท็กปิด </body> ทำให้แชทบอทโหลดหลังจากเนื้อหาหน้า ให้ประสิทธิภาพการโหลดหน้าที่ดีขึ้น วิธีนี้จะเพิ่มแชทบอทลงในทุกหน้าที่ใช้ธีมนี้โดยอัตโนมัติ

วิธีทางเลือกที่ 1: ใช้โมดูลที่กำหนดเอง

คุณสามารถสร้างโมดูล Backdrop CMS อย่างง่ายที่ฉีดสคริปต์แชทบอทโดยใช้ backdrop_add_js():

สร้างไดเรกทอรีโมดูล: modules/custom/asyntai_widget/
สร้างไฟล์โมดูล asyntai_widget.module ด้วยโค้ดต่อไปนี้:
// modules/custom/asyntai_widget/asyntai_widget.module function asyntai_widget_init() { backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array( 'type' => 'external', 'scope' => 'footer', 'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'), )); }
สร้างไฟล์ asyntai_widget.info:
name = Asyntai AI Chatbot Widget description = Adds the Asyntai AI chatbot widget to all pages. backdrop = 1.x package = Custom type = module
ไปที่ Functionality (admin/modules) ในแผงผู้ดูแลระบบ Backdrop ของคุณ
ค้นหา "Asyntai AI Chatbot Widget" ใต้แพ็คเกจ Custom และเปิดใช้งาน
คลิก "Save configuration"

หมายเหตุ: แทนที่ YOUR_WIDGET_ID ในโค้ดโมดูลด้วย widget ID จริงของคุณจากแดชบอร์ด Asyntai วิธีโมดูลที่กำหนดเองนั้นปลอดภัยจากการอัปเกรดและจะไม่ถูกเขียนทับเมื่ออัปเดตธีม

วิธีทางเลือกที่ 2: ใช้โมดูล "Add to Head" ของ Backdrop

โมดูล "Add to Head" ที่มีผู้สนับสนุนให้วิธีง่ายๆ ในการฉีดสคริปต์โดยไม่ต้องแก้ไขโค้ด:

Download and install the "Add to Head" contributed module from the Backdrop CMS website
ไปที่ Configuration > Development > Add to Head
เพิ่มโค้ดฝังตัว Asyntai ของคุณในส่วน footer
คลิก "Save configuration"

เคล็ดลับ: การใช้โมดูล "Add to Head" เป็นวิธีที่ง่ายที่สุดหากคุณไม่ต้องการแก้ไขไฟล์ธีมหรือสร้างโมดูลที่กำหนดเอง มีอินเทอร์เฟซผู้ดูแลระบบอย่างง่ายสำหรับจัดการสคริปต์ที่ฉีด

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

ระบบเลย์เอาต์และบล็อกของ Backdrop CMS ยังสามารถใช้เพิ่มแชทบอทได้:

เข้าสู่ระบบแผงผู้ดูแลระบบ Backdrop CMS ของคุณ
ไปที่ Structure > Layouts
เลือกเลย์เอาต์ที่คุณต้องการแก้ไข (เช่น เลย์เอาต์เริ่มต้น)
คลิก "Add block" ในส่วน footer
เลือก "Custom block"
ตั้งค่ารูปแบบบล็อกเป็น "Full HTML" หรือ "Raw HTML"
วางโค้ดฝังตัว Asyntai ของคุณลงในเนื้อหาบล็อก
ตั้งชื่อบล็อก (เช่น "Asyntai Chatbot") และเลือกทำเครื่องหมาย "Hide title" ตามต้องการ
คลิก "Save block" จากนั้น "Save layout"

สำคัญ: ตรวจสอบให้แน่ใจว่ารูปแบบข้อความถูกตั้งค่าเป็น "Full HTML" หรือ "Raw HTML" เพื่อไม่ให้แท็กสคริปต์ถูกลบออก รูปแบบ "Filtered HTML" เริ่มต้นจะลบแท็กสคริปต์ออกด้วยเหตุผลด้านความปลอดภัย

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

หลังจากทำการเปลี่ยนแปลง ล้างแคชของ Backdrop CMS และยืนยันการติดตั้ง:

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณล้างแคชของ Backdrop CMS ที่ Configuration > Performance แล้ว ลองดูเว็บไซต์ในหน้าต่างไม่ระบุตัวตนหรือล้างแคชเบราว์เซอร์ เปิดคอนโซลเบราว์เซอร์ (F12) เพื่อตรวจสอบข้อผิดพลาด JavaScript หากคุณใช้วิธีโมดูลที่กำหนดเอง ตรวจสอบว่าโมดูลเปิดใช้งานอยู่ใต้ Functionality