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

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

แพลตฟอร์ม:

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

ขั้นแรก ไปที่ แดชบอร์ด Asyntai ของคุณ แล้วเลื่อนลงไปที่ส่วน "โค้ดฝัง" คัดลอกโค้ดฝังเฉพาะของคุณ ซึ่งจะมีลักษณะดังนี้:

<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

หากเว็บไซต์ของคุณใช้แพ็กเกจ Squarespace Core, Plus หรือ Advanced (หรือแพ็กเกจ Business หรือ Commerce รุ่นเก่า) คุณสามารถเพิ่มแชทบอทลงในทุกหน้าพร้อมกันได้โดยใช้ Code Injection:

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

หมายเหตุ: ใน Squarespace 7.0 Code Injection อยู่ใน Pages → Website Tools

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

ทางเลือก: ใช้บล็อกโค้ด

หากต้องการเพิ่มแชทบอทเฉพาะบางหน้า คุณสามารถใช้บล็อกโค้ดได้ บล็อกโค้ดจะรัน JavaScript ได้เฉพาะในแพ็กเกจ Core, Plus หรือ Advanced (หรือแพ็กเกจ Business หรือ Commerce รุ่นเก่า) เท่านั้น

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

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

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

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

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

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

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

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

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