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

คู่มือทีละขั้นตอนสำหรับแอป Bubble

แพลตฟอร์ม:

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

Bubble มีวิธีในตัวสำหรับเพิ่มสคริปต์ที่กำหนดเองผ่านการตั้งค่าแอป:

เข้าสู่ระบบตัวแก้ไขแอป Bubble ของคุณ
ไปที่ Settings ในแถบด้านข้างซ้าย
คลิกแท็บ "Web App"
เลื่อนลงไปที่ "Advanced Settings"
ค้นหาส่วน "Custom headers and body"
วางโค้ดฝังตัว Asyntai ของคุณในฟิลด์ "Script in body"
Deploy แอปของคุณ

เคล็ดลับ: การเพิ่มโค้ดลงในฟิลด์ body script ทำให้แน่ใจว่าโหลดในทุกหน้าของแอป Bubble ซึ่งเป็นวิธีที่แนะนำสำหรับวิดเจ็ตแชท ฟีเจอร์นี้พร้อมใช้งานในทุกแผนของ Bubble รวมถึง Free

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

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

ในตัวแก้ไข Bubble เปิดหน้าที่คุณต้องการแชทบอท
เพิ่มองค์ประกอบ HTML ลงในหน้าของคุณ
วางโค้ดฝังตัว Asyntai ลงในองค์ประกอบ
Deploy แอปของคุณ

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

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

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

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

เอกสาร

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

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

ขั้นตอนที่ 2: ใช้การตั้งค่าแอป (แนะนำ)

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

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