แชตบอต
ติดตั้งปุ่มแชตบอต Keural บนเว็บไซต์ขององค์กรด้วยโค้ดติดตั้ง
องค์กรนำแชตบอต Keural ไปติดตั้งบนเว็บไซต์ได้ ผู้เยี่ยมชมกดปุ่มที่มุมหน้าจอแล้วหน้าต่างแชตบอตจะเปิดขึ้น นำโค้ดติดตั้งที่สร้างจากหน้าจอการจัดการไปวางบนเว็บไซต์เพื่อติดตั้ง
การสร้างแชตบอต
- เจ้าของหรือผู้ดูแลระบบขององค์กรกด เพิ่มแชตบอต ที่ การจัดการองค์กร → จัดการแชตบอต
- ใส่ชื่อแชตบอตและโดเมนหลัก (เช่น
https://example.com) แล้วลงทะเบียน - เปิดแชตบอตแล้วตั้งค่าทั้งสามแท็บ
| แท็บ | การตั้งค่า |
|---|---|
| โทเคน·โค้ดติดตั้ง | ตรวจสอบโทเคน คัดลอกโค้ดติดตั้ง (HTML · Next.js) |
| การตั้งค่า UI แชตบอต | รูปปุ่ม (PNG·JPG·GIF·WebP) และการแสดงผล ชื่อแชตบอต การแสดงส่วนหัว·การขยาย·สีส่วนหัว สีปุ่ม ตำแหน่งปุ่ม (ซ้าย·ขวา) และระยะห่างแนวนอน·แนวตั้ง ตรวจสอบด้วยการแสดงตัวอย่าง |
| การตั้งค่าขั้นสูง | ที่อยู่หน้าเว็บที่อนุญาตให้เปิดแชตบอต (โดเมนที่อนุญาต ไม่เกิน 5 รายการ) |
- วางโค้ดติดตั้งลงในเว็บไซต์
โค้ดติดตั้ง
ที่แท็บ โทเคน·โค้ดติดตั้ง คัดลอกโค้ดสำหรับ HTML หรือ Next.js โค้ดประกอบด้วยสองส่วน
- ตัวโหลด: สร้างฟังก์ชัน
Keuralแล้วโหลดสคริปต์แชตบอต (/plugin/keural-widget@1.0.1.js) แบบ async เมื่อหน้าโหลดเสร็จ คำสั่งที่เรียกก่อนสคริปต์โหลดจะถูกพักไว้และทำงานตามลำดับ - คำสั่งเริ่มต้น:
Keural('boot', { token: '…' })โทเคนขึ้นต้นด้วยwgt_
เวอร์ชันของสคริปต์ถูกกำหนดไว้ในที่อยู่ เมื่อมีเวอร์ชันใหม่ ให้คัดลอกโค้ดติดตั้งอีกครั้งแล้วแทนที่ หากใส่โค้ดติดตั้งสองครั้งในหน้าเดียวกัน ครั้งที่สองจะถูกข้ามและคอนโซลจะบันทึกข้อผิดพลาด
<script id="keural-one-script">
/* โค้ดที่คัดลอกจากแท็บ โทเคน·โค้ดติดตั้ง */
</script>ใน Next.js ให้ใส่ด้วย <Script id="keural-one-script" strategy="afterInteractive"> จาก next/script หากต้องการให้แสดงทุกหน้า ให้ใส่ใน root layout
ตัวเลือกตอนเริ่มต้น
ค่าที่ใส่ใน boot มีลำดับความสำคัญเหนือการตั้งค่าในหน้าจอการจัดการ ใช้เมื่อต้องการเปลี่ยนรูปแบบในแต่ละหน้า
Keural('boot', {
token: 'wgt_…',
theme: 'system',
header: { enabled: true, extended: true, draggable: true, title: 'ฝ่ายช่วยเหลือลูกค้า', color: '#495BD8' },
button: { visible: true, iconUrl: 'https://example.com/icon.png', color: '#495BD8', position: 'right', offsetX: 30, offsetY: 30 },
});| ตัวเลือก | ค่า | ชื่อการตั้งค่าบนหน้าจอ |
|---|---|---|
token | จำเป็น โทเคนจากโค้ดติดตั้ง | — |
theme | light · dark · system | — |
header.enabled | แสดงส่วนหัว | การแสดงส่วนหัว |
header.extended | แสดงปุ่มดูแบบขยายในส่วนหัว | การขยายส่วนหัว |
header.draggable | ลากส่วนหัวเพื่อย้ายหน้าต่างได้ (ค่าเริ่มต้น true) | — |
header.title | ชื่อส่วนหัว | ชื่อแชตบอต |
header.color | สีส่วนหัว | สีส่วนหัว |
button.visible | แสดงปุ่ม | แสดงปุ่ม |
button.iconUrl | ที่อยู่รูปของปุ่ม | รูปปุ่ม |
button.color | สีปุ่ม | สีปุ่ม |
button.position | left · right | ตำแหน่งปุ่ม |
button.offsetX · button.offsetY | ระยะห่างจากขอบหน้าจอ (px) | ออฟเซ็ต X · ออฟเซ็ต Y |
ค่าเริ่มต้นของแชตบอตที่สร้างใหม่คือ เปิดการแสดงและการขยายส่วนหัว สีส่วนหัวและปุ่ม #495BD8 ตำแหน่งขวา ออฟเซ็ต 30px และธีม system
การควบคุมหน้าเว็บ
| การเรียก | การทำงาน |
|---|---|
Keural('open') · Keural.open() | เปิดหน้าต่างแชตบอต |
Keural('close') · Keural.close() | ปิดหน้าต่าง |
Keural('toggle') · Keural.toggle() | ปิดถ้าเปิดอยู่ เปิดถ้าปิดอยู่ |
Keural('reload') · Keural.reload() | โหลดหน้าต่างแชตบอตใหม่ |
Keural('badge', n) · Keural.badge(n) | แสดงป้ายตัวเลขบนปุ่ม |
Keural.isLoaded() | true เมื่อสคริปต์โหลดเสร็จแล้ว |
Keural.onOpen(cb) · Keural.onClose(cb) | เรียก cb เมื่อหน้าต่างเปิดหรือปิด |
เมธอดอย่าง Keural.open() ทำงานได้เฉพาะหลังสคริปต์โหลดเสร็จ หากเรียกทันทีหลังโหลดหน้า ให้เรียกในรูปแบบฟังก์ชันอย่าง Keural('open') ซึ่งจะทำงานตามลำดับ
<button onclick="Keural('open')">ติดต่อเรา</button>ซ่อนปุ่มเริ่มต้น (button.visible: false) แล้วเปิดแชตบอตจากปุ่มของหน้าเว็บได้เช่นกัน
ขนาดหน้าจอ
หน้าต่างแชตบอตมีขนาด 390×800px หากความกว้างหน้าจอ 480px หรือน้อยกว่า จะเปิดเต็มหน้าจอ ขยายหน้าต่างได้ด้วยปุ่มขยายดูในส่วนหัว
โดเมนที่แสดงแชตบอต
- แชตบอตจะเปิดในหน้าที่มีโฮสต์เดียวกับ โดเมนหลัก โดยเทียบโฮสต์รวมพอร์ต และไม่แยกตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ที่อยู่ที่มี
www.และซับโดเมนเป็นคนละโฮสต์ หากต้องการทดสอบบนเซิร์ฟเวอร์พัฒนา ให้สร้างแชตบอตแยกโดยตั้งที่อยู่นั้นเป็นโดเมนหลัก - โดเมนหลักแก้ไขไม่ได้หลังสร้าง หากต้องการเปลี่ยน ให้สร้างแชตบอตใหม่
- หากเว้นโดเมนที่อนุญาตใน การตั้งค่าขั้นสูง ไว้ว่าง แชตบอตจะเปิดได้ทุกหน้าในโดเมนหลัก หากใส่โดเมนที่อนุญาต แชตบอตจะเปิดเฉพาะหน้าที่ที่อยู่ขึ้นต้นด้วยโดเมนนั้น หากระบุถึงพาธ เช่น
https://example.com/helpจะจำกัดเฉพาะหน้าที่อยู่ใต้พาธนั้น โดเมนที่อนุญาตต้องขึ้นต้นด้วยhttp://หรือhttps://และไม่เกิน 5 รายการ - โทเคนในโค้ดติดตั้งจะปรากฏบนหน้าเว็บ เชื่อมแชตบอตกับเนื้อหาที่เปิดเผยได้เท่านั้น
นโยบายความปลอดภัย (CSP)
หากเว็บไซต์ใช้ Content-Security-Policy ให้อนุญาตรายการต่อไปนี้ ที่อยู่อ้างอิงจาก keural.ai
| ไดเรกทิฟ | สิ่งที่อนุญาต |
|---|---|
script-src | https://keural.ai และสคริปต์แบบอินไลน์ของโค้ดติดตั้ง ('unsafe-inline' หรือ hash·nonce) |
connect-src | https://api.keural.ai |
frame-src | https://keural.ai |
style-src | 'unsafe-inline' หรือ nonce (แชตบอตจะใส่สไตล์ลงในหน้า) |
img-src | ที่อยู่รูปของปุ่ม https://keural.ai https://api.keural.ai |