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

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

แพลตฟอร์ม:

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

วิธีที่แนะนำคือเพิ่มโค้ดแชทบอทลงในส่วน head ของ page component ของ AEM สำหรับการติดตั้งทั่วทั้งไซต์:

เข้าสู่ระบบ AEM Author instance ของคุณ
ไปที่ CRXDE Lite (โดยทั่วไปอยู่ที่ http://your-aem-instance:4502/crx/de)
ค้นหาเทมเพลต page component ของคุณ (โดยปกติอยู่ใต้ /apps/your-project/components/page)
ค้นหาหรือสร้างไฟล์ head.html หรือ headerlibs.html
เพิ่มโค้ดฝังตัว Asyntai ของคุณลงในไฟล์นี้
คลิก "Save All" ในเมนูด้านบน
จำลองการเปลี่ยนแปลงไปยัง publish instance ของคุณ

เคล็ดลับ: การวางโค้ดในไฟล์ head.html ทำให้แชทบอทปรากฏในทุกหน้าที่ใช้เทมเพลตนั้น นี่คือวิธีที่สะอาดที่สุดสำหรับการติดตั้งทั่วทั้งไซต์

วิธีทางเลือกที่ 1: Client Libraries (ClientLibs)

สำหรับวิธีที่มีโครงสร้างมากขึ้น คุณสามารถใช้ระบบ Client Library ของ AEM:

สร้างโฟลเดอร์ client library ใหม่ใต้ /apps/your-project/clientlibs
ตั้งค่าประเภทโหนด cq:clientLibraryFolder
สร้างไฟล์ js.txt ที่ระบุรายการไฟล์ JavaScript ของคุณ
เพิ่มโค้ดฝังตัว Asyntai ของคุณลงในไฟล์ JavaScript ในโฟลเดอร์นี้
รวม client library ใน page component ของคุณโดยใช้:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

หมายเหตุ: วิธีนี้แนะนำสำหรับโปรเจกต์ที่มีโครงสร้าง ClientLib อยู่แล้วและให้การจัดระเบียบที่ดีกว่าสำหรับการใช้งานขนาดใหญ่

วิธีทางเลือกที่ 2: Tag Management (Adobe Launch)

หากคุณใช้ Adobe Launch (เดิมชื่อ DTM) หรือ tag manager อื่น:

เข้าสู่ระบบ Adobe Experience Platform Launch
ไปที่ property ของคุณ
ไปที่ Rules และสร้างกฎใหม่
ตั้งค่าเหตุการณ์เป็น "Page Bottom" หรือ "DOM Ready"
เพิ่มการดำเนินการ: Custom Code
วางโค้ดฝังตัว Asyntai ของคุณ
บันทึกและเผยแพร่ library

เคล็ดลับ: การใช้ Adobe Launch เป็นวิธีที่ Adobe แนะนำสำหรับการเพิ่มสคริปต์ของบุคคลที่สาม ให้การควบคุมที่ดีกว่า ความสามารถในการทดสอบ และไม่ต้องการการ deploy โค้ด

วิธีทางเลือกที่ 3: Experience Fragment

สำหรับการใช้งานที่ยืดหยุ่นและเป็นมิตรกับผู้เขียน:

ไปที่ Experience Fragments ใน AEM
สร้าง Experience Fragment ใหม่
เพิ่ม Text component หรือ HTML component
สลับไปที่ HTML source mode
วางโค้ดฝังตัว Asyntai ของคุณ
รวม Experience Fragment นี้ในส่วนท้ายของเทมเพลตหน้าของคุณ

สำคัญ: ตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์ AEM ที่เหมาะสมในการแก้ไขเทมเพลตและคอมโพเนนต์ สำหรับ AEM as a Cloud Service การเปลี่ยนแปลงอาจต้องผ่านไปป์ไลน์ CI/CD ของคุณ

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

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

ไม่เห็นวิดเจ็ต? ตรวจสอบคอนโซลเบราว์เซอร์ (F12) สำหรับข้อผิดพลาด JavaScript ยืนยันว่าโค้ดถูก deploy ไปยัง publish instance ของคุณอย่างถูกต้อง สำหรับ AEM as a Cloud Service ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงของคุณผ่านไปป์ไลน์การ deploy สำเร็จ