> 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. ไปที่การตั้งค่าในเมนูหลัก
2. เลือกการเชื่อมต่อ
3. เลื่อนลงไปที่ส่วน "Discover" แล้วค้นหาการ์ด Website Chat Widget
4. คลิกปุ่ม + Create เพื่อเริ่มกระบวนการตั้งค่า

***

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

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

**A. แท็บ Appearance**

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

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

**B. แท็บ Content & language**

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

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

> เคล็ดลับระดับ Pro: เรียกใช้ ระบบอัตโนมัติ ด้วย Ice-breakers สามารถเชื่อมโยง Ice-breakers กับระบบอัตโนมัติเฉพาะได้โดยใช้ Flow Builder เมื่อผู้เข้าชมคลิก Ice-breaker ระบบสามารถทริกเกอร์โฟลว์โดยอัตโนมัติเพื่อตอบคำถามที่พบบ่อยหรือคัดกรองลีด
>
> วิธีตั้งค่า:
>
> 1. ไปที่ส่วน ระบบอัตโนมัติ > Flow Builder
> 2. สร้างโฟลว์ใหม่ และเลือกทริกเกอร์ “เมื่อผู้ใช้งานส่งข้อความ”
> 3. ตั้งค่าช่องทางเป็น วิดเจ็ตแชท
> 4. เพิ่มเงื่อนไขเพื่อกรองตามเนื้อหาของข้อความ.
> 5. ตั้งค่าข้อความตัวกรองให้ตรงกับคำถามเริ่มต้นแบบตรงตัว.

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

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

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

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

***

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

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

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

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