สำหรับนักพัฒนาระบบ

Chat Widgetเป็นเครื่องมือที่ช่วยให้คุณสามารถเพิ่มฟีเจอร์แชท AI เข้าไปในเว็บไซต์ของคุณได้อย่างง่ายดาย โดยแค่การนำ Script ไปวางที่เว็บไชต์ก็พร้อมใช้งานได้ทันที

🚀 วิธีการใช้งาน

1. สร้าง API Token

คลิกเพื่อสร้าง API KEY ใหม่สำหรับใช้งาน Chat Widget

2. เพิ่ม Script Tag

เพิ่ม script tag ต่อไปนี้ใน <head> หรือ <body> ของเว็บไซต์คุณ:

<script 
  src="https://www.sorbkub.com/script/chat-widget.js"
  data-key="YOUR_API_TOKEN"
  data-title="ถามงานเปิดสอบ GPT">
</script>

3. พารามิเตอร์ที่จำเป็น

data-key:API KEY สำหรับการเข้าถึงระบบ AI

data-title:ข้อความที่แสดงบนปุ่มแชท (ไม่บังคับ)

⚙️ การกำหนดค่า

ตำแหน่งและขนาด

Widget จะแสดงที่มุมขวาล่างของหน้าจอ โดยมีขนาดดังนี้:

ปุ่มแชท: 48px สูง, ขอบมน 24px
หน้าต่างแชท: 400px กว้าง x 640px สูง
ตำแหน่ง: 20px จากขอบขวาและล่าง

การปรับแต่ง CSS (ไม่บังคับ)

คุณสามารถปรับแต่งสไตล์ได้โดยการ override CSS:

/* ปรับตำแหน่งปุ่ม */
#sorbkub-chat-btn {
  bottom: 30px !important;
  right: 30px !important;
}

/* ปรับสีพื้นหลัง */
#sorbkub-chat-btn {
  background: linear-gradient(90deg, #your-color 0%, #your-color 100%) !important;
}

/* ปรับขนาดหน้าต่างแชท */
#sorbkub-chat-modal {
  width: 500px !important;
  height: 700px !important;
}

📋 ตัวอย่างการใช้งาน

ตัวอย่างเริ่มต้น

<!DOCTYPE html>
<html>
<head>
  <title>เว็บไซต์ตัวอย่าง</title>
</head>
<body>
  <h1>ยินดีต้อนรับ</h1>
  <p>เว็บไซต์ของคุณพร้อม Chat Widget</p>
  
  <!-- Chat Widget Script -->
  <script 
    src="https://www.sorbkub.com/script/chat-widget.js"
    data-key="YOUR_API_TOKEN"
    data-title="ถามงานเปิดสอบ GPT">
  </script>
</body>
</html>

ตัวอย่างแบบ Dynamic (สำหรับผู้ต้องการเขียน Script เพิ่มเติม)

// เพิ่ม script แบบ dynamic
function loadChatWidget(token, title) {
  const script = document.createElement('script');
  script.src = 'https://www.sorbkub.com/script/chat-widget.js';
  script.setAttribute('data-key', token);
  script.setAttribute('data-title', title);
  document.body.appendChild(script);
}

// เรียกใช้งาน
loadChatWidget('your-token', 'แชทกับ AI');

⚠️ ข้อควรระวัง

ตรวจสอบให้แน่ใจว่า API KEY ถูกต้องและมีสิทธิ์เข้าถึง
เว็บไซต์ต้องรองรับ HTTPS เพื่อความปลอดภัย
หากใช้ Content Security Policy (CSP) ต้องอนุญาต iframe

🔍 การแก้ไขปัญหา

Widget ไม่แสดง:ตรวจสอบ console errors และ network requests

iframe ไม่โหลด:ตรวจสอบ CSP settings และ sandbox permissions

Token ไม่ทำงาน:ตรวจสอบ API key และ permissions

📞 การสนับสนุน

หากมีปัญหาหรือต้องการความช่วยเหลือ ติดต่อเราได้ที่

[email protected]