กำหนดค่าวิดเจ็ตแชต
วิธีตั้งค่าและกำหนดค่าวิดเจ็ตแชทบนเว็บไซต์
วิดเจ็ตแชทบนเว็บไซต์ช่วยให้โต้ตอบกับผู้เยี่ยมชมบนเว็บไซต์ เก็บข้อมูลลูกค้าเป้าหมาย และให้การสนับสนุนได้ทันทีจากอินบ็อกซ์ของ Zaapi
คู่มือนี้จะแนะนำขั้นตอนการสร้าง กำหนดค่า และติดตั้งวิดเจ็ตแชทใหม่
1. การสร้างวิดเจ็ตแชทใหม่
เริ่มจากสร้างวิดเจ็ตจากการตั้งค่า Zaapi
ไปที่การตั้งค่าในเมนูหลัก
เลือกการเชื่อมต่อ
เลื่อนลงไปที่ส่วน "Discover" แล้วค้นหาการ์ด Website Chat Widget
คลิกปุ่ม + 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 ระบบสามารถทริกเกอร์โฟลว์โดยอัตโนมัติเพื่อตอบคำถามที่พบบ่อยหรือคัดกรองลีด
วิธีตั้งค่า:
ไปที่ส่วน ระบบอัตโนมัติ > Flow Builder
สร้างโฟลว์ใหม่ และเลือกทริกเกอร์ “เมื่อผู้ใช้งานส่งข้อความ”
ตั้งค่าช่องทางเป็น วิดเจ็ตแชท
เพิ่มเงื่อนไขเพื่อกรองตามเนื้อหาของข้อความ.
ตั้งค่าข้อความตัวกรองให้ตรงกับคำถามเริ่มต้นแบบตรงตัว.
หน้าหลัก: มุมมองหลักของวิดเจ็ตเมื่อผู้เยี่ยมชมเปิดใช้งาน.
ส่วนหัว: ตั้งค่าชื่อเรื่องและคำบรรยาย (ถ้ามี).
ไปที่การปรับแต่งแชท: ปรับแต่งชื่อเรื่อง ข้อความแจ้งเวลาตอบกลับ และแท็กของปุ่ม.
ช่องทางการสื่อสารอื่นๆ: คลิก + เพิ่มช่องทาง เพื่อเสนอวิธีติดต่อทางเลือก เช่น 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. Copy this code" ให้คลิกปุ่ม Copy code ระบบจะคัดลอกสไนปเป็ต JavaScript เฉพาะสำหรับวิดเจ็ต
วางสไนปเป็ตโค้ดนี้ลงในซอร์สโค้ด HTML ของเว็บไซต์ก่อนแท็กปิด
</body>tag นี้ เพื่อให้วิดเจ็ตโหลดในทุกหน้าของเว็บไซต์.เผยแพร่การเปลี่ยนแปลงบนเว็บไซต์ วิดเจ็ตแชทควรแสดงผลแล้ว!
ต้องการความช่วยเหลือหรือไม่? สำหรับคำแนะนำโดยละเอียดที่แยกตามแพลตฟอร์ม ให้ใช้คู่มือแบบทีละขั้นตอนที่ลิงก์ไว้ด้านล่างของหน้า Install สำหรับบริการอย่าง Shopify, WordPress, Webflow และอื่น ๆ
อัปเดตล่าสุด