คู่มือการใช้งาน 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); });
icon
ติดต่อฝ่ายขาย