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

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

แพลตฟอร์ม:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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

ในการเพิ่มแชทบอทลงในทุกหน้าของเว็บไซต์ 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: ยืนยันการติดตั้ง

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

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

การเพิ่มช่องค้นหา AI

ช่องค้นหา AI เป็นวิดเจ็ตแยกต่างหากที่มีโค้ดของตัวเอง จะเพิ่มพร้อมกับแชท หรือเพิ่มเดี่ยว ๆ ก็ได้ ต้องใช้แพ็กเกจ Standard ขึ้นไป หากต่ำกว่านั้น ช่องค้นหาจะปรากฏแต่ไม่แสดงผลลัพธ์

เพิ่มแอตทริบิวต์ data-replace ในแท็กสคริปต์ แล้วช่องค้นหานี้จะเข้าแทนที่ช่องเดิมของธีมคุณ เพิ่มที่ Site Settings, Custom Code, Footer ตำแหน่งเดียวกับโค้ดแชท ซึ่งจะทำให้สคริปต์อยู่ก่อนแท็ก body ปิดพอดี

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

อ่านคู่มือช่องค้นหา AI ฉบับเต็ม