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

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

แพลตฟอร์ม:

ขั้นตอนที่ 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: การใช้โค้ดแบบกำหนดเอง (แนะนำ)

Framer มีฟีเจอร์โค้ดแบบกำหนดเองในตัวที่ทำให้การเพิ่มสคริปต์ง่าย:

เปิดโปรเจกต์ Framer ของคุณ
คลิกไอคอนเฟือง (Site Settings) ที่มุมซ้ายบน
ไปที่ส่วน "Custom Code"
คลิกปุ่ม "Add Script"
วางโค้ดฝัง Asyntai ของคุณในฟิลด์สคริปต์
ตั้งค่าตำแหน่งเป็น "End of <body> tag"
บันทึกและเผยแพร่เว็บไซต์ของคุณ

เคล็ดลับ: การวางสคริปต์ที่ "End of <body> tag" ช่วยให้โหลดหลังจากเนื้อหาหน้าเว็บ ซึ่งแนะนำสำหรับวิดเจ็ตแชทและจะไม่ทำให้หน้าเว็บโหลดช้าลง Framer ยังมีตัวเลือก "Start of <head>" และ "End of <head>" แต่แนะนำให้ใช้ end of body

ทางเลือก: การใช้คอมโพเนนต์โค้ด

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

ใน Framer editor เปิดหน้าที่คุณต้องการแชทบอท
เพิ่มคอมโพเนนต์โค้ดลงบนแคนวาสของคุณ
วางโค้ดฝัง Asyntai ลงในคอมโพเนนต์
วางตำแหน่งในเลย์เอาต์ตามต้องการ

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

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

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

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

เอกสาร

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

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

ขั้นตอนที่ 2: การใช้โค้ดแบบกำหนดเอง (แนะนำ)

ทางเลือก: การใช้คอมโพเนนต์โค้ด

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