Keural Kit

Keural Kit นำหน้าจอของ Keural ไปใส่ในหน้าของคุณด้วยสคริปต์เพียงหนึ่งไฟล์ หน้าจอวาดอยู่ภายใน Shadow DOM จึงไม่ปะปนกับ CSS ของหน้าของคุณ Kit อัปเดตพร้อมการเผยแพร่เว็บ Keural หากหลังเผยแพร่ยังเห็นหน้าจอเดิม ให้ล้างแคชเบราว์เซอร์และ CDN แล้วตรวจสอบเวลาบิลด์ด้วย window.KeuralKit.__build

การโหลดคัดลอกลิงก์ของหัวข้อ

Kit โหลดจากที่อยู่เว็บของสภาพแวดล้อม Keural ที่คุณใช้ หากใช้ keural.ai จะเป็น https://keural.ai ส่วนสภาพแวดล้อมแบบ on-premise หรือแบบเฉพาะให้ใช้ที่อยู่เว็บ Keural ของสภาพแวดล้อมนั้น ก่อนโหลดสคริปต์ ให้ตั้งค่าที่อยู่เซิร์ฟเวอร์ที่ Kit จะเรียกใน window.__KEURAL_ENV__ ที่อยู่ทั้งสามต้องเป็นของสภาพแวดล้อมเดียวกัน และรับจากผู้รับผิดชอบของ Keural ตอนนำไปใช้

<script>
  window.__KEURAL_ENV__ = {
    NEXT_PUBLIC_API_BASE_URL: '<KEURAL_API_URL>',
    NEXT_PUBLIC_FAST_API_BASE_URL: '<KEURAL_AGENT_URL>',
    NEXT_PUBLIC_MODE: 'prd',
  };
</script>
<script src="<KEURAL_WEB_URL>/plugin/kit/keural.js" async></script>

หากต้องการใช้ Kit เดียวกันในโดเมนที่สองด้วย ให้ตั้งค่าทั้งสามตัว NEXT_PUBLIC_ADDITIONAL_FRONTEND_URL, NEXT_PUBLIC_ADDITIONAL_API_BASE_URL และ NEXT_PUBLIC_ADDITIONAL_FAST_API_BASE_URL ให้ครบ หากขาดไปแม้แต่ตัวเดียวจะเกิดข้อผิดพลาด ค่าเป็นที่อยู่ https:// ที่ไม่มีพาธ

เมื่อสคริปต์โหลดเสร็จ จะมี window.KeuralKit ใน SPA อย่าง React ให้สร้างตัวโหลดเพื่อให้สคริปต์ถูกใส่เพียงครั้งเดียว

export function loadKeuralKit(src = '<KEURAL_WEB_URL>/plugin/kit/keural.js') {
  if (window.KeuralKit) return Promise.resolve(window.KeuralKit);
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onload = () => resolve(window.KeuralKit);
    s.onerror = () => {
      s.remove();
      reject(new Error('Keural Kit failed to load'));
    };
    document.head.appendChild(s);
  });
}

ติดตั้งแชตคัดลอกลิงก์ของหัวข้อ

const el = document.getElementById('keural-chat')!;

window.KeuralKit.mountChat(el, {
  userInfo: { userId: user.id, name: user.name },
  colorMode: 'light',
  initialData: { message: 'สรุปยอดขายไตรมาสนี้ให้หน่อย', room_name: 'รายงานไตรมาส' },
  onSessionCreated: (roomId) => router.push(`/c/${roomId}`),
  onError: () => router.push('/'),
});

// เมื่อออกจากหน้าจอ
window.KeuralKit.unmount(el);

• หากต้องการเปิดการสนทนาที่มีอยู่ ให้ใส่ ID ของการสนทนาใน sessionId
• initialData ใส่เฉพาะตอนเปิดการสนทนาใหม่ หากใส่ตอนเปิดการสนทนาเดิม ข้อความเดิมจะถูกส่งซ้ำ
• หากไม่มี userInfo.userId จะถือว่ายังไม่ได้เข้าสู่ระบบ ให้ mount หลังจากข้อมูลการเข้าสู่ระบบพร้อมแล้ว

เมธอดคัดลอกลิงก์ของหัวข้อ

เมธอด mount* และ update* รับ colorMode และ userInfo พร้อมกัน ส่วน unmount(el) รับเฉพาะองค์ประกอบ update* วาดองค์ประกอบเดิมใหม่ด้วยตัวเลือกใหม่ เมื่อต้องการเปิดและปิดหน้าต่าง ให้เปลี่ยนค่า open แล้วเรียก update* เมื่อเรียก mount* ซ้ำบนองค์ประกอบเดิม หน้าจอที่มีอยู่จะถูกนำกลับมาใช้

ตัวเลือกของ mountChatคัดลอกลิงก์ของหัวข้อ

initialDataคัดลอกลิงก์ของหัวข้อ

ภาษาของหน้าจอคัดลอกลิงก์ของหัวข้อ

หน้าจอของ Kit แสดงเป็นภาษาเกาหลี

การตั้งค่าและการเข้าสู่ระบบคัดลอกลิงก์ของหัวข้อ

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