คู่มือการใช้งาน Website ขั้นสูง
ช่องทาง website รองรับการกำหนดค่าเพิ่มเติมตามอินเทอร์เฟซ LiveDesk Widget SDK เพื่อตอบสนองความต้องการของผู้ใช้
อินเทอร์เฟซ LiveDesk Widget SDK
ตั้งค่า Userid และข้อมูลผู้ใช้ (โหมดปกติ)
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setUser("Unique User ID (e.g. user_id)", { // พารามิเตอร์แรกคือตัวระบุที่ไม่ซ้ำกัน
email: "user@example.com",
name: "User Name",
avatar_url: "https://example.com/avatar.jpg", // ไม่บังคับ
phone_number: "+1234567890" // ไม่บังคับ
});
});
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setUser("Unique User ID (e.g. user_id)", { // พารามิเตอร์แรกคือตัวระบุที่ไม่ซ้ำกัน
email: "user@example.com",
name: "User Name",
avatar_url: "https://example.com/avatar.jpg", // ไม่บังคับ
phone_number: "+1234567890" // ไม่บังคับ
});
});
โค้ดนี้โชว์เป็นหน้าต่างลอย
ตั้งค่า Userid และข้อมูลผู้ใช้ (โหมดเข้ารหัส)
เปิดใช้งานการตรวจสอบสิทธิ์ (แนะนำ): เพื่อป้องกันการปลอมแปลงและรับรองว่าเซสชันจะคงอยู่ข้ามเบราว์เซอร์ ให้เปิดใช้งาน HMAC ในการกำหนดค่า (ใช้ SHA256 เพื่อสร้าง identifier_hash) ตัวอย่าง (JavaScript):
const crypto = require('crypto');
const key = 'Your HMAC Token'; // คัดลอกจากการตั้งค่า Inboxes
const message = 'Unique User ID';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');
// แนบใน setUser
window.$livedesk.setUser("Unique User ID", {
...Other Info,
identifier_hash: identifier_hash
});
const crypto = require('crypto');
const key = 'Your HMAC Token'; // คัดลอกจากการตั้งค่า Inboxes
const message = 'Unique User ID';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');
// แนบใน setUser
window.$livedesk.setUser("Unique User ID", {
...Other Info,
identifier_hash: identifier_hash
});
โค้ดนี้โชว์เป็นหน้าต่างลอย
ตั้งค่า "ตัวแปรที่กำหนดเองของการสนทนา"
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // ตัวอย่าง: UTM ระดับเซสชัน
session_type: "support"
});
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // ตัวอย่าง: UTM ระดับเซสชัน
session_type: "support"
});
โค้ดนี้โชว์เป็นหน้าต่างลอย
- ตัวแปรที่กำหนดเองเหล่านี้จะแสดงใน livdesk - Conversation - ข้อมูลการสนทนา
ตั้งค่า "ตัวแปรที่กำหนดเองของผู้ใช้"
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setCustomAttributes({
pricing_plan: "premium", // key: ตัวระบุที่ไม่ซ้ำที่กำหนดไว้ล่วงหน้า, value: ตั้งค่าตามประเภท (เช่น สตริง)
signup_date: new Date(), // ตัวอย่าง: ประเภทวันที่
account_id: 123 // ตัวอย่าง: ประเภทตัวเลข
});
});
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setCustomAttributes({
pricing_plan: "premium", // key: ตัวระบุที่ไม่ซ้ำที่กำหนดไว้ล่วงหน้า, value: ตั้งค่าตามประเภท (เช่น สตริง)
signup_date: new Date(), // ตัวอย่าง: ประเภทวันที่
account_id: 123 // ตัวอย่าง: ประเภทตัวเลข
});
});
โค้ดนี้โชว์เป็นหน้าต่างลอย
- ตัวแปรที่กำหนดเองเหล่านี้จะแสดงใน "livdesk - Conversation - คุณสมบัติผู้ติดต่อ"
ลบคุณสมบัติผู้ใช้
ลบคุณสมบัติที่กำหนดเองที่ระบุ
window.$livedesk.deleteCustomAttribute("pricing_plan");//ชื่อคีย์คุณสมบัติ string
window.$livedesk.deleteCustomAttribute("pricing_plan");//ชื่อคีย์คุณสมบัติ string
โค้ดนี้โชว์เป็นหน้าต่างลอย
สลับสถานะเปิดของฟองแชท
สลับสถานะเปิด/ปิดของวิดเจ็ต
window.$livdesk.toggle();
// Toggle widget by passing state
window.$livedesk.toggle("open"); // เปิดวิดเจ็ตแชท
window.$livedesk.toggle("close"); // ปิดวิดเจ็ตแชท
window.$livdesk.toggle();
// Toggle widget by passing state
window.$livedesk.toggle("open"); // เปิดวิดเจ็ตแชท
window.$livedesk.toggle("close"); // ปิดวิดเจ็ตแชท
โค้ดนี้โชว์เป็นหน้าต่างลอย
แสดง/ซ่อนฟองแชท
window.$livedesk.toggleBubbleVisibility('hide');// show/hide
window.$livedesk.toggleBubbleVisibility('hide');// show/hide
โค้ดนี้โชว์เป็นหน้าต่างลอย
โหมดป๊อปอัป
เปิดอินเทอร์เฟซแชทในโหมดหน้าต่างป๊อปอัป
window.$livedesk.popoutChatWindow();
window.$livedesk.popoutChatWindow();
โค้ดนี้โชว์เป็นหน้าต่างลอย
ตั้งค่าภาษา
ตั้งค่าภาษาวิดเจ็ต
window.$livedesk.setLocale("en");// รหัสภาษา string ตัวอย่าง: zh-CN
window.$livedesk.setLocale("en");// รหัสภาษา string ตัวอย่าง: zh-CN
โค้ดนี้โชว์เป็นหน้าต่างลอย
เพิ่ม/ลบป้ายกำกับ
เพิ่มป้ายกำกับสำหรับเซสชันปัจจุบัน (ก่อนที่การสนทนาจะเริ่มขึ้น) ป้ายกำกับจะถูกตั้งค่าในการสนทนาโดยอัตโนมัติ
window.$livdesk.setLabel('support-ticket');// ตัวระบุป้ายกำกับ string
window.$livdesk.removeLabel('support-ticket');
window.$livdesk.setLabel('support-ticket');// ตัวระบุป้ายกำกับ string
window.$livdesk.removeLabel('support-ticket');
โค้ดนี้โชว์เป็นหน้าต่างลอย
ออบเจ็กต์การกำหนดค่า Livedesk Widget
ออบเจ็กต์ส่วนกลางที่ตั้งค่าเมื่อเริ่มต้น (ก่อนโหลด SDK) ใช้เพื่อกำหนดพฤติกรรมของวิดเจ็ตเอง กำหนดผ่าน window.livedeskSettings จากนั้นส่งผ่านใน window.livedeskSDK.run()
คุณสมบัติออบเจ็กต์
| ชื่อคุณสมบัติ | ประเภท | คำอธิบาย | ค่าเริ่มต้น | ตัวอย่าง |
|---|---|---|---|---|
hideMessageBubble |
boolean | ซ่อนฟองข้อความ | false | true |
showUnreadMessagesDialog |
boolean | แสดงกล่องโต้ตอบข้อความที่ยังไม่ได้อ่าน | true | false |
position |
string | ตำแหน่งวิดเจ็ต | 'right' | 'left' |
locale |
string | รหัสภาษาเริ่มต้น | ภาษาแดชบอร์ด | 'zh-CN' |
useBrowserLanguage |
boolean | ใช้ภาษาของเบราว์เซอร์ (ละเว้น locale) |
false | true |
type |
string | ประเภทวิดเจ็ต | 'standard' |
'expanded_bubble' |
darkMode |
boolean | เปิดใช้งานโหมดมืด | false | true |
baseDomain |
string | โดเมนพื้นฐาน (ไม่บังคับ ใช้สำหรับหลายโดเมน) | - | 'example.com' |
launcherTitle |
string | หัวข้อตัวเรียกใช้งาน | - | 'Support' |
showPopoutButton |
boolean | แสดงปุ่มป๊อปอัป | true | false |
welcomeTitle |
string | หัวข้อต้อนรับ | - | 'Welcome!' |
welcomeDescription |
string | คำอธิบายการต้อนรับ | - | 'How can I help you?' |
availableMessage |
string | ข้อความออนไลน์ | - | 'We are online.' |
unavailableMessage |
string | ข้อความออฟไลน์ | - | 'We will be back soon.' |
enableFileUpload |
boolean | เปิดใช้งานการอัปโหลดไฟล์ | true | false |
enableEmojiPicker |
boolean | เปิดใช้งานตัวเลือกอีโมจิ | true | false |
enableEndConversation |
boolean | เปิดใช้งานปุ่มจบการสนทนา | true | false |
ตัวอย่างโค้ด
<script>
// 1. ตั้งค่าการกำหนดค่าส่วนกลางก่อนโหลด sdk.js (ต้องวางไว้ที่ส่วนหน้าสุดของสคริปต์)
window.livedeskSettings = {
// ตำแหน่งวิดเจ็ต: มุมซ้ายล่าง (ค่าเริ่มต้นคือมุมขวาล่าง)
position: "left",
// บังคับภาษาเป็นภาษาจีนตัวย่อ (แสดงภาษาจีนแม้ว่าเบราว์เซอร์จะเป็นภาษาอังกฤษ)
locale: "zh-CN",
// ตรวจจับภาษาของเบราว์เซอร์โดยอัตโนมัติ (หากต้องการใช้ภาษาเบราว์เซอร์ของผู้ใช้เป็นหลัก ให้ตั้งค่าเป็น true และลบ locale ด้านบนออก)
// useBrowserLanguage: true,
// ประเภทวิดเจ็ต: expanded_bubble = ฟองขนาดใหญ่ (พร้อมคำทักทาย), standard = ฟองขนาดเล็กคลาสสิก
type: "expanded_bubble",
// โหมดมืด (ตามระบบอัตโนมัติหรือบังคับสีเข้ม)
darkMode: "auto", // ค่าที่เลือกได้: true | false | "auto"
// ซ่อนไอคอนฟองขนาดเล็กที่ด้านล่าง (เหมาะสำหรับวางในปุ่มที่กำหนดเอง)
hideMessageBubble: false,
// ซ่อนปุ่มลูกศรเล็ก "หน้าต่างป๊อปอัป" ที่มุมขวาล่าง
showPopoutButton: false,
// ชื่อตัวเรียกใช้งานที่กำหนดเอง (แสดงในโหมดฟองขนาดใหญ่)
launcherTitle: "บริการลูกค้าออนไลน์",
// ข้อความต้อนรับ (มีผลในโหมด expanded_bubble)
welcomeTitle: "สวัสดี! มีอะไรให้เราช่วยไหม?",
welcomeDescription: "ปกติเราจะตอบกลับภายในไม่กี่นาที~",
// ข้อความแจ้งที่แสดงเมื่อออนไลน์/ออฟไลน์
availableMessage: "เราออนไลน์พร้อมให้บริการคุณตลอดเวลา",
unavailableMessage: "ขณะนี้เราไม่ออนไลน์ จะรีบตอบกลับโดยเร็วที่สุดในเวลาทำการ",
// สวิตช์ฟังก์ชัน
enableFileUpload: true, // อนุญาตให้อัปโหลดไฟล์
enableEmojiPicker: true, // อนุญาตให้ใช้อีโมจิ
enableEndConversation: true, // อนุญาตให้ผู้ใช้จบการสนทนาด้วยตนเอง
// ตัวเลือกขั้นสูงอื่นๆ (เปิดตามความต้องการ)
// showUnreadMessagesDialog: true, // แจ้งเตือนป๊อปอัปเมื่อมีข้อความที่ยังไม่ได้อ่าน (ค่าเริ่มต้น true)
// baseDomain: "yourcompany.com", // ใช้เมื่อปรับใช้หลายโดเมน
};
</script>
<!-- 2. โหลด livedesk Widget SDK (แทนที่ด้วยโดเมนและโทเค็นของคุณเอง)-->
<script>
(function(d,t) {
var BASE_URL="https://www.engagelab.com"; // ← เปลี่ยนเป็นที่อยู่ livedesk ของคุณ
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.livedeskSDK.run({
websiteToken: 'abcdefgh1234567890abcdefgh123456', // ← เปลี่ยนเป็น Website Token ของคุณ
baseUrl: BASE_URL
});
}
})(document,"script");
</script>
<script>
// 1. ตั้งค่าการกำหนดค่าส่วนกลางก่อนโหลด sdk.js (ต้องวางไว้ที่ส่วนหน้าสุดของสคริปต์)
window.livedeskSettings = {
// ตำแหน่งวิดเจ็ต: มุมซ้ายล่าง (ค่าเริ่มต้นคือมุมขวาล่าง)
position: "left",
// บังคับภาษาเป็นภาษาจีนตัวย่อ (แสดงภาษาจีนแม้ว่าเบราว์เซอร์จะเป็นภาษาอังกฤษ)
locale: "zh-CN",
// ตรวจจับภาษาของเบราว์เซอร์โดยอัตโนมัติ (หากต้องการใช้ภาษาเบราว์เซอร์ของผู้ใช้เป็นหลัก ให้ตั้งค่าเป็น true และลบ locale ด้านบนออก)
// useBrowserLanguage: true,
// ประเภทวิดเจ็ต: expanded_bubble = ฟองขนาดใหญ่ (พร้อมคำทักทาย), standard = ฟองขนาดเล็กคลาสสิก
type: "expanded_bubble",
// โหมดมืด (ตามระบบอัตโนมัติหรือบังคับสีเข้ม)
darkMode: "auto", // ค่าที่เลือกได้: true | false | "auto"
// ซ่อนไอคอนฟองขนาดเล็กที่ด้านล่าง (เหมาะสำหรับวางในปุ่มที่กำหนดเอง)
hideMessageBubble: false,
// ซ่อนปุ่มลูกศรเล็ก "หน้าต่างป๊อปอัป" ที่มุมขวาล่าง
showPopoutButton: false,
// ชื่อตัวเรียกใช้งานที่กำหนดเอง (แสดงในโหมดฟองขนาดใหญ่)
launcherTitle: "บริการลูกค้าออนไลน์",
// ข้อความต้อนรับ (มีผลในโหมด expanded_bubble)
welcomeTitle: "สวัสดี! มีอะไรให้เราช่วยไหม?",
welcomeDescription: "ปกติเราจะตอบกลับภายในไม่กี่นาที~",
// ข้อความแจ้งที่แสดงเมื่อออนไลน์/ออฟไลน์
availableMessage: "เราออนไลน์พร้อมให้บริการคุณตลอดเวลา",
unavailableMessage: "ขณะนี้เราไม่ออนไลน์ จะรีบตอบกลับโดยเร็วที่สุดในเวลาทำการ",
// สวิตช์ฟังก์ชัน
enableFileUpload: true, // อนุญาตให้อัปโหลดไฟล์
enableEmojiPicker: true, // อนุญาตให้ใช้อีโมจิ
enableEndConversation: true, // อนุญาตให้ผู้ใช้จบการสนทนาด้วยตนเอง
// ตัวเลือกขั้นสูงอื่นๆ (เปิดตามความต้องการ)
// showUnreadMessagesDialog: true, // แจ้งเตือนป๊อปอัปเมื่อมีข้อความที่ยังไม่ได้อ่าน (ค่าเริ่มต้น true)
// baseDomain: "yourcompany.com", // ใช้เมื่อปรับใช้หลายโดเมน
};
</script>
<!-- 2. โหลด livedesk Widget SDK (แทนที่ด้วยโดเมนและโทเค็นของคุณเอง)-->
<script>
(function(d,t) {
var BASE_URL="https://www.engagelab.com"; // ← เปลี่ยนเป็นที่อยู่ livedesk ของคุณ
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.livedeskSDK.run({
websiteToken: 'abcdefgh1234567890abcdefgh123456', // ← เปลี่ยนเป็น Website Token ของคุณ
baseUrl: BASE_URL
});
}
})(document,"script");
</script>
โค้ดนี้โชว์เป็นหน้าต่างลอย
การฟังเหตุการณ์ Livedesk Widget
| ชื่อเหตุการณ์ | คำอธิบาย | ตัวอย่างการฟัง |
|---|---|---|
livedesk:ready |
SDK โหลดเสร็จสมบูรณ์ สามารถเรียกใช้วิธีการได้อย่างปลอดภัย | window.addEventListener('livedesk:ready', () => { /* Init */ }); |
livedesk:on-message |
ทริกเกอร์เมื่อได้รับข้อความใหม่ | window.addEventListener('livedesk:on-message', (data) => { console.log(data); }); |
livedesk:error |
ทริกเกอร์เมื่อเกิดข้อผิดพลาด SDK (v2.3.0+) | window.addEventListener('livedesk:error', (error) => { console.error(error); }); |










