วิดเจ็ตแชทบนเว็บไซต์ช่วยให้ผู้เยี่ยมชมเว็บไซต์สามารถติดต่อคุณผ่านทางแชทสดหรือผ่าน ช่องทางการส่งข้อความ อื่น ๆ ที่คุณได้เชื่อมต่อไว้.

การเชื่อมต่อวิดเจ็ตแชทบนเว็บไซต์

ดูวิดีโอด้านล่างเพื่อดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีเชื่อมต่อการแชทบนเว็บไซต์กับ respond.io

How to Connect Website Chat to respond.io

ขั้นตอนที่ 1: ไปที่ การตั้งค่า > ช่อง

ขั้นตอนที่ 2: คลิก เพิ่มช่อง > แชทเว็บไซต์ > เชื่อมต่อ

ขั้นตอนที่ 3: กรอกเว็บไซต์ที่จะเพิ่มวิดเจ็ต

โปรดดูข้อมูลต่อไปนี้เกี่ยวกับวิธีการเพิ่มเว็บไซต์ให้เป็นไวท์ลิสต์

หากผู้ใช้เพิ่มhttps://app.respond.ioดังนั้นจะมีเพียงhttps://app.respond.ioเท่านั้นที่อยู่ในรายชื่อขาว โดเมนย่อยหรือรูทอื่น ๆ ไม่ควรทำงาน
หากผู้ใช้เพิ่มhttps://*.respond.ioโดเมนย่อยทั้งหมด รวมถึงโดเมนรูท จะถูกเพิ่มในรายการขาว
หากผู้ใช้เพิ่มhttps://respond.ioเฉพาะโดเมนรูทเท่านั้นที่จะอยู่ในรายการที่อนุญาต

ขั้นตอนที่ 4:เลือกสีธีมสำหรับวิดเจ็ตโดยใช้ตัวเลือกสีแบบโต้ตอบ

เลือกสีที่เข้ากับแบรนด์ สี และเว็บไซต์ของคุณ

ขั้นตอนที่ 5:เลือกไอคอนสำหรับวิดเจ็ตที่จะแสดงบนเว็บไซต์ หากคุณต้องการอัปโหลดไอคอนที่กำหนดเอง คุณสามารถอัปโหลดไอคอนสี่เหลี่ยมจัตุรัสที่มีขนาดแนะนำ 256 พิกเซล x 256 พิกเซล

สามารถปรับแต่งวิดเจ็ตเพิ่มเติมได้เมื่อเชื่อมต่อแล้ว

ขั้นตอนที่ 6: คลิกถัดไป> เพิ่มสคริปต์ลงในเว็บไซต์ที่คุณต้องการ หรือคุณสามารถส่งคำแนะนำในการติดตั้งให้คนอื่นผ่านทางอีเมลได้

การติดตั้ง Chat Widget

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

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

สำหรับแพลตฟอร์มหรือบริการอื่น ให้ไปที่แหล่ง HTML ของหน้า วางสคริปต์ไว้ก่อนแท็ก </body>

<body>
...
...
...
<Paste Script Here>
</body>

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

วิดเจ็ตแชทเว็บไซต์ respond.io จะปรากฏบนเว็บไซต์ของคุณเมื่อติดตั้งสคริปต์สำเร็จแล้ว

การปรับแต่งวิดเจ็ตแชท

ขั้นตอนที่ 1:ในพื้นที่ทำงานของคุณ ไปที่การตั้งค่า>ช่อง

ขั้นตอนที่ 2: ค้นหาช่องแชทบนเว็บไซต์ > คลิก ปรับแต่ง

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

จอแสดงผล & ลักษณะที่ปรากฏ

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

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

การตรวจสอบไอคอนแชทบนเว็บไซต์:

ขนาดไฟล์สูงสุด: 1MB
ขนาดไฟล์สูงสุด: 256 x 256 พิกเซล
รูปทรง: สี่เหลี่ยมจัตุรัส

ตำแหน่ง

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

องค์ประกอบส่วนหัว

ฟิลด์	คำอธิบาย
ชื่อ	ชื่อเรื่องจะแสดงที่ด้านบนของวิดเจ็ตแชทของคุณ
แท็กไลน์	สโลแกนจะแสดงอยู่ใต้ชื่อเรื่อง
โลโก้แชทบนเว็บไซต์	วางภาพโลโก้ของคุณที่นี่เพื่อให้แสดงที่ด้านบนของการแชทบนเว็บไซต์ รูปแบบสามารถเป็น PNG, SVG หรือ JPG และขนาดไฟล์ไม่เกิน 4.0 MB
ไอคอนช่อง	ตัวเลือกนี้จะทำให้ผู้ติดต่อสามารถติดต่อคุณผ่านช่องทางที่ต้องการได้ หากมีตัวเลือกให้ คุณสามารถเพิ่มช่องได้สูงสุด 6 ช่อง และจะแสดงที่ด้านบนของวิดเจ็ตแชทบนเว็บไซต์
สีไอคอนช่อง	ไอคอนช่องสามารถแสดงในรูปแบบสีขาวหรือสีบนวิดเจ็ตแชทของคุณได้ เลือกสีขาวหรือสีเพื่อเข้ากับสีธีมของวิดเจ็ตแชทของคุณ

การตรวจสอบโลโก้แชทบนเว็บไซต์:

ขนาดไฟล์สูงสุด: 4MB
ขนาดไฟล์สูงสุด: 1024 x 1024 พิกเซล
รูปทรง: สี่เหลี่ยมจัตุรัส

ไอคอนช่อง

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

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

นี่คือรายการช่องอินพุตที่จำเป็นสำหรับลิงก์ช่องที่รองรับแต่ละช่อง

ลิงค์ช่องทาง	ช่องป้อนข้อมูลที่จำเป็น
วอทส์แอพพ์	หมายเลขโทรศัพท์ WhatsApp
เฟสบุ๊ค เมสเซนเจอร์	รหัสเพจ Facebook
โทรเลข	ชื่อบอท Telegram
ทวิตเตอร์	ทวิตเตอร์ ID
เส้น	ไลน์ไอดี
ไวเบอร์	ชื่อบัญชีสาธารณะของ Viber
ข้อความ SMS	หมายเลขโทรศัพท์ SMS
อีเมล	ที่อยู่อีเมล
การโทรศัพท์	หมายเลขโทรศัพท์
ลิงค์ที่กำหนดเอง	ที่อยู่ URL และไอคอน
คิวอาร์แบบกำหนดเอง	ภาพ QR และไอคอน

การตรวจสอบสำหรับไอคอนช่อง:

ขนาดไฟล์สูงสุด: 1MB
ขนาดไฟล์สูงสุด: 256 x 256 พิกเซล
รูปทรง: สี่เหลี่ยมจัตุรัส

แบบฟอร์มก่อนการแชท

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

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

สามารถปรับแต่งป้ายฟิลด์ให้เป็นภาษาอื่นเพื่อให้ตรงกับภาษาของเว็บไซต์

การตั้งค่าเพิ่มเติม

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

จำกัดการแนบไฟล์ขาเข้า

เมื่อเลือกตัวเลือกนี้ ผู้เยี่ยมชมเว็บไซต์จะไม่มีตัวเลือกในการแนบไฟล์ในวิดเจ็ตแชทของเว็บไซต์

ซ่อนการแชทบนเว็บไซต์

เมื่อใช้ตัวเลือกนี้ วิดเจ็ตจะถูกซ่อนโดยสมบูรณ์ จนกว่าจะคลิก Anchor Reference หรือเมื่อเปิดแชทผ่าน API แบบโปรแกรม

#เว็บแชท_วิดเจ็ต

การใช้จุดยึดด้านบนนี้จะช่วยให้คุณสร้างปุ่มบนเพจของคุณ เพื่อเปิดวิดเจ็ตเมื่อคลิก

ซ่อนแบรนด์ Respond.io

เมื่อใช้ตัวเลือกนี้ คุณสามารถลบ Branding respond.io ออกจากวิดเจ็ตของคุณได้

การกำหนดค่าช่องทาง

ขั้นตอนที่ 1: คลิก การตั้งค่า > ช่อง

ขั้นตอนที่ 2: ค้นหาเว็บไซต์แชท > คลิก จัดการ

ขั้นตอนที่ 3: ในหน้าการกำหนดค่าการแชทบนเว็บไซต์ คุณจะเห็นการกำหนดค่าต่อไปนี้:

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

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

ขั้นตอนที่ 4: คลิก บันทึกการเปลี่ยนแปลง เพื่ออัปเดตหน้าการกำหนดค่าการแชทบนเว็บไซต์

การระบุผู้ใช้ที่เข้าสู่ระบบ

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

คำว่า "ผู้ใช้" ใช้ในบริบทของเว็บไซต์ของคุณ ในแพลตฟอร์ม respond.io เราจะยังคงเรียกพวกเขาว่า "ผู้ติดต่อ"

window.__respond_settings = {
  ตัวระบุ: "customer@example.com",
  ชื่อ: "เจน",
  นามสกุล: "นางแบบ",
  โทรศัพท์: "60123456789",
  อีเมล: "customer@example.com",
  รูปโปรไฟล์: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
  countryCode: "MY",
  ภาษา: "en",
  // ฟิลด์ที่กำหนดเอง
  custom_fields: {
    // slug ของฟิลด์ที่กำหนดเอง
    หมายเลข: 123,
    คำอธิบาย: "ข้อความบางส่วน",
  },
};

คำแนะนำในการใช้โค้ด

แก้ไขโค้ด (ที่กำหนดไว้ด้านล่าง) เพื่อส่งตัวระบุของผู้ใช้ที่กำลังเข้าสู่ระบบในปัจจุบันไปที่ respond.io นี่อาจเป็นที่อยู่อีเมลหรือรหัสผู้ติดต่อหรือขึ้นอยู่กับฟิลด์ผู้ติดต่ออื่นๆ โปรดทราบว่าตัวระบุ เป็นช่องที่ต้องกรอก
วางโค้ดลงในแท็ก ส่วน ของทุกๆ หน้าที่คุณต้องการให้แชทบนเว็บไซต์ปรากฏขึ้น
- สคริปต์สำหรับระบุผู้ใช้ที่เข้าสู่ระบบจะต้องวางไว้เหนือโค้ดแชทบนเว็บไซต์ซึ่งสามารถพบได้ในกล่องโต้ตอบการกำหนดค่าแชทบนเว็บไซต์
คุณยังสามารถส่งฟิลด์รายชื่อผู้ติดต่อที่เชื่อมโยงกับรายชื่อผู้ติดต่อของคุณไปยัง respond.io ได้ ดังนั้นเราจะจัดเก็บฟิลด์รายชื่อผู้ติดต่อในระหว่างกระบวนการสร้างรายชื่อผู้ติดต่อ ชื่อฟิลด์ (หรือสลัก) สามารถพบได้ในโมดูลฟิลด์ผู้ติดต่อ
โปรดทราบว่าหากคุณใช้ฟีเจอร์นี้ แบบฟอร์มก่อนการแชทจะถูกละเว้น ซึ่งหมายความว่าผู้ติดต่อไม่จำเป็นต้องกรอกข้อมูลก่อนเริ่มการสนทนา

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

การควบคุมโปรแกรม (API สำหรับผู้ใช้)

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

การกระทำ

เปิดแชท
1. คำอธิบาย: เปิดวิดเจ็ตแชท
2. รูปแบบประโยค: $respond.do("chat:open")
ปิดการสนทนา
1. คำอธิบาย: ปิดวิดเจ็ตการแชท
2. รูปแบบประโยค: $respond.do("chat:close")

ผู้รับฟังเหตุการณ์

กล่องแชทถูกเปิดแล้ว
1. คำอธิบาย: จัดการเหตุการณ์การเปิดวิดเจ็ตแชท (ทริกเกอร์ฟังก์ชัน คอลแบ็ก ของคุณ)
2. รูปแบบประโยค:$respond.on("chat:opened", callback)
กล่องแชทถูกปิดแล้ว
1. คำอธิบาย: จัดการเหตุการณ์ปิดวิดเจ็ตแชท (ทริกเกอร์ฟังก์ชัน คอลแบ็ก ของคุณ)
2. รูปแบบประโยค:$respond.on("chat:closed", callback)

วิธีการตรวจสอบสถานะ

แชทเปิดอยู่มั้ย?
1. คำอธิบาย: คืนค่า true ถ้าวิดเจ็ตแชทเปิดอยู่ มิฉะนั้น false
2. รูปแบบประโยค: $respond.is("chat:open")
แชทปิดแล้วเหรอ?
1. คำอธิบาย: คืนค่า true ถ้าวิดเจ็ตแชทถูกปิด มิฉะนั้น false
2. รูปแบบประโยค: $respond.is("chat:closed")

คำถามที่พบบ่อยและการแก้ไขปัญหา

เหตุใดข้อความของฉันจึงไม่ถูกส่งไปยังรายชื่อติดต่อ?

อาจมีสาเหตุหลายประการที่ทำให้ข้อความไม่ได้รับการส่ง:

ผู้ติดต่อได้ออกจากเว็บไซต์แล้ว
การไม่มีกิจกรรมของผู้ติดต่ออาจเกินช่วงเวลาหมดเวลา
ลูกค้าของผู้ติดต่ออาจมีปัญหาเกี่ยวกับการเชื่อมต่ออินเทอร์เน็ต

ทำไมวิดเจ็ตของฉันถึงไม่ปรากฏบนเว็บไซต์ของฉัน?

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

การเริ่มต้นอย่างรวดเร็วของวิดเจ็ตแชทบนเว็บไซต์