วิดเจ็ตเว็บ

ชื่อทางเทคนิคอย่าง window.SingChat เป็นส่วนหนึ่งของวิดเจ็ตและ API โปรดใช้ในโค้ดตามที่เขียนไว้ทุกตัวอักษร

วิดเจ็ตบนเว็บเป็นสคริปต์ไฟล์เดียวคือ widget.js ซึ่งให้บริการจาก askais.com สคริปต์จะเพิ่มปุ่มเปิดแชทลงในหน้าเว็บ และวาดหน้าต่างแชทภายใน Shadow DOM สไตล์ของเว็บไซต์และสไตล์ของวิดเจ็ตจึงแยกจากกัน

เพิ่มลงในเว็บไซต์ของคุณ

วางโค้ดนี้ก่อน </body> ในทุกหน้าที่ต้องการให้แชทแสดง App ID ของคุณอยู่ใน การตั้งค่า → กล่องข้อความ

<script src="https://askais.com/widget.js"
  data-app-id="YOUR_APP_ID"
  data-base-url="https://askais.com"
  async></script>

ต้องใส่ data-base-url เมื่อใช้บนเว็บไซต์ของคุณเอง: หากไม่มี วิดเจ็ตจะไปหาเซิร์ฟเวอร์บนโดเมนของคุณแทนที่จะเป็น askais.com

⚠️ โหลด widget.js จาก askais.com

อย่าดาวน์โหลด widget.js หรือรวมไว้ในโค้ดของคุณเอง เมื่อโหลดจาก askais.com วิดเจ็ตจะเป็นเวอร์ชันปัจจุบันเสมอ ส่วนสำเนาจะค้างอยู่ที่เวอร์ชันเดิม และจะไม่ได้รับการแก้ไขหรือฟีเจอร์ใหม่ใด ๆ

แอตทริบิวต์ของสคริปต์

ทุกอย่างตั้งค่าด้วยแอตทริบิวต์ data- บนแท็กสคริปต์:

• data-app-id — ต้องระบุ App ID ของกล่องข้อความของคุณ
• data-base-url — ต้องระบุเมื่อใช้บนเว็บไซต์ของคุณ ใช้ค่า https://askais.com เสมอ
• data-locale — ไม่บังคับ กำหนดภาษาของวิดเจ็ต เช่น ja หรือ zh-Hant หากไม่ระบุ วิดเจ็ตจะใช้ภาษาของอุปกรณ์ผู้เยี่ยมชมก่อน แล้วจึงใช้ lang ของหน้าเว็บคุณ
• data-external-id — ID ที่คุณใช้ระบุผู้ใช้ที่เข้าสู่ระบบอยู่
• data-email — อีเมลของผู้ใช้ ซึ่งทีมของคุณจะเห็น
• data-name — ชื่อของผู้ใช้ ซึ่งทีมของคุณจะเห็น
• data-avatar-url — ลิงก์รูปโปรไฟล์ของผู้ใช้
• data-hmac — ลายเซ็นยืนยันตัวตน ดูด้านล่าง
• data-attrs — รายละเอียดเพิ่มเติมในรูปแบบ JSON เช่น {"plan":"Pro"} ซึ่งทีมของคุณจะเห็นในโปรไฟล์ของผู้เยี่ยมชม ระบบจะไม่สนใจ JSON ที่ไม่ถูกต้อง

data-embed, data-platform, data-app-version และ data-device-model ถูกตั้งค่าโดยหน้าแชทในแอป ดูแชทในแอป (WebView)

ผู้เยี่ยมชมที่เข้าสู่ระบบ

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

<script src="https://askais.com/widget.js"
  data-app-id="YOUR_APP_ID"
  data-base-url="https://askais.com"
  data-external-id="user_123"
  data-email="ada@example.com"
  data-name="Ada Lovelace"
  data-attrs='{"plan":"Pro"}'
  data-hmac="SIGNATURE_FROM_YOUR_SERVER"
  async></script>

หากไม่มี data-external-id วิดเจ็ตจะสร้าง ID นิรนามแยกให้แต่ละเบราว์เซอร์ และเก็บไว้ใน local storage ของเบราว์เซอร์ ประวัติแชทจึงยังอยู่เมื่อโหลดหน้าใหม่ในเบราว์เซอร์นั้น หากกล่องข้อความมีแบบฟอร์มก่อนเริ่มแชต ผู้เยี่ยมชมนิรนามจะกรอกแบบฟอร์มนี้ก่อนเริ่มแชท

การยืนยันตัวตน (HMAC)

• hmac คือค่า HMAC-SHA256 ของ externalId ที่ใช้คีย์ลับของกล่องข้อความเป็นคีย์ เขียนเป็นเลขฐานสิบหกตัวพิมพ์เล็ก
• คำนวณค่านี้บนเซิร์ฟเวอร์ของคุณ ห้ามใส่คีย์ลับไว้ในหน้าเว็บหรือแอปเด็ดขาด
• คีย์ลับจะแสดงครั้งเดียวตอนสร้างกล่องข้อความ และแสดงอีกครั้งเมื่อคุณหมุนเวียนคีย์ใน การตั้งค่า → กล่องข้อความ การหมุนเวียนคีย์จะทำให้ลายเซ็นเก่าทั้งหมดใช้ไม่ได้
• ส่ง data-external-id พร้อมกับ data-hmac เสมอ ระบบตรวจสอบลายเซ็นกับ external ID ดังนั้นลายเซ็นที่คำนวณจากอีเมลอย่างเดียวจะถูกปฏิเสธ
• หากลายเซ็นไม่ถูกต้อง วิดเจ็ตจะเชื่อมต่อไม่ได้ หากไม่มี data-hmac ระบบจะรับข้อมูลตามที่หน้าเว็บส่งมา ใครก็ตามที่แก้ไขหน้าเว็บได้จึงอาจแอบอ้างเป็นคนอื่นได้

ตัวอย่างสำหรับ Node.js:

import { createHmac } from "node:crypto";

// Runs on your server. INBOX_SECRET_KEY never leaves it.
const hmac = createHmac("sha256", INBOX_SECRET_KEY)
  .update(user.id) // the exact value you pass as data-external-id
  .digest("hex");

เริ่มวิดเจ็ตจาก JavaScript

หากต้องการเริ่มวิดเจ็ตเอง เช่น เมื่อหน้าเว็บรู้แล้วว่าผู้ใช้เป็นใคร ให้โหลดสคริปต์โดยไม่ใส่ data-app-id แล้วเรียก window.SingChat.start() หลังจากสคริปต์โหลดเสร็จ:

<script src="https://askais.com/widget.js"></script>
<script>
  window.SingChat.start({
    appId: "YOUR_APP_ID",
    baseUrl: "https://askais.com",
    // optional, for a signed-in user:
    externalId: "user_123",
    email: "ada@example.com",
    name: "Ada Lovelace",
    hmac: "SIGNATURE_FROM_YOUR_SERVER",
  });
</script>

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

หน้าตาและการทำงาน

• การตั้งค่า → กล่องข้อความ แล้วขยายกล่องข้อความที่ต้องการ: สีหลักและสีข้อความ ตำแหน่ง (ขวาล่างหรือซ้ายล่าง) ขนาดบับเบิล พื้นหลังสว่างหรือมืด ชื่อหน้าต่างและคำบรรยายหน้าต่าง พร้อมตัวอย่างแบบเรียลไทม์
• แบบฟอร์มก่อนเริ่มแชต (ที่เดียวกัน): ขออีเมล ชื่อ เบอร์โทรศัพท์ หรือชื่อบริษัทจากผู้เยี่ยมชมนิรนามก่อนเริ่มแชท
• ต้นทางที่อนุญาต (ที่เดียวกัน): เว็บไซต์ที่โหลดวิดเจ็ตของกล่องข้อความนี้ได้ หากรายการว่าง เว็บไซต์ใดก็โหลดได้
• แบรนด์ของวิดเจ็ต (ที่เดียวกัน): บรรทัด “Powered by” ที่ด้านล่างของแชท คุณจะซ่อนบรรทัดนี้หรือแสดงชื่อของคุณเองแทนได้หรือไม่ ขึ้นอยู่กับแพ็กเกจของคุณ
• ข้อความต้อนรับของ AI ตั้งค่าในหน้า ผู้ช่วย AI บับเบิลคำถามที่พบบ่อยที่คลิกได้ตั้งค่าใน การตั้งค่า → คำถามที่พบบ่อย และบทความจัดการใน Help Center

ความปลอดภัย

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