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

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ Concrete CMS (เดิมชื่อ Concrete5)

แพลตฟอร์ม:

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

<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: เพิ่มโค้ดลงในส่วนท้ายธีม (แนะนำ)

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

เข้าถึงการติดตั้ง Concrete CMS ของคุณผ่าน FTP หรือ File Manager
ไปที่ไดเรกทอรี /application/themes/your_theme_name/
ค้นหาและเปิดไฟล์ footer.php (หรือเทมเพลตส่วนท้ายที่เทียบเท่า)
ค้นหาบรรทัดที่มีแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
บันทึกไฟล์และอัปโหลดกลับไปยังเซิร์ฟเวอร์หากแก้ไขในเครื่อง
ล้างแคช Concrete CMS: Dashboard → System & Settings → Clear Cache

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

วิธีทางเลือกที่ 1: บล็อก HTML (ง่ายที่สุดสำหรับผู้ที่ไม่ใช่นักพัฒนา)

หากคุณไม่ต้องการแก้ไขไฟล์ธีม คุณสามารถใช้บล็อก HTML ในตัวของ Concrete CMS:

เข้าสู่ระบบ Concrete CMS Dashboard ของคุณ
ไปที่หน้าที่คุณต้องการเพิ่มแชทบอท
คลิก Edit Page (ไอคอนดินสอในแถบเครื่องมือ)
คลิก Add Block ในพื้นที่ที่คุณต้องการวางโค้ด
ค้นหาและเลือกบล็อก HTML
วางโค้ดฝังตัว Asyntai ของคุณลงในตัวแก้ไข HTML
คลิก Add เพื่อบันทึกบล็อก
คลิก Publish เพื่อทำให้การเปลี่ยนแปลงใช้งานได้

หมายเหตุ: วิธีบล็อก HTML เหมาะสำหรับการเพิ่มแชทบอทลงในหน้าเฉพาะ สำหรับการติดตั้งทั่วทั้งไซต์ คุณจะต้องเพิ่มบล็อก HTML ลงในแต่ละหน้า หรือใช้วิธีส่วนท้ายธีมที่อธิบายด้านบน ตำแหน่งภาพของบล็อกไม่ส่งผลต่อตำแหน่งที่แชทบอทปรากฏ - ยังคงแสดงที่มุมล่างขวา

วิธีทางเลือกที่ 2: ไฟล์ Header ของธีม

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

เข้าถึงไฟล์ Concrete CMS ของคุณผ่าน FTP หรือ File Manager
ไปที่ /application/themes/your_theme_name/
เปิดไฟล์ header.php (หรือ elements/header.php)
ค้นหาแท็กปิด </head>
วางโค้ดฝัง Asyntai ของคุณก่อนแท็ก </head>
บันทึกและอัปโหลดไฟล์
ล้างแคชจากแดชบอร์ด

<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>
</head>

เคล็ดลับ: ตรวจสอบให้แน่ใจว่าได้รวมองค์ประกอบ header ที่จำเป็นโดยใช้ <?php View::element('header_required'); ?> ในไฟล์ header.php ของคุณเพื่อให้ Concrete CMS ทำงานได้อย่างถูกต้อง

วิธีทางเลือกที่ 3: เทมเพลตแบบกำหนดเอง (ขั้นสูง)

สำหรับนักพัฒนาที่ต้องการควบคุมมากขึ้น คุณสามารถสร้างเทมเพลตหน้าแบบกำหนดเอง:

สร้างไฟล์เทมเพลตหน้าใหม่ใน /application/themes/your_theme_name/
หรือคัดลอกเทมเพลตที่มีอยู่ (เช่น default.php) แล้วเปลี่ยนชื่อ
เพิ่มโค้ดฝัง Asyntai ของคุณลงในไฟล์เทมเพลตก่อน </body>
ในแดชบอร์ด Concrete CMS ไปที่ Pages & Themes
คลิกที่ Page Types
เลือกประเภทหน้าที่คุณต้องการใช้เทมเพลตนี้
กำหนดเทมเพลตแบบกำหนดเองของคุณให้กับประเภทหน้า
หน้าทั้งหมดที่ใช้ประเภทหน้านี้จะรวมแชทบอทไว้ด้วย

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

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

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้ล้างแคชของ Concrete CMS แล้ว (Dashboard → System & Settings → Clear Cache) ลองดูเว็บไซต์ของคุณในหน้าต่างส่วนตัว ตรวจสอบว่าคุณได้บันทึกและอัปโหลดการเปลี่ยนแปลงไฟล์ทั้งหมดแล้ว เปิดคอนโซลเบราว์เซอร์ (F12) เพื่อตรวจสอบข้อผิดพลาด JavaScript