> 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/configure-the-chat-widget.md).

# กำหนดค่าวิดเจ็ตแชท

#### วิธีตั้งค่าและกำหนดค่าวิดเจ็ตแชทบนเว็บไซต์

วิดเจ็ตแชทบนเว็บไซต์ช่วยให้สื่อสารกับผู้เข้าชมบนเว็บไซต์ เก็บข้อมูลผู้สนใจ และให้การช่วยเหลือได้ทันทีจากอินบ็อกซ์ของ Zaapi

คู่มือนี้จะแนะนำขั้นตอนการสร้าง กำหนดค่า และติดตั้งวิดเจ็ตแชทใหม่

***

#### 1. การสร้างวิดเจ็ตแชทใหม่

เริ่มต้นด้วยการสร้างวิดเจ็ตจากการตั้งค่าใน Zaapi

1. ไปที่ Settings ในเมนูหลัก
2. เลือก Integrations
3. เลื่อนลงไปที่ส่วน "Discover" แล้วค้นหาการ์ด Website Chat Widget
4. คลิกปุ่ม + Create เพื่อเริ่มขั้นตอนการตั้งค่า

***

#### 2. การกำหนดค่าวิดเจ็ต

หลังจากสร้างวิดเจ็ตแล้ว ระบบจะพาไปยังหน้ากำหนดค่า หน้านี้มี 4 แท็บหลัก ได้แก่ Appearance, Content & language, Settings และ Install

**A. แท็บลักษณะการแสดงผล**

แท็บนี้ใช้ควบคุมรูปแบบภาพและตำแหน่งการแสดงผลของวิดเจ็ตแชทบนเว็บไซต์

* การออกแบบวิดเจ็ต: เลือกรูปแบบการแสดงผลเมื่อย่อวิดเจ็ต
  * Bubble: ไอคอนวงกลม (ค่าเริ่มต้น)
  * Bar: แถบสี่เหลี่ยมพร้อมข้อความสั้น
* ธีมสี: เลือกสีที่สอดคล้องกับอัตลักษณ์ของแบรนด์ สีที่เลือกจะถูกนำไปใช้กับส่วนหัวและปุ่มของวิดเจ็ต สามารถปรับแต่งสีเพิ่มเติมได้โดยกรอกโค้ด Hex ของแบรนด์
* ตำแหน่งจัดวาง: เลือกให้วิดเจ็ตแสดงทางซ้ายหรือขวาของเว็บไซต์

**B. แท็บเนื้อหาและภาษา**

แท็บนี้ใช้ควบคุมข้อความทั้งหมดที่แสดงในวิดเจ็ต และตั้งค่าหลายภาษา

* เลือกภาษา: วิดเจ็ตสามารถแสดงผลโดยอัตโนมัติตามภาษาของเบราว์เซอร์ผู้เข้าชม คลิกที่ช่องภาษาเพื่อเลือกภาษาที่ต้องการรองรับทั้งหมด
  * สำคัญ: ต้องใส่ข้อความในช่องที่จำเป็นทุกช่องสำหรับทุกภาษาที่เลือก หากมีคำแปลใดขาดหาย จะมีการแจ้งเตือน "This field is required"
* ข้อความป๊อปอัป: ข้อความเชิงรุกที่จะแสดงต่อผู้เข้าชมหลังจากผ่านไประยะเวลาที่กำหนด
  * รูปแบบ: เลือกได้ระหว่าง Message (ป๊อปอัปข้อความที่ปรับแต่งได้), Ice-breaker (รายการคำถามที่คลิกได้) หรือ None
  * หน่วงเวลา: กำหนดจำนวนวินาทีก่อนที่ป๊อปอัปจะแสดง

> เคล็ดลับ: ใช้ Ice-breaker เพื่อทริกเกอร์ Automation สามารถเชื่อม Ice-breaker กับ Automation เฉพาะได้ผ่าน Flow Builder เมื่อผู้เข้าชมคลิก Ice-breaker ระบบสามารถทริกเกอร์โฟลว์อัตโนมัติเพื่อตอบคำถามที่พบบ่อยหรือคัดกรองลีดได้
>
> วิธีตั้งค่า:
>
> 1. ไปที่ส่วน Automations > Flow Builder
> 2. สร้างโฟลว์ใหม่ แล้วเลือกทริกเกอร์ When a customer sends a message
> 3. กำหนดช่องทางเป็น Chat Widget
> 4. เพิ่มเงื่อนไขเพื่อกรองตามเนื้อหาข้อความ
> 5. ตั้งค่าข้อความตัวกรองให้ตรงกับคำถาม Ice-breaker แบบตรงตัว

* หน้าหลัก: นี่คือมุมมองหลักของวิดเจ็ตเมื่อผู้เข้าชมเปิดใช้งาน
  * ส่วนหัว: กำหนด Title และ Subtitle ได้ตามต้องการ
  * ไปที่การปรับแต่งแชท: ปรับแต่ง Title, ข้อความเวลาตอบกลับ และข้อความปุ่ม
* ช่องทางติดต่ออื่น: คลิก + Add channels เพื่อเพิ่มช่องทางติดต่ออื่น เช่น Facebook, Instagram, WhatsApp, Line, Email หรือหมายเลขโทรศัพท์
* ลิงก์ภายนอก: คลิก + Add external links เพื่อพาผู้ใช้งานไปยังหน้าที่เป็นประโยชน์
  * สำหรับแต่ละลิงก์ ต้องระบุ Link label (ข้อความที่จะแสดง) สำหรับแต่ละภาษา และ URL ปลายทาง

**C. แท็บการตั้งค่า**

แท็บนี้รวมการตั้งค่าการทำงานสำหรับการเก็บข้อมูล การปรับแต่ง และพฤติกรรมของวิดเจ็ต

* การตั้งค่าวิดเจ็ต:
  * ชื่อวิดเจ็ต: ชื่อที่จะแสดงด้านบนของวิดเจ็ตเมื่อเริ่มแชทใหม่ ชื่อนี้ลูกค้าจะมองเห็นได้ จึงควรกำหนดให้ถูกต้อง
* การเก็บข้อมูล:
  * เปิดใช้ Collect data before chat starts เพื่อขอข้อมูลติดต่อจากผู้เข้าชม ระบบจะแสดงแบบฟอร์มก่อนส่งข้อความ แนะนำให้ขอข้อมูลติดต่อของลูกค้า เพื่อให้สามารถติดต่อกลับได้อีกครั้งหลังจากจบแชทบนเว็บไซต์
  * ส่วนหัวแบบฟอร์ม: ปรับแต่ง Title และ Subtitle ของแบบฟอร์มเก็บข้อมูล
  * รายละเอียดที่ต้องขอจากผู้เข้าชม: เลือกช่องข้อมูลที่ต้องการแสดง (Name, Email, Phone number) และกำหนดได้ว่าจะให้เป็น Required หรือไม่
  * ฟิลด์เพิ่มเติม: เพิ่มฟิลด์กำหนดเองได้สูงสุด 3 ช่อง เพื่อเก็บข้อมูลที่เฉพาะเจาะจงมากขึ้น
    * ข้อมูลเพิ่มเติมที่เพิ่มเข้ามาจะถูกสร้างเป็น "Note" ในส่วนโน้ตของข้อมูลลูกค้า สามารถใช้ถามคำถามคัดกรองเพิ่มเติมได้ เช่น "หมายเลขสมาชิกคืออะไร" หรือ "ดำเนินการสั่งซื้อทั้งหมดกี่รายการ" เพื่อเก็บข้อมูลเพิ่มเติม
* การปรับแต่งเพิ่มเติม:
  * แสดงหน้าหลัก: หากปิดไว้ ผู้เข้าชมจะไปยังหน้าสนทนาแชทโดยตรง แทนที่จะเห็นหน้าหลักก่อน
  * ปิดใช้งานวิดเจ็ตแชทบนมือถือ: เปิดใช้ตัวเลือกนี้เพื่อซ่อนวิดเจ็ตจากผู้เข้าชมบนอุปกรณ์มือถือ
  * ซ่อน "Powered by Zaapi" บนวิดเจ็ต: ลบแบรนด์ Zaapi ออก (ฟีเจอร์นี้ใช้ได้เฉพาะแผน Advanced)
* อวาตาร์แชท:
  * เลือกภาพที่ลูกค้าจะเห็นในส่วนหัวของแชท
  * แสดงโลโก้: แสดงโลโก้ของธุรกิจตลอดเวลา
  * แสดงเจ้าหน้าที่: แสดงรูปโปรไฟล์ของเจ้าหน้าที่ที่ดูแลบทสนทนา

***

#### 3. การติดตั้งวิดเจ็ตบนเว็บไซต์

หลังจากกำหนดค่าและบันทึกวิดเจ็ตเรียบร้อยแล้ว ขั้นตอนสุดท้ายคือการเพิ่มวิดเจ็ตลงในเว็บไซต์

1. ไปที่แท็บ Install
2. ภายใต้ "1. Copy this code" ให้คลิกปุ่มคัดลอกโค้ด เพื่อคัดลอก JavaScript snippet เฉพาะสำหรับวิดเจ็ตนี้
3. วางโค้ด snippet นี้ลงในซอร์สโค้ด HTML ของเว็บไซต์ โดยวางไว้ก่อนแท็กปิด `</body>` แท็กนั้นจะช่วยให้วิดเจ็ตโหลดในทุกหน้าของเว็บไซต์
4. เผยแพร่การเปลี่ยนแปลงบนเว็บไซต์ แล้ววิดเจ็ตแชทจะพร้อมใช้งาน

> ต้องการความช่วยเหลือ? สำหรับคำแนะนำแบบละเอียดตามแพลตฟอร์ม ให้ใช้คู่มือแบบทีละขั้นตอนที่ลิงก์ไว้ด้านล่างของหน้า Install สำหรับบริการอย่าง Shopify, WordPress, Webflow และอื่นๆ