# กำหนดค่าวิดเจ็ตแชท #### วิธีตั้งค่าและกำหนดค่าวิดเจ็ตแชตบนเว็บไซต์ วิดเจ็ตแชตบนเว็บไซต์ช่วยให้คุณมีส่วนร่วมกับผู้เยี่ยมชมบนเว็บไซต์ของคุณ เก็บลีด และให้การสนับสนุนแบบทันทีได้โดยตรงจากกล่องจดหมาย Zaapi ของคุณ คู่มือนี้จะแนะนำคุณตลอดขั้นตอนการสร้าง กำหนดค่า และติดตั้งวิดเจ็ตแชตใหม่ของคุณ *** #### 1. การสร้างวิดเจ็ตแชตใหม่ ขั้นแรก คุณต้องสร้างวิดเจ็ตจากการตั้งค่า Zaapi ของคุณ 1. ไปที่ การตั้งค่า ในเมนูหลัก 2. เลือก การเชื่อมต่อ 3. เลื่อนลงไปที่ส่วน "Discover" และค้นหาการ์ดวิดเจ็ตแชตบนเว็บไซต์ 4. คลิกปุ่ม + สร้าง เพื่อเริ่มกระบวนการตั้งค่า *** #### 2. การกำหนดค่าวิดเจ็ต หลังจากสร้างวิดเจ็ตแล้ว คุณจะถูกพาไปยังหน้าการกำหนดค่า หน้านี้มี 4 แท็บหลัก ได้แก่ รูปลักษณ์ เนื้อหาและภาษา การตั้งค่า และติดตั้ง **A. แท็บรูปลักษณ์** แท็บนี้ควบคุมรูปแบบภาพและตำแหน่งของวิดเจ็ตแชตบนเว็บไซต์ของคุณ * การออกแบบวิดเจ็ต: เลือกว่าวิดเจ็ตเมื่อย่อแล้วจะแสดงอย่างไร * Bubble: ไอคอนวงกลม (ค่าเริ่มต้น) * Bar: แถบสี่เหลี่ยมผืนผ้าที่มีข้อความสั้นๆ * ชุดสี: เลือกสีที่เข้ากับอัตลักษณ์แบรนด์ของคุณ สีที่เลือกจะถูกนำไปใช้กับส่วนหัวและปุ่มของวิดเจ็ต คุณสามารถปรับแต่งสีเพิ่มเติมได้โดยกรอกรหัสสี Hex ของแบรนด์คุณ * ตำแหน่งการจัดวาง: เลือกว่าวิดเจ็ตควรแสดงทางด้านซ้ายหรือขวาของเว็บไซต์ของคุณ **B. แท็บเนื้อหาและภาษา** แท็บนี้ช่วยให้คุณควบคุมข้อความทั้งหมดที่แสดงในวิดเจ็ตและตั้งค่าหลายภาษาได้ * เลือกภาษา: วิดเจ็ตสามารถแสดงอัตโนมัติตามภาษาของเบราว์เซอร์ของผู้เยี่ยมชมได้ คลิกในช่องภาษาเพื่อเลือกภาษาทั้งหมดที่คุณต้องการรองรับ * สำคัญ: คุณต้องกรอกข้อความในทุกช่องที่จำเป็นสำหรับทุกภาษาที่คุณเลือก คุณจะเห็นการแจ้งเตือน "ช่องนี้จำเป็นต้องกรอก" สำหรับคำแปลที่ขาดหายไป * ข้อความป๊อปอัป: ข้อความเชิงรุกที่ปรากฏแก่ผู้เยี่ยมชมหลังจากเวลาที่กำหนด * สไตล์: เลือกระหว่าง Message (ป๊อปอัปข้อความที่ปรับแต่งได้), Ice-breaker (รายการคำถามที่คลิกได้) หรือ None * หน่วงเวลา: กำหนดจำนวนวินาทีก่อนที่ป๊อปอัปจะแสดง > เคล็ดลับ: กระตุ้นออโตเมชันด้วย Ice-breaker คุณสามารถเชื่อมต่อ ice-breaker ของคุณกับออโตเมชันที่เฉพาะเจาะจงได้โดยใช้ Flow Builder เมื่อผู้เยี่ยมชมคลิก ice-breaker ระบบสามารถทริกเกอร์โฟลว์โดยอัตโนมัติเพื่อตอบคำถามที่พบบ่อยหรือคัดกรองลีดได้ > > วิธีตั้งค่า: > > 1. ไปที่ส่วน ออโตเมชัน > Flow Builder > 2. สร้างโฟลว์ใหม่และเลือกทริกเกอร์ เมื่อคุณลูกค้าส่งข้อความ > 3. ตั้งค่าช่องทางเป็น Chat Widget > 4. เพิ่มเงื่อนไขเพื่อกรองตามเนื้อหาข้อความ > 5. ตั้งค่าข้อความตัวกรองให้ตรงกับคำถาม ice-breaker ของคุณแบบตรงตัว * หน้าจอหลัก: นี่คือมุมมองหลักของวิดเจ็ตเมื่อผู้เยี่ยมชมเปิดใช้งาน * ส่วนหัว: ตั้งชื่อเรื่องและคำบรรยายเสริมได้ * ไปที่การปรับแต่งแชต: ปรับแต่งชื่อเรื่อง ข้อความเวลาตอบกลับ และป้ายชื่อปุ่ม * ช่องทางการติดต่ออื่น: คลิก + เพิ่มช่องทาง เพื่อเสนอวิธีติดต่อทางเลือก เช่น Facebook, Instagram, WhatsApp, Line, อีเมล หรือหมายเลขโทรศัพท์ * ลิงก์ภายนอก: คลิก + เพิ่มลิงก์ภายนอก เพื่อพาผู้ใช้ไปยังหน้าที่เป็นประโยชน์ * สำหรับแต่ละลิงก์ คุณต้องระบุป้ายกำกับลิงก์ (ข้อความที่จะใช้แสดงผล) สำหรับแต่ละภาษา และ URL ปลายทาง **C. แท็บการตั้งค่า** แท็บนี้ประกอบด้วยการตั้งค่าการทำงานสำหรับการเก็บข้อมูล การปรับแต่ง และพฤติกรรมของวิดเจ็ต * การตั้งค่าวิดเจ็ต: * ชื่อวิดเจ็ต: ชื่อที่จะปรากฏที่ด้านบนของวิดเจ็ตเมื่อเริ่มแชตใหม่ ชื่อนี้จะมองเห็นได้สำหรับลูกค้า ดังนั้นควรตั้งค่าให้ถูกต้อง * การเก็บข้อมูล: * เปิดใช้งาน เก็บข้อมูลก่อนเริ่มแชต เพื่อขอรายละเอียดการติดต่อจากผู้เยี่ยมชม จะมีแบบฟอร์มแสดงขึ้นก่อนที่พวกเขาจะส่งข้อความได้ เป็นแนวปฏิบัติที่ดีในการขอรายละเอียดการติดต่อของลูกค้า เพื่อให้คุณสามารถติดต่อพวกเขาอีกครั้งหลังจากแชตสิ้นสุดบนเว็บไซต์ * ส่วนหัวของแบบฟอร์ม: ปรับแต่งชื่อเรื่องและคำบรรยายของแบบฟอร์มเก็บข้อมูล * รายละเอียดที่ต้องการจากผู้เยี่ยมชม: เลือกฟิลด์ที่จะแสดง (ชื่อ อีเมล หมายเลขโทรศัพท์) และสลับเปิด/ปิดว่าฟิลด์นั้นจำเป็นต้องกรอกหรือไม่ * ฟิลด์เพิ่มเติม: เพิ่มฟิลด์กำหนดเองได้สูงสุด 3 ฟิลด์ เพื่อเก็บข้อมูลที่เฉพาะเจาะจงมากขึ้น * ข้อมูลเพิ่มเติมที่เพิ่มเข้ามาจะถูกสร้างเป็น "โน้ต" ในส่วนโน้ตของข้อมูลลูกค้า คุณสามารถถามคำถามเพิ่มเติมเพื่อคัดกรองได้ที่นี่ เช่น "หมายเลขสมาชิกของคุณคืออะไร?" หรือ "คุณทำรายการสั่งซื้อสำเร็จกี่รายการ?" เพื่อเก็บข้อมูลเพิ่มเติม * การปรับแต่งเพิ่มเติม: * แสดงหน้าจอหลัก: หากปิดใช้งาน ผู้เยี่ยมชมจะเข้าสู่มุมมองการสนทนาแชตทันทีแทนที่จะเห็นหน้าจอหลักก่อน * ปิดใช้งานวิดเจ็ตแชตบนมือถือ: เปิดใช้งานเพื่อซ่อนวิดเจ็ตจากผู้เยี่ยมชมบนอุปกรณ์มือถือ * ซ่อน "Powered by Zaapi" บนวิดเจ็ต: ลบแบรนด์ Zaapi ออก (ฟีเจอร์นี้มีให้เฉพาะในแพ็กเกจ Advanced เท่านั้น) * อวาตาร์แชต: * เลือกภาพที่ลูกค้าจะเห็นในส่วนหัวของแชต * แสดงโลโก้: แสดงโลโก้ธุรกิจของคุณตลอดเวลา * แสดงเอเจนต์: แสดงรูปโปรไฟล์ของเอเจนต์ที่กำลังดูแลการสนทนา *** #### 3. การติดตั้งวิดเจ็ตบนเว็บไซต์ของคุณ หลังจากกำหนดค่าวิดเจ็ตและบันทึกเรียบร้อยแล้ว ขั้นตอนสุดท้ายคือการเพิ่มวิดเจ็ตลงในเว็บไซต์ของคุณ 1. ไปที่แท็บ ติดตั้ง 2. ภายใต้ "1. คัดลอกโค้ดนี้" คลิกปุ่ม คัดลอกโค้ด ซึ่งจะคัดลอกสคริปต์ JavaScript เฉพาะสำหรับวิดเจ็ตของคุณ 3. วางสไนปเป็ตโค้ดนี้ลงในซอร์สโค้ด HTML ของเว็บไซต์ของคุณก่อนที่จะปิด `` แท็กนี้ วิธีนี้จะช่วยให้วิดเจ็ตโหลดในทุกหน้าของเว็บไซต์ของคุณ 4. เผยแพร่การเปลี่ยนแปลงไปยังเว็บไซต์ของคุณ วิดเจ็ตแชตควรพร้อมใช้งานแล้ว! > ต้องการความช่วยเหลือใช่ไหม? สำหรับคำแนะนำโดยละเอียดตามแพลตฟอร์ม ให้ใช้คู่มือแบบทีละขั้นตอนที่ลิงก์ไว้ด้านล่างของหน้า ติดตั้ง สำหรับบริการอย่าง Shopify, WordPress, 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/configure-the-chat-widget.md?ask= ``` 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.