วิดเจ็ตบนเว็บไซต์

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

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

หาโค้ดติดตั้งได้ที่ไหน

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

โค้ดมีหน้าตาแบบนี้ โดยมีคีย์ของคุณเองแทนจุดไข่ปลา:

<script>
  window.mybot = { key: "eu-1a2b3c4d-..." };
</script>
<script async src="https://getmybot.dev/loader.js"></script>

หากแทนที่จะเห็นโค้ด คุณเห็นข้อความว่ายังไม่ได้ออกคีย์ติดตั้งให้บอตนี้ แสดงว่ายังไม่ได้เชื่อมต่อช่องทางวิดเจ็ต ติดต่อฝ่ายสนับสนุน: คีย์จะออกให้เมื่อเชื่อมต่อช่องทาง

ใต้โค้ดมีคำใบ้ว่าวิดเจ็ตจะเรียกไปยังโฮสต์ใด หากเว็บไซต์ของคุณตั้ง CSP (Content Security Policy) ไว้ ให้อนุญาตโฮสต์นั้นโหลดสคริปต์และรับคำขอ มิฉะนั้นเบราว์เซอร์จะบล็อกวิดเจ็ตเงียบ ๆ

วางโค้ดไว้ตรงไหน

โค้ดชิ้นนี้วางใน HTML ของ ทุกหน้า ที่ต้องการให้วิดเจ็ตปรากฏ ในทางปฏิบัติคือวางครั้งเดียวในเทมเพลตกลางของเว็บไซต์: ส่วนท้าย ช่อง «โค้ดก่อน </body>» ใน CMS หรือคอนเทนเนอร์ในเครื่องมือจัดการแท็ก

กฎมีไม่กี่ข้อ:

ตำแหน่งที่ดีที่สุดคือ ก่อนแท็กปิด </body> วางใน <head> ก็ได้ แต่เบราว์เซอร์จะเสียเวลากับวิดเจ็ตก่อนเนื้อหาของคุณ
ลำดับของสองแท็กสำคัญ: แท็กแรกกำหนดคีย์ แท็กที่สองโหลดวิดเจ็ต อย่าสลับและอย่าแยกไว้คนละที่
แท็กที่สองมี async จึงไม่บล็อกการแสดงผล อย่าลบแอตทริบิวต์นี้
หนึ่งชิ้นต่อหนึ่งหน้า สองชุดหมายถึงพยายามเริ่มวิดเจ็ตสองครั้ง

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

คีย์ติดตั้งเป็นข้อมูลสาธารณะ

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

สิ่งที่ควรเข้าใจ:

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

รายการโดเมนที่อนุญาต

วิดเจ็ตมี รายการโดเมนที่อนุญาต (origin allowlist) — ที่อยู่เว็บไซต์ที่วิดเจ็ตได้รับอนุญาตให้ทำงาน รายการนี้กำหนดตอนเชื่อมต่อช่องทาง และเปลี่ยนภายหลังได้โดยไม่ต้องออกคีย์ใหม่ โค้ดบนเว็บไซต์ของคุณจึงคงเดิม

แต่ละรายการคือ origin: โปรโตคอล โฮสต์ และพอร์ตหากไม่ใช่พอร์ตมาตรฐาน

https://example.com
https://www.example.com
https://shop.example.com
http://localhost:3000

การเทียบเป็นแบบ ตรงทุกตัวอักษร:

ไม่มีสัญลักษณ์แทน https://*.example.com ใช้ไม่ได้ — ให้ระบุซับโดเมนทีละรายการ
example.com กับ www.example.com เป็นคนละรายการ ถ้าเว็บไซต์เปิดได้ทั้งสองแบบ ต้องใส่ทั้งคู่
http:// กับ https:// ก็เป็นคนละรายการ โดยทั่วไปต้องการแค่ https:// แต่เครื่องทดสอบบน http:// ต้องเพิ่มให้ชัดเจน
ห้ามมีพาธ: https://example.com/shop จะถูกปฏิเสธ origin คือที่อยู่เว็บไซต์เท่านั้น

ถ้าโดเมนจริงของคุณไม่อยู่ในรายการ วิดเจ็ตจะไม่เริ่มทำงาน เบราว์เซอร์ของผู้เข้าชมจะได้รับการปฏิเสธ «origin not allowed» และแชทจะไม่เปิดขึ้นมาเลย มักเกิดหลังย้ายไปโดเมนใหม่ เพิ่มซับโดเมน หรือเปิดเวอร์ชันภาษาที่สองบนที่อยู่แยก — แต่ละกรณีต้องมีรายการของตัวเอง

ถ้ารายการ ว่าง จะไม่มีข้อจำกัดใด ๆ และวิดเจ็ตทำงานได้จากทุกที่ ให้ถือว่านี่คือ «ยังไม่ได้ตั้งค่า» ไม่ใช่การเปิดกว้างโดยตั้งใจ: เมื่อทราบโดเมนของตัวเองแล้วให้ใส่ทันที

ข้อจำกัดนี้ป้องกันอะไร และไม่ป้องกันอะไร

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

ไม่ป้องกัน: นี่ไม่ใช่การป้องกันคนที่คัดลอกคีย์แล้วเรียกแพลตฟอร์มโดยตรง — ไม่ผ่านเบราว์เซอร์ แต่ผ่านสคริปต์ เป็นต้น เฮดเดอร์ที่ระบุที่อยู่เว็บไซต์นั้นเบราว์เซอร์เป็นผู้ใส่ โปรแกรมที่ทำงานนอกเบราว์เซอร์อาจไม่ส่งหรือส่งค่าอะไรก็ได้ ฉะนั้นให้มองรายการนี้เป็นข้อจำกัดการฝัง ไม่ใช่เส้นแบ่งความปลอดภัย สิ่งที่ป้องกันการใช้งานในทางที่ผิดคือการจำกัดอัตราคำขอและการดูแลไดอะล็อกฝั่งแพลตฟอร์ม ไม่ใช่รายการนี้

หน้าตา

ใน วิดเจ็ต → หน้าตา ตั้งค่าได้ดังนี้:

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

ข้าง ๆ มี ตัวอย่าง — วิดเจ็ตจริงที่แสดงผลลัพธ์ก่อนบันทึก

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

การเปลี่ยนแปลงจะไปถึงเว็บไซต์เอง: วิดเจ็ตอ่านการตั้งค่าตอนโหลดหน้า จึงไม่ต้องแก้โค้ดที่วางไว้เลย

ผู้เข้าชมเป็นนิรนาม

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

ผลที่ตามมา:

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

การผูกผู้เข้าชมเข้ากับผู้ใช้ของคุณ

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

ทำได้ด้วยการเรียกใช้เพียงครั้งเดียว พร้อมฟังก์ชันที่สร้างหลักฐาน:

mybot.identify(async (visitorId) => {
  const res = await fetch("/mybot-sign", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ userId: currentUser.id, visitorId }),
  });
  return res.json(); // { userId, signature, expiresAt }
});

วิดเจ็ตจะเรียกฟังก์ชันของคุณพร้อม visitorId — รหัสผู้เข้าชมนิรนามปัจจุบันสำหรับเบราว์เซอร์นี้ ค่าเดียวที่มีแต่วิดเจ็ตเท่านั้นที่รู้ — และรอให้มันส่งคืน หรือ resolve เป็น { userId, signature, expiresAt } งานเดียวของฟังก์ชันคุณคือส่ง visitorId ไปยัง เซิร์ฟเวอร์ของคุณเอง พร้อมกับรหัสผู้ใช้ที่ล็อกอินอยู่ (currentUser.id ด้านบนคือค่านั้นบนเว็บไซต์ของคุณ) และส่งกลับสิ่งที่เซิร์ฟเวอร์ของคุณตอบกลับมาเป๊ะ ๆ การเซ็นชื่อจริง ๆ เกิดขึ้นบนเซิร์ฟเวอร์ของคุณ ไม่ใช่ในฟังก์ชันนี้ — ดูด้านล่าง

เป็นฟังก์ชันเรียกกลับ ไม่ใช่ค่าที่คำนวณไว้แล้วหรือวิธีอ่าน visitorId โดยตรง ด้วยสองเหตุผล:

จังหวะเวลา วิดเจ็ตสร้าง visitorId แบบอะซิงโครนัสระหว่างเริ่มทำงาน — มันยังไม่มีอยู่ในช่วงที่สคริปต์ตัวโหลดกำลังทำงาน และ mybot.identify เองก็จะถูกติดตั้งก็ต่อเมื่อขั้นตอนนั้นเสร็จแล้วเท่านั้น (รายละเอียดด้านล่าง) ดังนั้นเมื่อหน้าเว็บของคุณสามารถเรียก mybot.identify ได้ รหัสที่ฟังก์ชันของคุณได้รับจึงรับประกันว่าเป็นของจริง getter ธรรมดาจะไม่มีการรับประกันแบบนี้: ไม่มีอะไรกันไม่ให้หน้าเว็บอ่านมันเร็วเกินไปหนึ่งบรรทัดแล้วไม่ได้อะไรเลย และสร้างลายเซ็นที่ไม่มีวันตรงกันขึ้นมาอย่างเงียบ ๆ โดยไม่มีเบาะแสว่าทำไม
ขอบเขต โค้ดหน้าเว็บของคุณเองไม่จำเป็นต้องถือ เก็บ หรือส่งต่อ visitorId ด้วยมือเลย — มันมีอยู่แค่ในฟังก์ชันเดียวนี้ สำหรับการเรียกครั้งเดียวที่มันต้องทำ

ตั้งแต่นาทีที่ออกจากวิดเจ็ต visitorId จะกลายเป็นสิทธิ์แบบผู้ถือ (bearer capability) ใครก็ตามที่หาลายเซ็นสำหรับมันได้ ก็สามารถถูกรวมเข้ากับเซสชันของผู้เข้าชมคนนั้นได้ ส่งมันไปยัง เซิร์ฟเวอร์ของคุณเอง เท่านั้น ผ่านคำขอที่ยืนยันตัวตนของคุณเอง และไม่ที่ไหนอีก — อย่าบันทึกลงล็อก อย่าส่งต่อให้บุคคลที่สาม และอย่าใส่ไว้ในการเรียกใช้ analytics ฝั่งไคลเอนต์

ลายเซ็นคำนวณบนเซิร์ฟเวอร์ของคุณเองเท่านั้น

ภายในฟังก์ชันของคุณด้านบน เซิร์ฟเวอร์ของคุณเอง — ไม่ใช่เบราว์เซอร์เลย — เป็นผู้คำนวณลายเซ็น: HMAC-SHA256 โดยใช้กุญแจลับของวิดเจ็ตเป็นคีย์ ในรูปเลขฐานสิบหก 32 ตัวอักษรแรก จากค่าสามค่าที่รวมกันเป็นข้อความเดียว สูตรเดียวกันนี้แสดงอยู่ในแดชบอร์ดข้างกุญแจลับ ใต้หัวข้อ «Signing algorithm»:

signature = hex(HMAC-SHA256(key: secret, message: userId + "\n" + visitorId + "\n" + expiresAt)).slice(0, 32)

+ "\n" + แต่ละจุดด้านบนคือ อักขระขึ้นบรรทัดใหม่จริง ๆ ระหว่างแต่ละส่วน ไม่ใช่ตัวอักษรสองตัวคือแบ็กสแลชกับ n ถ้าฟังก์ชัน HMAC ของคุณรับข้อความเป็นสตริงเดียว ให้เชื่อมสามส่วนด้วยการขึ้นบรรทัดใหม่จริง — การเรียก .update() แยกกันสามครั้งโดยไม่มีการขึ้นบรรทัดใหม่คั่นระหว่างนั้นจะแฮชข้อความที่ต่างออกไปและผิด

สามส่วนคือ:

userId — รหัสผู้ใช้ที่ล็อกอินอยู่ ค่าเดียวกับที่เซิร์ฟเวอร์ของคุณได้รับจากฟังก์ชันด้านบนและส่งกลับมาในคำตอบ
visitorId — รหัสผู้เข้าชมนิรนามที่ฟังก์ชันของคุณได้รับเป็นอาร์กิวเมนต์และส่งต่อไปยังเซิร์ฟเวอร์ของคุณโดยไม่เปลี่ยนแปลง
expiresAt — timestamp แบบ unix เป็นวินาที (ไม่ใช่มิลลิวินาที) ที่เซิร์ฟเวอร์ของคุณสร้างขึ้นตอนเซ็นชื่อ และเป็นเวลาที่ลายเซ็นนี้จะยังใช้ได้จนถึง แพลตฟอร์มจะปฏิเสธการเรียกที่ expiresAt ผ่านไปแล้ว และการเรียกที่ เกิน 24 ชั่วโมง ไปในอนาคตด้วย — ให้เซ็นทันทีก่อนส่งคืนจากฟังก์ชันของคุณ ไม่ใช่เซ็นครั้งเดียวแล้วแคชไว้ใช้กับคำขอถัดไป

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

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

ตัวการเรียกใช้เองไม่แสดงอะไรบนหน้าจอ: การผูกเกิดขึ้นฝั่งเซิร์ฟเวอร์และเงียบ ๆ ถ้าฟังก์ชันของคุณโยนข้อผิดพลาดหรือ promise ของมันถูกปฏิเสธ หรือแพลตฟอร์มปฏิเสธลายเซ็นที่ได้มา — ไม่ตรงกัน หรือ expiresAt หายไป ผ่านไปแล้ว หรือเกิน 24 ชั่วโมงไปในอนาคต — ก็ไม่มีอะไรเกิดขึ้นเพิ่มเติม: ผู้เข้าชมจะไม่รู้สึกอะไรและพิมพ์ต่อในฐานะนิรนาม

mybot.identify ไม่ได้มีอยู่ทันที แต่จะปรากฏหลังจากโค้ดหลักของวิดเจ็ตโหลดเสร็จ พร้อมกับ visitorId ตัวจริง (ดู "จังหวะเวลา" ด้านบน) ให้เรียกจากตัวจัดการเหตุการณ์โหลดหน้าเว็บ ไม่ใช่บรรทัดแรกใน <head>

กุญแจลับอยู่ที่ไหนและเปลี่ยนอย่างไร

กุญแจลับของวิดเจ็ตคือคีย์ที่คุณใช้เซ็น มันอยู่ในการตั้งค่าวิดเจ็ต ในส่วน «identify() secret» ถ้าส่วนนั้นบอกว่ายังไม่ได้เชื่อมต่อวิดเจ็ต ให้เชื่อมต่อช่องทางเว็บก่อน กุญแจลับจะมาพร้อมกัน

การแสดง ปุ่ม «Reveal secret» จะดึงค่ามา ค่านั้นไม่ปรากฏเป็นข้อความเปิด: แรกสุดคุณจะเห็นเป็นจุด ๆ และมีสวิตช์แยกต่างหาก «Show» สำหรับแสดงตัวอักษร («Mask» ซ่อนกลับ) ข้าง ๆ มีปุ่ม «Clear from screen» ที่เอาค่าออกจากหน้าจอ

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

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

การเปลี่ยน ปุ่ม «Rotate secret» พร้อมขั้นตอนยืนยัน นี่คือการกระทำที่ ทำให้พังทันที: ทันทีที่กุญแจใหม่เกิดขึ้น กุญแจเก่าจะหยุดผ่านการตรวจ ไม่มีช่วงคาบเกี่ยว ไม่มีจังหวะที่กุญแจทั้งสองใช้ได้พร้อมกัน

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

ดังนั้นเปลี่ยนอย่างตั้งใจ: เตรียมการปล่อยระบบหลังบ้านที่ใช้ค่าใหม่ก่อน แล้วค่อยกด «Rotate secret» การกดเพื่อดูว่าจะเกิดอะไรขึ้นเป็นความคิดที่ไม่ดี ค่าใหม่จะแสดงบนหน้าจอทันทีหลังเปลี่ยน จึงคัดลอกได้เลย

วิดเจ็ตทำงานอย่างไรบนหน้าเว็บ

วิดเจ็ตถูกออกแบบมาโดยตั้งใจไม่ให้ชนกับเว็บไซต์ของคุณ:

มันอยู่ใน คอนเทนเนอร์ที่แยกออกมา (Shadow DOM แบบปิด) สไตล์ของคุณเข้าไปข้างในไม่ได้ และสไตล์ของวิดเจ็ตก็ไม่รั่วออกมาที่หน้าเว็บ ผลข้างเคียงคือคุณจะเปลี่ยนหน้าตาวิดเจ็ตด้วย CSS ของตัวเองไม่ได้ — ให้ใช้การตั้งค่าหน้าตาแทน
คอนเทนเนอร์ครอบเต็มจอแต่ ไม่ดักการคลิก: คลิกทะลุไปยังหน้าเว็บ มีเพียงปุ่มและแผงแชทที่ตอบสนอง
วิดเจ็ตอยู่เหนือเนื้อหาของคุณเสมอ เลเยอร์ของคุณบังไม่ได้
ข้อผิดพลาดภายในวิดเจ็ตจะอยู่ภายใน: อย่างแย่ที่สุดคือปุ่มแชทไม่ทำงาน ส่วนเว็บไซต์ยังทำงานต่อ ถ้าวิดเจ็ตไม่ปรากฏ ให้ดูคอนโซลของเบราว์เซอร์ — เกือบทุกครั้งเป็นเรื่อง CSP หรือโดเมนที่ยังไม่อยู่ในรายการ

ถ้าวิดเจ็ตไม่ปรากฏ

ตรวจตามลำดับ:

เปิดซอร์สโค้ดหน้าเว็บและตรวจว่ามีทั้งสองแท็ก และคีย์ไม่ว่าง
ตรวจว่าที่อยู่เว็บไซต์ตรงกับในรายการทุกตัวอักษร รวมทั้ง https:// และ www
ดูคอนโซลของเบราว์เซอร์: ข้อความเกี่ยวกับ Content Security Policy หมายความว่าต้องอนุญาตโฮสต์ของแพลตฟอร์มใน CSP ของเว็บไซต์
ตรวจว่าตัวบล็อกโฆษณาไม่ได้ตัดวิดเจ็ตออก — ลองในหน้าต่างส่วนตัวที่ไม่มีส่วนขยาย

อ่านต่อ

ช่องทาง — หลายช่องทางและความสามารถของแต่ละช่องทาง
รีแอคชัน: พื้นฐาน — บอตจะตอบผู้เข้าชมว่าอย่างไร
แชทและผู้ดำเนินการ — เจ้าหน้าที่ตอบในบทสนทนาอย่างไร