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

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

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

ดูวิดีโอด้านล่างเพื่อดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีเชื่อมต่อการแชทบนเว็บไซต์กับ 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 บนเว็บไซต์ของคุณ โดยขึ้นอยู่กับระบบที่คุณใช้ในการสร้างและจัดการเว็บไซต์ของคุณ

สำหรับแพลตฟอร์มหรือบริการอื่น ให้ไปที่แหล่ง 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 การแชทบนเว็บไซต์มาก่อน ช่องที่เชื่อมต่อที่มีข้อมูลเพียงพอจะแสดงเป็นลิงก์ช่อง Widget ตามค่าเริ่มต้น

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

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

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

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

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

แบบฟอร์มการสนทนาล่วงหน้า

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การกระทำ

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

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

Chatbox ถูกเปิดแล้ว
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 ของการเชื่อมต่อวิดเจ็ตแชทบนเว็บไซต์เพื่อดูวิธีเพิ่มโดเมนของคุณในรายการไวท์ลิสต์