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

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

แพลตฟอร์ม:

ขั้นตอนที่ 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: การใช้โมดูล Header and Footer Scripts (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทคือใช้โมดูล "Header and Footer Scripts":

เข้าสู่ระบบแผงผู้ดูแลระบบ Drupal ของคุณ
ไปที่ Extend และคลิก "Install new module"
Search for "Header and Footer Scripts" or download it from Drupal.org
ติดตั้งและเปิดใช้งานโมดูล
ไปที่ Configuration → Development → Header and Footer Scripts
คลิกที่แท็บ "Footer"
วางโค้ดฝัง Asyntai ของคุณในพื้นที่ข้อความสคริปต์ footer
คลิก "Save configuration"

เคล็ดลับ: การเพิ่มโค้ดลงในส่วน footer ช่วยให้โหลดหลังจากเนื้อหาหน้าเว็บ ซึ่งแนะนำสำหรับวิดเจ็ตแชท

ทางเลือก: แก้ไขเทมเพลตธีม

คุณสามารถเพิ่มโค้ดลงในไฟล์เทมเพลตธีมของคุณโดยตรง:

ไปที่โฟลเดอร์ธีมของคุณ: themes/your_theme/
เปิดไฟล์ html.html.twig (หรือสร้างใหม่ถ้ายังไม่มี)
ค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
บันทึกไฟล์
ล้างแคชของ Drupal: Configuration → Performance → Clear all caches

สำคัญ: การเปลี่ยนแปลงไฟล์ธีมอาจถูกเขียนทับเมื่ออัปเดตธีมของคุณ พิจารณาใช้ child theme หรือโมดูล Header and Footer Scripts สำหรับวิธีที่ถาวรกว่า

ทางเลือก: การใช้ Libraries (สำหรับนักพัฒนา)

สำหรับนักพัฒนาที่ต้องการใช้ระบบ asset library ของ Drupal:

สร้างหรือแก้ไขไฟล์ *.libraries.yml ของธีมคุณ
เพิ่มรายการ library ใหม่:
asyntai-chatbot: js: https://asyntai.com/static/js/chat-widget.js: { type: external, attributes: { async: true, data-asyntai-id: YOUR_WIDGET_ID } }
แนบ library ในไฟล์ *.info.yml ของธีมคุณ:
libraries: - your_theme/asyntai-chatbot
ล้างแคชของ Drupal

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

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