ตั้งค่าแชทวิดเจ็ต

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

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

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

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

---

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

ขั้นแรก คุณต้องสร้างวิดเจ็ตจากการตั้งค่า Zaapi ของคุณ

1. ไปที่ การตั้งค่า (Settings) ในเมนูหลัก

2. เลือก การเชื่อมต่อ (Integrations)

3. เลื่อนลงไปที่ส่วน "ค้นพบ" (Discover) และค้นหาการ์ด แชทวิดเจ็ตสำหรับเว็บไซต์ (Website Chat Widget)

4. คลิกปุ่ม + สร้าง (+ Create) เพื่อเริ่มกระบวนการตั้งค่า

---

2. การตั้งค่าวิดเจ็ต

หลังจากสร้างวิดเจ็ตแล้ว คุณจะถูกนำไปยังหน้าการตั้งค่า หน้านี้มี 4 แท็บหลัก: รูปแบบ (Appearance), เนื้อหาและภาษา (Content & language), การตั้งค่า (Settings), และ การติดตั้ง (Install)

A. แท็บรูปแบบ (Appearance)

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

• ดีไซน์วิดเจ็ต: เลือกว่าต้องการให้วิดเจ็ตในรูปแบบย่อแสดงผลอย่างไร

  • ปุ่มกลม (Bubble): ไอคอนวงกลม (ค่าเริ่มต้น)

  • แถบ (Bar): แถบสี่เหลี่ยมพร้อมข้อความสั้นๆ

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

• ตำแหน่งการจัดวาง: เลือกว่าจะให้วิดเจ็ตปรากฏทางด้าน ซ้าย หรือ ขวา ของเว็บไซต์

B. แท็บเนื้อหาและภาษา (Content & language)

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

• เลือกภาษา: วิดเจ็ตสามารถแสดงผลตามภาษาของเบราว์เซอร์ผู้เข้าชมได้โดยอัตโนมัติ คลิกที่กล่องภาษาเพื่อเลือกภาษาทั้งหมดที่คุณต้องการรองรับ

  • สำคัญ: คุณต้องกรอกข้อความในช่องที่จำเป็นให้ครบถ้วนสำหรับทุกภาษาที่คุณเลือก คุณจะเห็นการแจ้งเตือน "จำเป็นต้องกรอกข้อมูลในช่องนี้" (This field is required) สำหรับคำแปลที่ขาดหายไป

• ข้อความป๊อปอัป (Pop-up message): ข้อความเชิงรุกที่จะปรากฏแก่ผู้เข้าชมหลังจากเวลาที่กำหนด

  • สไตล์: เลือกระหว่าง ข้อความ (Message) (ป๊อปอัปข้อความที่ปรับแต่งได้), คำถามเปิดประเด็น (Ice-breaker) (รายการคำถามที่คลิกได้), หรือ ไม่มี (None)

  • การหน่วงเวลา (Delay): ตั้งจำนวนวินาทีก่อนที่ป๊อปอัปจะปรากฏขึ้น

เคล็ดลับ: ใช้ 'คำถามเปิดประเด็น' เพื่อเริ่มระบบอัตโนมัติ คุณสามารถเชื่อมต่อคำถามเปิดประเด็นเข้ากับระบบอัตโนมัติที่ต้องการได้โดยใช้ตัวสร้างโฟลว์ (Flow Builder) เมื่อผู้เข้าชมคลิกที่คำถามเปิดประเด็น ระบบจะเริ่มการทำงานของโฟลว์เพื่อตอบคำถามที่พบบ่อยหรือคัดกรองลูกค้าเป้าหมายโดยอัตโนมัติ

วิธีตั้งค่า:

1. ไปที่ส่วน ระบบอัตโนมัติ (Automations) > ตัวสร้างโฟลว์ (Flow Builder)

2. สร้างโฟลว์ใหม่และเลือกทริกเกอร์ เมื่อลูกค้าส่งข้อความ (When a customer sends a message)

3. ตั้งค่าช่องทางเป็น วิดเจ็ตแชท (Chat Widget)

4. เพิ่มเงื่อนไขเพื่อกรองตาม เนื้อหาของข้อความ (Message content)

5. ตั้งค่าข้อความที่ใช้กรองให้ ตรงกับคำถามเปิดประเด็นของคุณทุกตัวอักษร

• หน้าหลัก (Home screen): นี่คือมุมมองหลักของวิดเจ็ตเมื่อผู้เข้าชมเปิดขึ้นมา

  • ส่วนหัว (Header): ตั้งค่า หัวข้อ (Title) และ หัวข้อย่อย (Subtitle) (ถ้ามี)

  • การปรับแต่งปุ่มไปหน้าแชท: ปรับแต่ง หัวข้อ (Title), ข้อความเวลาตอบกลับ (Reply time message), และ ป้ายกำกับปุ่ม (Button label)

  • ช่องทางการสื่อสารอื่นๆ: คลิก + เพิ่มช่องทาง (+ Add channels) เพื่อเสนอช่องทางการติดต่ออื่นๆ เช่น Facebook, Instagram, WhatsApp, Line, อีเมล หรือหมายเลขโทรศัพท์

  • ลิงก์ภายนอก: คลิก + เพิ่มลิงก์ภายนอก (+ Add external links) เพื่อนำผู้ใช้ไปยังหน้าเพจที่เป็นประโยชน์

    • สำหรับแต่ละลิงก์ คุณต้องระบุ ป้ายกำกับลิงก์ (Link label) (ข้อความที่จะแสดง) สำหรับแต่ละภาษา และ URL ปลายทาง

C. แท็บการตั้งค่า (Settings)

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

• การตั้งค่าวิดเจ็ต:

  • ชื่อวิดเจ็ต: ชื่อที่จะปรากฏที่ด้านบนของวิดเจ็ตเมื่อเริ่มแชทใหม่ ชื่อนี้จะแสดงให้ลูกค้าเห็น ดังนั้นโปรดตั้งค่าให้ถูกต้อง

• การเก็บข้อมูล:

  • เปิดใช้งาน เก็บข้อมูลก่อนเริ่มแชท (Collect data before chat starts) เพื่อขอรายละเอียดการติดต่อจากผู้เข้าชม จะมีฟอร์มแสดงขึ้นมาก่อนที่พวกเขาจะสามารถส่งข้อความได้ วิธีนี้เป็นแนวทางปฏิบัติที่ดีในการขอข้อมูลติดต่อของลูกค้า เพื่อให้คุณสามารถติดต่อพวกเขากลับได้หลังจากแชทบนเว็บไซต์สิ้นสุดลง

  • หัวข้อของฟอร์ม: ปรับแต่ง หัวข้อ (Title) และ หัวข้อย่อย (Subtitle) ของฟอร์มเก็บข้อมูล

  • รายละเอียดที่ต้องการจากผู้เข้าชม: เลือกว่าจะแสดงฟิลด์ใดบ้าง (ชื่อ, อีเมล, หมายเลขโทรศัพท์) และเปิด/ปิดว่าฟิลด์นั้นๆ จำเป็น (Required) หรือไม่

  • ฟิลด์เพิ่มเติม: เพิ่มฟิลด์ที่กำหนดเองได้สูงสุด 3 ฟิลด์เพื่อเก็บข้อมูลที่เฉพาะเจาะจงมากขึ้น

    • ข้อมูลเพิ่มเติมใดๆ ที่ถูกกรอกจะถูกสร้างเป็น "โน้ต" (Note) ในส่วนข้อมูลของลูกค้า คุณสามารถใช้ส่วนนี้ถามคำถามเพื่อคัดกรองเพิ่มเติมได้ เช่น "หมายเลขสมาชิกของคุณคืออะไร?" หรือ "คุณทำการสั่งซื้อไปแล้วกี่ครั้ง?" เพื่อรวบรวมข้อมูลเพิ่มเติม

• การปรับแต่งเพิ่มเติม:

  • แสดงหน้าหลัก: หากปิดตัวเลือกนี้ ผู้เข้าชมจะเข้าสู่หน้าแชทสนทนาโดยตรง แทนที่จะเห็นหน้าหลักก่อน

  • ปิดใช้งานแชทวิดเจ็ตบนมือถือ: เปิดใช้งานเพื่อซ่อนวิดเจ็ตจากผู้เข้าชมบนอุปกรณ์มือถือ

  • ซ่อน "Powered by Zaapi" บนวิดเจ็ต: ลบการแสดงแบรนด์ของ Zaapi (ฟีเจอร์นี้มีให้ใช้เฉพาะในแผน Advanced เท่านั้น)

• รูปโปรไฟล์ในแชท (Chat avatar):

  • เลือกว่าจะให้ลูกค้าเห็นรูปภาพใดในส่วนหัวของแชท

  • แสดงโลโก้: แสดงโลโก้ธุรกิจของคุณตลอดเวลา

  • แสดงเจ้าหน้าที่: แสดงรูปโปรไฟล์ของเจ้าหน้าที่ที่กำลังดูแลการสนทนา

---

3. การติดตั้งวิดเจ็ตบนเว็บไซต์ของคุณ

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

1. ไปที่แท็บ การติดตั้ง (Install)

2. ใต้หัวข้อ "1. คัดลอกโค้ดนี้" ให้คลิกปุ่ม คัดลอกโค้ด (Copy code) ระบบจะคัดลอกโค้ด JavaScript ที่เป็นเอกลักษณ์สำหรับวิดเจ็ตของคุณ

3. นำโค้ดที่คัดลอกไปวางในซอร์สโค้ด HTML ของเว็บไซต์ของคุณ ก่อนแท็กปิด </body> วิธีนี้จะช่วยให้วิดเจ็ตโหลดบนทุกหน้าของเว็บไซต์คุณ

4. เผยแพร่การเปลี่ยนแปลงบนเว็บไซต์ของคุณ ตอนนี้วิดเจ็ตแชทควรจะแสดงผลแล้ว!

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