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

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

แพลตฟอร์ม:

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

เพื่อเพิ่มแชทบอทในทุกหน้าของเว็บไซต์ Kentico พร้อมกัน ให้ใช้วิธี Master Page Template:

เข้าสู่ระบบ Kentico Admin ของคุณและไปที่แอปพลิเคชัน Page templates
ค้นหาและเปิด Master page template (เทมเพลตที่ใช้ในทุกหน้า)
คลิกที่แท็บ Header ในตัวแก้ไขเทมเพลต
ในส่วน header วางโค้ดฝัง Asyntai ของคุณ
หรือเพิ่มโค้ดลงในเลย์เอาต์ของเทมเพลตก่อนแท็กปิด </head>
คลิก Save เพื่อบันทึกการเปลี่ยนแปลง
ล้างแคชเว็บไซต์และตรวจสอบการเปลี่ยนแปลงบนเว็บไซต์จริง

เคล็ดลับ: การใช้ Master Page Template ช่วยให้แชทบอทปรากฏในทุกหน้าที่สืบทอดจากเทมเพลตนี้ นี่เป็นวิธีที่มีประสิทธิภาพที่สุดสำหรับการ deploy ทั่วทั้งเว็บไซต์ใน Kentico

วิธีทางเลือกที่ 1: Page Template Header

หากคุณต้องการเพิ่มแชทบอทเฉพาะในเทมเพลตหน้าบางอย่าง:

ไปที่แอปพลิเคชัน Page templates ใน Kentico Admin
เลือกเทมเพลตหน้าเฉพาะที่คุณต้องการแก้ไข
คลิกที่แท็บ Header
เพิ่มโค้ดฝัง 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>

คลิก Save
หน้าทั้งหมดที่ใช้เทมเพลตนี้จะรวมแชทบอทไว้ด้วย

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

วิธีทางเลือกที่ 2: HEAD HTML Web Part

สำหรับการควบคุมที่ละเอียดขึ้นในหน้าเฉพาะหรือสำหรับ JavaScript ที่สืบทอดได้ข้ามหน้าย่อย:

เปิดหน้าที่คุณต้องการแก้ไขใน Kentico Page editor
เพิ่ม web part ใหม่ลงในหน้า (ควรอยู่ในหน้าหลักสำหรับการสืบทอด)
ค้นหาและเลือก web part HEAD HTML
ในการตั้งค่า web part วางโค้ดฝัง Asyntai ของคุณ
กำหนดค่า web part ให้สืบทอดได้หากคุณต้องการให้หน้าย่อยมีแชทบอท
คลิก OK เพื่อบันทึก web part
บันทึกและเผยแพร่หน้า

เคล็ดลับ: HEAD HTML web part เหมาะสำหรับการเพิ่มโค้ดลงในหน้าหลักที่จะเผยแพร่ไปยังหน้าย่อยทั้งหมดโดยอัตโนมัติ สร้างการติดตั้งทั่วทั้งส่วน

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

สำหรับนักพัฒนาที่ต้องการจัดการสคริปต์เป็นไฟล์:

ในโปรเจกต์ Kentico ของคุณ ไปที่ไดเรกทอรี ~/CMSScripts/Custom/
สร้างไฟล์ JavaScript ใหม่ (เช่น asyntai-widget.js)
เพิ่มโค้ดเพื่อโหลดวิดเจ็ต Asyntai แบบไดนามิก:

(function() {
    var script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.head.appendChild(script);
})();

อ้างอิงไฟล์นี้ใน header ของ Master Page Template:

<script src="~/CMSScripts/Custom/asyntai-widget.js"></script>

สำคัญ: วิธีขั้นสูงนี้ต้องการการเข้าถึงระบบไฟล์และความรู้เกี่ยวกับโครงสร้างไดเรกทอรีของ Kentico ตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์ที่เหมาะสมและทดสอบในสภาพแวดล้อม staging ก่อนเสมอ

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

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

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