ติดตั้งวิดเจ็ตแชตบนเว็บไซต์
การติดตั้ง Zaapi Chat Widget บนเว็บไซต์
คู่มือนี้อธิบายขั้นตอนการเพิ่ม Zaapi Chat Widget ลงในเว็บไซต์อย่างละเอียด หลังจากตั้งค่ารูปลักษณ์และเนื้อหาของวิดเจ็ตแล้ว ต้องนำโค้ดเฉพาะของวิดเจ็ตไปฝังใน HTML ของเว็บไซต์
ขั้นตอนแรก: รับโค้ดสั้น
ก่อนเริ่มใช้งาน ต้องมีโค้ดเฉพาะของวิดเจ็ต
ในบัญชี Zaapi ไปที่ การตั้งค่า > การเชื่อมต่อ
เลือก Chat Widget ที่ตั้งค่าไว้แล้ว
ไปที่แท็บ Install
คลิกปุ่ม Copy code เพื่อคัดลอกโค้ดทั้งหมดไปยังคลิปบอร์ด
จากนั้นทำตามคำแนะนำด้านล่างตามแพลตฟอร์มเว็บไซต์ที่ใช้งาน
สำหรับเว็บไซต์ HTML แบบกำหนดเอง
หากเว็บไซต์สร้างด้วย HTML มาตรฐาน ต้องแก้ไขไฟล์ต้นฉบับของเว็บไซต์โดยตรง ควรส่งโค้ดสั้นนี้ให้ผู้พัฒนา และสามารถดำเนินการให้ได้ภายในไม่กี่นาที
เปิดไฟล์เว็บไซต์ในโปรแกรมแก้ไขโค้ด เช่น VS Code, Sublime Text หรือ Notepad++
ระบุไฟล์เทมเพลตหลักที่ใช้ในทุกหน้าของเว็บไซต์ โดยทั่วไปคือ
index.htmlหรือไฟล์ส่วนท้ายที่ใช้ร่วมกัน เช่นfooter.html).ในไฟล์นั้น เลื่อนลงไปด้านล่างสุดและค้นหาแท็กปิด
</body>แท็กวางโค้ด Zaapi ลงในบรรทัดใหม่ก่อนแท็ก
</body>แท็กบันทึกการเปลี่ยนแปลงและอัปโหลดไฟล์ที่อัปเดตไปยังเว็บเซิร์ฟเวอร์ จากนั้นวิดเจ็ตจะแสดงบนเว็บไซต์
สำหรับ Shopify
สามารถเพิ่ม Zaapi Chat Widget ลงในร้านค้า Shopify ผ่านฟีเจอร์ App Embed ของ Shopify ได้อย่างง่ายดาย ฟีเจอร์นี้ช่วยแสดงวิดเจ็ตบนหน้าร้าน เพื่อให้ลูกค้าเริ่มแชทได้โดยตรง
เปิด Shopify Admin ไปที่แผงผู้ดูแลระบบ Shopify แล้วนำทางไปที่ ร้านค้าออนไลน์ → ธีม.
คลิก Customize ค้นหาธีมที่ใช้งานอยู่ในร้านค้า แล้วคลิก ปรับแต่ง.
ไปที่ App Embeds ในตัวแก้ไข ให้คลิก ไอคอน App Embeds (⚙️) ในแถบด้านซ้าย
คัดลอก Widget ID จาก Zaapi หลังสร้างวิดเจ็ตใน Zaapi แล้ว ให้คลิกแท็บ Install และคัดลอก Widget ID
วาง Widget ID ใน Shopify เพื่อเปิดใช้งาน
ค้นหา Zaapi Chat Widget ในรายการ
วาง Widget ID ลงในช่อง Widget ID
สลับสวิตช์ เปิด เพื่อเปิดใช้งานบนร้านค้า
ปรับการตั้งค่าวิดเจ็ต (ไม่บังคับ) สามารถปรับแต่งสี ตำแหน่ง และข้อความเรียกความสนใจของวิดเจ็ตได้โดยตรงใน Zaapi ทำได้ดังนี้:
ไปที่ app.zaapi.com บนคอมพิวเตอร์ จากนั้น การตั้งค่า → การเชื่อมต่อ → Website Widget.
แก้ไขรูปลักษณ์หรือการตั้งค่าของวิดเจ็ต
การเปลี่ยนแปลงจะอัปเดตโดยอัตโนมัติในร้านค้า Shopify
บันทึกธีม คลิก บันทึก ที่มุมขวาบนเพื่อใช้การเปลี่ยนแปลง
ดูตัวอย่างร้านค้า ไปที่หน้าเว็บไซต์ของร้านค้า — ตอนนี้ควรเห็น Zaapi Chat Widget ที่มุมของเว็บไซต์
สำหรับ WordPress
วิธีที่ปลอดภัยที่สุดและแนะนำมากที่สุดสำหรับ WordPress คือการใช้ปลั๊กอินเพื่อเพิ่มชิ้นส่วนโค้ด วิธีนี้ช่วยให้โค้ดวิดเจ็ตไม่ถูกลบเมื่ออัปเดตธีม
แนะนำให้ใช้ปลั๊กอิน "WPCode – Insert Headers and Footers" ซึ่งได้รับความนิยม
จากแดชบอร์ดผู้ดูแลระบบ WordPress ไปที่ ปลั๊กอิน > เพิ่มใหม่
ในช่องค้นหา พิมพ์ "WPCode" แล้วกด Enter
ค้นหาปลั๊กอิน "WPCode – Insert Headers and Footers" จากนั้นคลิก ติดตั้งตอนนี้ และ เปิดใช้งาน
เมื่อเปิดใช้งานแล้ว รายการ "Code Snippets" ใหม่จะแสดงในเมนูด้านซ้าย วางเมาส์เหนือรายการนั้น แล้วคลิกที่ ส่วนหัวและส่วนท้าย
เลื่อนลงไปที่ส่วนท้าย
วางโค้ดของ Zaapi ลงในกล่องข้อความใต้ "Footer"
คลิกปุ่ม บันทึกการเปลี่ยนแปลง จากนั้นวิดเจ็ตจะแสดงบนเว็บไซต์ WordPress ทั้งหมด
สำหรับ Webflow
Webflow มีส่วนเฉพาะในการตั้งค่าไซต์สำหรับเพิ่มโค้ดกำหนดเองไปยังส่วนท้ายของเว็บไซต์
ใน Webflow Designer ให้คลิกไอคอนเมนู "W" ที่มุมซ้ายบน แล้วเลือกการตั้งค่าไซต์
ไปที่แท็บ Custom Code ในเมนูด้านบน
เลื่อนลงไปที่ส่วนโค้ดส่วนท้าย
วางโค้ดของ Zaapi ลงในกล่องข้อความที่ระบุว่า "เพิ่มโค้ดก่อนแท็กปิด </body>"
คลิกปุ่ม บันทึกการเปลี่ยนแปลง
สุดท้าย ให้เผยแพร่ไซต์เพื่อให้การเปลี่ยนแปลงมีผล วิดเจ็ตแชทจะแสดงบนไซต์ Webflow ที่เผยแพร่แล้ว
อัปเดตล่าสุด