> 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" แล้วค้นหาการ์ดวิดเจ็ตแชทบนเว็บไซต์
4. คลิกปุ่ม + Create เพื่อเริ่มขั้นตอนการตั้งค่า

***

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

หลังจากสร้างวิดเจ็ตแล้ว จะถูกนำไปยังหน้าการกำหนดค่า หน้านี้มี 4 แท็บหลัก ได้แก่ ลักษณะที่ปรากฏ เนื้อหาและภาษา การตั้งค่า และการติดตั้ง

**A. แท็บลักษณะที่ปรากฏ**

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

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

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

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

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

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

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