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

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

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

เข้าถึงไฟล์โปรเจกต์ Craft CMS ของคุณผ่าน FTP, SSH หรือตัวแก้ไขโค้ดของคุณ
ไปที่ไดเรกทอรี templates/
ค้นหาไฟล์เลย์เอาต์หลักของคุณ (โดยทั่วไปชื่อ _layout.twig, _layout.html หรืออยู่ใน templates/_layouts/)
ค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
บันทึกไฟล์

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

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS มีแท็ก Twig ในตัวสำหรับลงทะเบียน JavaScript:

เปิดเทมเพลตเลย์เอาต์หลักของคุณ
เพิ่มโค้ดต่อไปนี้ก่อนแท็กปิด </body>:
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
บันทึกไฟล์

หมายเหตุ: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

ทางเลือก: สร้างไฟล์ include แยกต่างหาก

เพื่อการจัดระเบียบที่ดีขึ้น ให้สร้างไฟล์ include เฉพาะ:

สร้างไฟล์ใหม่: templates/_includes/chatbot.twig (หรือ .html)
เพิ่มโค้ดฝัง Asyntai ของคุณลงในไฟล์นี้:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
ในเทมเพลตเลย์เอาต์หลักของคุณ ให้รวมไฟล์นี้ก่อน </body>:
{% include '_includes/chatbot' %}
บันทึกทั้งสองไฟล์

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

ทางเลือก: การโหลดแบบมีเงื่อนไข

เพื่อโหลดแชทบอทเฉพาะในหน้าหรือส่วนที่กำหนด:

ในเทมเพลตเลย์เอาต์หรือหน้าของคุณ ให้ใช้เงื่อนไข Twig:
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
หรือตรวจสอบส่วนเฉพาะ:
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

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

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้บันทึกไฟล์เทมเพลตและกำลังแก้ไขเทมเพลตเลย์เอาต์ที่ถูกต้องที่หน้าเว็บของคุณใช้ ล้างแคชเบราว์เซอร์หรือดูในหน้าต่างส่วนตัว หากใช้การแคชเทมเพลต ให้ล้างแคช Craft CMS จากแผงควบคุมภายใต้ Utilities > Clear Caches

ตำแหน่งเทมเพลต: ตำแหน่งเทมเพลต Craft CMS อาจแตกต่างกันขึ้นอยู่กับการตั้งค่าโปรเจกต์ของคุณ ตำแหน่งทั่วไป ได้แก่ templates/_layout.twig, templates/_layouts/main.twig หรือ templates/_base.twig ตรวจสอบเทมเพลตที่มีอยู่เพื่อค้นหาว่าแท็ก </body> ถูกกำหนดไว้ที่ใด