ติดตั้งวิดเจ็ตแชทของ Zaapi บนเว็บไซต์ของคุณ

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

สำหรับเว็บไซต์ที่ใช้ HTML ปกติ (Custom HTML Website)

หากเว็บไซต์ของคุณสร้างด้วย HTML ธรรมดา คุณจะต้องแก้ไขไฟล์ต้นฉบับของเว็บไซต์โดยตรง แนะนำให้ส่งโค้ดนี้ให้กับนักพัฒนาเว็บไซต์ของคุณ เขาจะสามารถฝังโค้ดได้ภายในไม่กี่นาที

1. เปิดไฟล์เว็บไซต์ในโปรแกรมแก้ไขโค้ด เช่น VS Code, Sublime Text หรือ Notepad++

2. ค้นหาไฟล์เทมเพลตหลักของเว็บไซต์ (เช่น index.html หรือไฟล์ส่วนท้าย footer.html)

3. เลื่อนลงไปด้านล่างสุดของไฟล์ แล้วหาบรรทัดที่มีแท็ก </body>

4. วางโค้ด Zaapi ของคุณลงบรรทัดใหม่ ก่อนแท็ก </body>

5. บันทึกไฟล์และอัปโหลดกลับไปยังเซิร์ฟเวอร์

6. เมื่อรีเฟรชหน้าเว็บ วิดเจ็ต Zaapi จะปรากฏขึ้นทันที

---

สำหรับ Shopify

คุณสามารถติดตั้ง Zaapi Chat Widget บนร้านค้า Shopify ของคุณได้ง่าย ๆ ผ่านฟีเจอร์ App Embed เมื่อเปิดใช้งานแล้ว ลูกค้าจะสามารถเริ่มแชทกับคุณได้โดยตรงจากหน้าร้าน

1. เข้าสู่ระบบ Shopify Admin ไปที่ Online Store → Themes

2. คลิก Customize เลือกธีมที่ใช้งานอยู่ แล้วกด Customize

3. ไปที่ App Embeds คลิกไอคอน ⚙️ App Embeds ที่แถบด้านซ้าย

4. คัดลอก Widget ID จาก Zaapi

   • ไปที่ Install tab ของ Chat Widget ใน Zaapi

   • คัดลอก Widget ID

5. วาง Widget ID ใน Shopify

   • หา “Zaapi Chat Widget” ในรายการ

   • วาง Widget ID ลงในช่องที่กำหนด

   • เปิดสวิตช์เพื่อเปิดใช้งาน (Toggle ON)

6. ปรับแต่งเพิ่มเติม (ถ้าต้องการ) คุณสามารถแก้ไขสี ตำแหน่ง หรือข้อความเรียก (Callout Message) ได้ที่ Settings → Integrations → Website Widget เมื่อบันทึกการเปลี่ยนแปลงแล้ว ระบบจะอัปเดตอัตโนมัติบนร้านของคุณ

7. บันทึกธีมของคุณ คลิก Save ที่มุมขวาบนเพื่อยืนยัน

8. ดูตัวอย่างร้านค้า เปิดหน้าเว็บไซต์ของคุณ — คุณจะเห็นวิดเจ็ต Zaapi ปรากฏอยู่ที่มุมหน้าจอ

---

สำหรับ WordPress

วิธีที่ปลอดภัยและแนะนำที่สุดคือการใช้ปลั๊กอินสำหรับแทรกโค้ด เช่น WPCode – Insert Headers and Footers เพื่อให้แน่ใจว่าโค้ดของคุณจะไม่หายไปเมื่ออัปเดตธีม

1. จากหน้า Dashboard ของ WordPress ไปที่ Plugins → Add New

2. ค้นหาคำว่า WPCode แล้วกด Enter

3. ติดตั้งและเปิดใช้งานปลั๊กอิน WPCode – Insert Headers and Footers

4. ไปที่เมนูด้านซ้าย Code Snippets → Header & Footer

5. เลื่อนลงไปที่ส่วน Footer

6. วางโค้ด Zaapi ของคุณลงในช่อง “Footer”

7. คลิก Save Changes วิดเจ็ต Zaapi จะปรากฏบนทุกหน้าของเว็บไซต์ WordPress ของคุณ

---

สำหรับ Webflow

Webflow มีส่วนเฉพาะสำหรับเพิ่มโค้ดลงในส่วนท้าย (Footer) ของเว็บไซต์โดยตรง

1. ใน Webflow Designer คลิกไอคอน “W” มุมซ้ายบน แล้วเลือก Site settings

2. ไปที่แท็บ Custom Code

3. เลื่อนลงไปที่ส่วน Footer Code

4. วางโค้ด Zaapi ของคุณในช่อง “Add code before the closing </body> tag”

5. คลิก Save Changes

6. จากนั้นกด Publish เพื่อเผยแพร่เว็บไซต์ เมื่อหน้าเว็บไซต์ถูกอัปเดต วิดเจ็ต Zaapi จะปรากฏอยู่ที่มุมของหน้าจอ