วิธีเพิ่มแชทบอท AI Asyntai ไปยัง Squarespace

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

แพลตฟอร์ม:

ขั้นตอนที่ 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: เพิ่มโค้ดโดยใช้ Code Injection (แผน Business และ Commerce)

หากคุณมีแผน Squarespace Business หรือ Commerce คุณสามารถเพิ่มแชทบอทไปยังทุกหน้าพร้อมกันโดยใช้ Code Injection:

เข้าสู่ระบบบัญชี Squarespace ของคุณและเปิดเว็บไซต์
คลิก Settings ในแถบด้านข้างซ้าย
คลิก Advanced
คลิก Code Injection
เลื่อนลงไปที่ส่วน Footer
วางโค้ดฝังตัว Asyntai ของคุณในกล่องข้อความ Footer
คลิก "Save" ที่มุมซ้ายบน

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

ทางเลือก: การใช้ Code Blocks (ทุกแผน)

หากคุณอยู่ในแผน Personal หรือต้องการเพิ่มแชทบอทเฉพาะบางหน้า คุณสามารถใช้ Code Blocks:

เปิดเว็บไซต์ของคุณใน Squarespace Editor
ไปที่หน้าที่คุณต้องการเพิ่มแชทบอท
คลิก "Edit" บนหน้า
วางเมาส์เหนือส่วนและคลิก "+ Add Block"
เลื่อนลงและเลือก "Code"
คลิกไอคอนดินสอเพื่อแก้ไข code block
วางโค้ดฝังตัว Asyntai ของคุณ
คลิกนอก block เพื่อปิดตัวแก้ไข
คลิก "Save" ที่มุมซ้ายบน

สำคัญ: เมื่อใช้ Code Blocks คุณต้องเพิ่มโค้ดในแต่ละหน้าที่คุณต้องการให้แชทบอทปรากฏ สำหรับการติดตั้งทั่วทั้งเว็บไซต์ ให้ใช้วิธี Code Injection ข้างต้น (ต้องมีแผน Business หรือ Commerce)

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

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

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

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

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

เพิ่มแอตทริบิวต์ data-replace ในแท็กสคริปต์ แล้วช่องค้นหานี้จะเข้าแทนที่ช่องเดิมของธีมคุณ เพิ่มที่ Settings, Code Injection, Footer ตำแหน่งเดียวกับโค้ดแชท Squarespace ให้ใช้ Code Injection เฉพาะแพ็กเกจ Business หรือ Commerce เท่านั้น จึงต้องมีแพ็กเกจนี้จึงจะติดตั้งได้

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