> For the complete documentation index, see [llms.txt](https://help.zaapi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.zaapi.com/th/integrations/website-chat-widget/install-the-chat-widget-on-your-website.md).

# ติดตั้งวิดเจ็ตแชตบนเว็บไซต์

### การติดตั้ง Zaapi Chat Widget บนเว็บไซต์

คู่มือนี้อธิบายขั้นตอนการเพิ่ม Zaapi Chat Widget ลงในเว็บไซต์อย่างละเอียด หลังจากตั้งค่ารูปลักษณ์และเนื้อหาของวิดเจ็ตแล้ว ต้องนำโค้ดเฉพาะของวิดเจ็ตไปฝังใน HTML ของเว็บไซต์

ขั้นตอนแรก: รับโค้ดสั้น

ก่อนเริ่มใช้งาน ต้องมีโค้ดเฉพาะของวิดเจ็ต

1. ในบัญชี Zaapi ไปที่ การตั้งค่า > การเชื่อมต่อ
2. เลือก Chat Widget ที่ตั้งค่าไว้แล้ว
3. ไปที่แท็บ Install
4. คลิกปุ่ม Copy code เพื่อคัดลอกโค้ดทั้งหมดไปยังคลิปบอร์ด

จากนั้นทำตามคำแนะนำด้านล่างตามแพลตฟอร์มเว็บไซต์ที่ใช้งาน

***

### สำหรับเว็บไซต์ HTML แบบกำหนดเอง

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

1. เปิดไฟล์เว็บไซต์ในโปรแกรมแก้ไขโค้ด เช่น VS Code, Sublime Text หรือ Notepad++
2. ระบุไฟล์เทมเพลตหลักที่ใช้ในทุกหน้าของเว็บไซต์ โดยทั่วไปคือ `index.html` หรือไฟล์ส่วนท้ายที่ใช้ร่วมกัน เช่น `footer.html`).
3. ในไฟล์นั้น เลื่อนลงไปด้านล่างสุดและค้นหาแท็กปิด `</body>` แท็ก
4. วางโค้ด Zaapi ลงในบรรทัดใหม่ก่อนแท็ก `</body>` แท็ก
5. บันทึกการเปลี่ยนแปลงและอัปโหลดไฟล์ที่อัปเดตไปยังเว็บเซิร์ฟเวอร์ จากนั้นวิดเจ็ตจะแสดงบนเว็บไซต์

***

### สำหรับ Shopify

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

1. **เปิด Shopify Admin**\
   ไปที่แผงผู้ดูแลระบบ Shopify แล้วนำทางไปที่ **ร้านค้าออนไลน์ → ธีม**.
2. **คลิก Customize**\
   ค้นหาธีมที่ใช้งานอยู่ในร้านค้า แล้วคลิก **ปรับแต่ง**.
3. **ไปที่ App Embeds**\
   ในตัวแก้ไข ให้คลิก **ไอคอน App Embeds** (⚙️) ในแถบด้านซ้าย
4. **คัดลอก Widget ID จาก Zaapi**\
   หลังสร้างวิดเจ็ตใน Zaapi แล้ว ให้คลิกแท็บ Install และคัดลอก Widget ID\
   ![](/files/2ca32a2acdd306bd788438e68e6449dcf3ea809d)
5. **วาง Widget ID ใน Shopify เพื่อเปิดใช้งาน**&#x20;
   * ค้นหา **Zaapi Chat Widget** ในรายการ
   * วาง Widget ID ลงในช่อง Widget ID\
     ![](/files/8403834ed625aa417665866881fd41c95e5dee13)
   * สลับสวิตช์ **เปิด** เพื่อเปิดใช้งานบนร้านค้า
6. **ปรับการตั้งค่าวิดเจ็ต (ไม่บังคับ)**\
   สามารถปรับแต่งสี ตำแหน่ง และข้อความเรียกความสนใจของวิดเจ็ตได้โดยตรงใน Zaapi\
   ทำได้ดังนี้:
   * ไปที่ app.zaapi.com บนคอมพิวเตอร์ จากนั้น **การตั้งค่า** → **การเชื่อมต่อ** → **Website Widget**.
   * แก้ไขรูปลักษณ์หรือการตั้งค่าของวิดเจ็ต
   * การเปลี่ยนแปลงจะอัปเดตโดยอัตโนมัติในร้านค้า Shopify
7. **บันทึกธีม**\
   คลิก **บันทึก** ที่มุมขวาบนเพื่อใช้การเปลี่ยนแปลง
8. **ดูตัวอย่างร้านค้า**\
   ไปที่หน้าเว็บไซต์ของร้านค้า — ตอนนี้ควรเห็น **Zaapi Chat Widget** ที่มุมของเว็บไซต์

***

### สำหรับ WordPress

วิธีที่ปลอดภัยที่สุดและแนะนำมากที่สุดสำหรับ WordPress คือการใช้ปลั๊กอินเพื่อเพิ่มชิ้นส่วนโค้ด วิธีนี้ช่วยให้โค้ดวิดเจ็ตไม่ถูกลบเมื่ออัปเดตธีม

แนะนำให้ใช้ปลั๊กอิน "WPCode – Insert Headers and Footers" ซึ่งได้รับความนิยม

1. จากแดชบอร์ดผู้ดูแลระบบ WordPress ไปที่ ปลั๊กอิน > เพิ่มใหม่
2. ในช่องค้นหา พิมพ์ "WPCode" แล้วกด Enter
3. ค้นหาปลั๊กอิน "WPCode – Insert Headers and Footers" จากนั้นคลิก ติดตั้งตอนนี้ และ เปิดใช้งาน
4. เมื่อเปิดใช้งานแล้ว รายการ "Code Snippets" ใหม่จะแสดงในเมนูด้านซ้าย วางเมาส์เหนือรายการนั้น แล้วคลิกที่ ส่วนหัวและส่วนท้าย
5. เลื่อนลงไปที่ส่วนท้าย
6. วางโค้ดของ Zaapi ลงในกล่องข้อความใต้ "Footer"
7. คลิกปุ่ม บันทึกการเปลี่ยนแปลง จากนั้นวิดเจ็ตจะแสดงบนเว็บไซต์ WordPress ทั้งหมด

***

### สำหรับ Webflow

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

1. ใน Webflow Designer ให้คลิกไอคอนเมนู "W" ที่มุมซ้ายบน แล้วเลือกการตั้งค่าไซต์
2. ไปที่แท็บ Custom Code ในเมนูด้านบน
3. เลื่อนลงไปที่ส่วนโค้ดส่วนท้าย
4. วางโค้ดของ Zaapi ลงในกล่องข้อความที่ระบุว่า "เพิ่มโค้ดก่อนแท็กปิด \</body>"
5. คลิกปุ่ม บันทึกการเปลี่ยนแปลง
6. สุดท้าย ให้เผยแพร่ไซต์เพื่อให้การเปลี่ยนแปลงมีผล วิดเจ็ตแชทจะแสดงบนไซต์ Webflow ที่เผยแพร่แล้ว