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

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

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

ขั้นแรก รับโค้ดสไนปเพ็ตของคุณ

ก่อนเริ่มต้น คุณต้องมีโค้ดสไนปเพ็ตเฉพาะของคุณ

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

ตอนนี้ ให้ทำตามคำแนะนำด้านล่างสำหรับแพลตฟอร์มเว็บไซต์เฉพาะของคุณ

***

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

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

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

***

### สำหรับ Shopify

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

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

***

### สำหรับ WordPress

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

เราแนะนำให้ใช้ปลั๊กอินยอดนิยม "WPCode – Insert Headers and Footers"

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

***

### สำหรับ Webflow

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.zaapi.com/th/integrations/website-chat-widget/install-the-chat-widget-on-your-website.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.