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

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

แพลตฟอร์ม:

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

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทในทุกหน้าของเว็บไซต์ Duda คือผ่านการตั้งค่าเว็บไซต์:

เข้าสู่ระบบบัญชี Duda ของคุณและเปิดตัวแก้ไขเว็บไซต์
ในแถบด้านข้างซ้าย คลิก "More" (ไอคอนจุดสามจุด)
คลิก "Settings"
เลื่อนลงและคลิก "Head HTML"
ในฟิลด์ "Body End HTML" วางโค้ดฝัง Asyntai ของคุณ
คลิก "Save"
คลิก "Publish" ที่มุมขวาบนเพื่อให้การเปลี่ยนแปลงของคุณใช้งานจริง

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

วิธีทางเลือกที่ 1: HTML Widget (หน้าเฉพาะ)

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

เปิดหน้าที่คุณต้องการแก้ไขใน Duda editor
ในแถบด้านข้างซ้าย ค้นหา "HTML" ในแผงวิดเจ็ต
ลากและวาง HTML widget ลงในคอลัมน์หรือแถวบนหน้าของคุณ
คลิกที่วิดเจ็ตเพื่อแก้ไข
วางโค้ดฝัง Asyntai ของคุณลงในฟิลด์โค้ด
คลิก "Update"
คลิก "Publish" เพื่อให้การเปลี่ยนแปลงใช้งานจริง

หมายเหตุ: HTML widget อนุญาตให้คุณฝังโค้ดแบบกำหนดเองได้ทุกที่บนหน้าเว็บ ตำแหน่งที่มองเห็นของวิดเจ็ตไม่มีผลต่อตำแหน่งที่แชทบอทปรากฏ - มันจะยังคงแสดงที่มุมขวาล่างตามที่กำหนดค่าไว้

วิธีทางเลือกที่ 2: โหมดนักพัฒนา (ขั้นสูง)

สำหรับผู้ใช้ขั้นสูง คุณสามารถใช้โหมดนักพัฒนาเพื่อเพิ่มโค้ดลงใน HTML โดยตรง:

ใน Duda editor คลิกไอคอน Developer Mode ในแถบด้านบน
คลิก "Site HTML/CSS" เพื่อขยายตัวเลือก
คลิก "body-end.html" จากรายการไฟล์
เลื่อนไปที่บรรทัดสุดท้ายของไฟล์
วางโค้ดฝัง Asyntai ของคุณในบรรทัดใหม่
คลิก "Save"
คลิก "Done" เพื่อออกจากโหมดนักพัฒนา
คลิก "Publish" เพื่อ deploy การเปลี่ยนแปลงของคุณ

สำคัญ: โหมดนักพัฒนาให้คุณเข้าถึง HTML และ CSS ของเว็บไซต์โดยตรง ตรวจสอบให้แน่ใจว่าเพิ่มโค้ดที่ท้ายไฟล์ body-end.html เท่านั้นเพื่อหลีกเลี่ยงการทำลายฟังก์ชันการทำงานของเว็บไซต์ ทดสอบการเปลี่ยนแปลงก่อนเผยแพร่เสมอ

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

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