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

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

แพลตฟอร์ม:

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

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

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

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

ใช้ WPCode (Free)

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

ใช้ Insert Headers and Footers

ไปที่ Plugins → Add New ในแผงควบคุม WordPress ของคุณ
ค้นหา "Insert Headers and Footers" โดย WPBeginner
ติดตั้งและเปิดใช้งานปลั๊กอิน
ไปที่ Settings → Insert Headers and Footers
วางโค้ดฝังของ Asyntai ในกล่อง "Scripts in Footer"
คลิก "Save"

ทำไมต้องใช้ปลั๊กอิน? การใช้ปลั๊กอินช่วยให้โค้ดของคุณคงอยู่แม้ว่าคุณจะอัปเดตหรือเปลี่ยนธีม 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 อื่นๆ) Theme File Editor ได้ย้ายไปแล้ว:

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

หมายเหตุ: ธีมบล็อกบางตัวไม่มีไฟล์ footer.php ในกรณีนั้น ให้ใช้วิธีปลั๊กอิน (WPCode) ซึ่งใช้ได้กับธีมทุกประเภท

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

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

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

Elementor Pro

ไปที่ Elementor → Custom Code
คลิก "Add New"
ตั้งชื่อ เช่น "Asyntai Chatbot"
ตั้งค่า Location เป็น "Before </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 ในแท็กสคริปต์ แล้วช่องค้นหานี้จะเข้าแทนที่ช่องเดิมของธีมคุณ เพิ่มด้วยปลั๊กอินส่วนหัวและส่วนท้ายตัวเดียวกับที่ใช้กับโค้ดแชท เช่น Code Snippets หรือ Insert Headers and Footers สคริปต์ไม่จำเป็นต้องอยู่ใกล้ช่องค้นหา คุณจึงไม่ต้องแก้ไขไฟล์ธีมใด ๆ

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

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

เอกสาร