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

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

แพลตฟอร์ม:

ขั้นตอนที่ 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: เพิ่มโค้ดผ่านการตั้งค่าเว็บไซต์ (ทุกหน้า)

ในการเพิ่มแชทบอทลงในทุกหน้าของเว็บไซต์ Webflow ของคุณพร้อมกัน:

เข้าสู่ระบบ บัญชี Webflow ของคุณและเลือกโปรเจกต์
คลิก ไอคอนเฟือง (การตั้งค่าเว็บไซต์) ในแถบข้างซ้าย
คลิกที่ "Custom Code" ในเมนูการตั้งค่า
เลื่อนลงไปที่ส่วน "Footer Code" (ก่อนแท็ก </body>)
วางโค้ดฝังตัว Asyntai ของคุณ
คลิก "Save Changes"
เผยแพร่ เว็บไซต์ของคุณเพื่อให้การเปลี่ยนแปลงมีผล

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

ทางเลือก: โค้ดกำหนดเองเฉพาะหน้า

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

เปิดโปรเจกต์ของคุณใน Webflow Designer
คลิก แผงหน้าเว็บ (ไอคอนโฟลเดอร์) ในแถบข้างซ้าย
วางเมาส์เหนือหน้าที่คุณต้องการแก้ไขและคลิก ไอคอนเฟือง
เลื่อนลงไปที่ "Custom Code"
วางโค้ดฝังของ Asyntai ในส่วน "Before </body> tag"
คลิก "Save"
เผยแพร่ เว็บไซต์ของคุณ

ทางเลือก: ใช้องค์ประกอบ Embed

คุณยังสามารถเพิ่มแชทบอทโดยใช้องค์ประกอบ Embed ที่ใดก็ได้บนหน้าเว็บของคุณ:

เปิดโปรเจกต์ของคุณใน Webflow Designer
คลิกปุ่ม "+" เพื่อเปิดแผงเพิ่ม
ค้นหา "Embed" หรือค้นหาภายใต้ Components
ลากองค์ประกอบ Embed ไปยังหน้าเว็บของคุณ
วางโค้ดฝังตัว Asyntai ของคุณในตัวแก้ไขโค้ด
คลิก "Save & Close"
เผยแพร่ เว็บไซต์ของคุณ

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

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

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