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

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

แพลตฟอร์ม:

ขั้นตอนที่ 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: เลือกวิธีการติดตั้ง

มีหลายวิธีในการเพิ่มวิดเจ็ตแชทลงใน WordPress เลือกวิธีที่เหมาะกับคุณมากที่สุด:

วิธีที่ 1: ใช้ปลั๊กอิน (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มวิดเจ็ตแชทคือใช้ปลั๊กอินฟรี "WPCode" (เดิมชื่อ "Insert Headers and Footers")

ใช้ WPCode (Free)

ไปที่ Plugins → Add Plugin ในหน้าผู้ดูแลระบบ WordPress ของคุณ
ค้นหา "WPCode" และติดตั้ง
เปิดใช้งานปลั๊กอิน
ไปที่ Code Snippets → Header & Footer
วางโค้ดฝังของ Asyntai ในส่วน "Footer"
คลิก "Save Changes"

ทำไมต้องใช้ปลั๊กอิน? การใช้ปลั๊กอินช่วยให้โค้ดของคุณคงอยู่แม้ว่าคุณจะอัปเดตหรือเปลี่ยนธีม WordPress

วิธีที่ 2: แก้ไขไฟล์ธีม

คุณสามารถเพิ่มโค้ดลงในไฟล์ธีมของคุณโดยตรง ตำแหน่งของ Theme File Editor ขึ้นอยู่กับเวอร์ชัน WordPress และประเภทธีมของคุณ

สำหรับธีมคลาสสิก

ไปที่ Appearance → Theme File Editor ในแผงควบคุม WordPress ของคุณ
เลือกธีมที่ใช้งานอยู่จากเมนูแบบเลื่อนลง (หากยังไม่ได้เลือก)
ค้นหาและคลิกที่ footer.php ในรายการไฟล์ด้านขวา
เลื่อนลงด้านล่างและค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
คลิก "Update File"

สำหรับธีมบล็อก (ธีม FSE)

ธีมบล็อก (เช่น Twenty Twenty-Four และธีม Full Site Editing อื่นๆ) ไม่มีไฟล์ footer.php และไม่มีแท็ก </body> ในไฟล์ธีม สำหรับธีมบล็อก ให้ใช้วิธีปลั๊กอิน (WPCode) ซึ่งใช้ได้กับธีมทุกประเภท

สำคัญ: การอัปเดตธีมจะเขียนทับการเปลี่ยนแปลงของคุณ สำหรับวิธีแก้ปัญหาถาวร ให้ใช้ธีมย่อยหรือวิธีปลั๊กอินแทน

วิธีที่ 3: ใช้ Elementor

หากคุณใช้ Elementor คุณสามารถเพิ่มโค้ดผ่านฟีเจอร์โค้ดกำหนดเองของ Elementor

Elementor Pro

ไปที่ Elementor → Custom Code
คลิก "Add New"
ตั้งชื่อ เช่น "Asyntai Chatbot"
ตั้งค่า Location เป็น "<body> – End"
วางโค้ดฝังตัว Asyntai ของคุณ
ตั้งค่า Display Conditions เป็น "Entire Site"
คลิก "Publish"

Elementor Free

หากคุณใช้ Elementor เวอร์ชันฟรี ให้ใช้วิธีปลั๊กอินที่อธิบายไว้ด้านบน เนื่องจากการเพิ่มโค้ดกำหนดเองต้องใช้ Elementor Pro

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

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

ไม่เห็นวิดเจ็ต? ล้างแคชเบราว์เซอร์และปลั๊กอินแคช WordPress ทั้งหมด หากคุณใช้ปลั๊กอินแคช เช่น WP Rocket หรือ W3 Total Cache ให้ล้างแคชหลังจากเพิ่มโค้ด

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

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

เพิ่มแอตทริบิวต์ data-replace ในแท็กสคริปต์ แล้วแถบค้นหานี้จะเข้าแทนที่แถบเดิมของธีมคุณ เพิ่มด้วยปลั๊กอินส่วนหัวและส่วนท้ายตัวเดียวกับที่คุณใช้สำหรับโค้ดแชท เช่น WPCode สคริปต์ไม่จำเป็นต้องอยู่ใกล้ช่องค้นหาของคุณ คุณจึงไม่ต้องแก้ไขไฟล์ธีมใดๆ

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

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

เอกสาร