คู่มือการใช้งานขั้นสูงของเว็บไซต์

ช่องทาง Website รองรับตัวเลือกการกำหนดค่าเพิ่มเติมผ่านอินเทอร์เฟซ LiveDesk Widget SDK หรือการใช้ iframe เพื่อตอบโจทย์ความต้องการที่แตกต่างกันของผู้ใช้

การตั้งค่าที่เกี่ยวข้องกับ iframe

ข้ามหน้าจอต้อนรับ

ในโหมด iframe ผู้ใช้สามารถข้ามหน้าจอต้อนรับเมื่อเปิด bubble ได้โดยเพิ่มพารามิเตอร์ action=autoStart ซึ่งจะนำไปยังกล่องแชทโดยตรงเพื่อเริ่มการสนทนา

<iframe class="livedesk-widget-iframe" src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" // แทนที่ website_token ด้วยค่าที่สร้างขึ้นหลังจากสร้างช่องทาง title="Live desk" allow="camera;microphone" />
              
              <iframe
    class="livedesk-widget-iframe"
    src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" // แทนที่ website_token ด้วยค่าที่สร้างขึ้นหลังจากสร้างช่องทาง
    title="Live desk"
    allow="camera;microphone"
/>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ตั้งค่า User ID

มีวิธีการกำหนดค่าให้เลือก 2 วิธี:

วิธีที่ 1:

Array.from(document.getElementsByTagName('iframe')) .filter((iframe) => iframe.src && iframe.src.includes('livedesk')) .forEach((iframe) => iframe.contentWindow?.postMessage( 'livedesk-widget:' + JSON.stringify({ event: 'set-user', identifier: 'your_user_id', user: { name: 'Display Name', email: 'user@example.com' }, }), '*', ), );
              
              Array.from(document.getElementsByTagName('iframe'))
.filter((iframe) => iframe.src && iframe.src.includes('livedesk'))
.forEach((iframe) =>
iframe.contentWindow?.postMessage(
'livedesk-widget:' +
JSON.stringify({
event: 'set-user',
identifier: 'your_user_id',
user: { name: 'Display Name', email: 'user@example.com' },
}),
'*',
),
);

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

วิธีที่ 2: เพิ่มพารามิเตอร์ user_id=xxxxx ลงใน iframe

<iframe class="livedesk-widget-iframe" src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002" title="LiveDesk" allow="camera;microphone" />
              
              <iframe
  class="livedesk-widget-iframe"
  src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002"
  title="LiveDesk"
  allow="camera;microphone"
/>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

อินเทอร์เฟซ LiveDesk Widget SDK

ตั้งค่า User ID และข้อมูลผู้ใช้ (โหมดมาตรฐาน)

window.addEventListener("livedesk:ready", function () { window.$livedesk.setUserId("Unique user ID (such as 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.setUserId("Unique user ID (such as user_id)", {  // พารามิเตอร์ตัวแรกคือตัวระบุที่ไม่ซ้ำกัน
    email: "user@example.com",
    name: "User Name",
    avatar_url: "https://example.com/avatar.jpg",  // ไม่บังคับ
    phone_number: "+1234567890"  // ไม่บังคับ
  });
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย
หมายเหตุ: หากการตั้งค่า user ID ในการกำหนดค่าถูกทริกเกอร์โดยผู้ใช้ปลายทาง คุณสามารถลบตัวครอบ event window.addEventListener("livedesk:ready", function ()) ออกได้

ตั้งค่า User ID และข้อมูลผู้ใช้ (โหมดเข้ารหัส)

เปิดใช้งานการยืนยันตัวตน (แนะนำ): เพื่อป้องกันการปลอมแปลงและให้แน่ใจว่าเซสชันคงอยู่ข้ามเบราว์เซอร์ ให้เปิดใช้ HMAC ในการกำหนดค่า (ใช้ SHA256 เพื่อสร้าง identifier_hash) ตัวอย่าง (JavaScript):

const crypto = require('crypto'); const key = 'Your HMAC Token'; // คัดลอกจากการตั้งค่า Inbox const message = 'Unique user ID'; const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex'); // แนบใน setUser window.$livedesk.setUserId("Unique user ID", { ...Other information, identifier_hash: identifier_hash });
              
              const crypto = require('crypto');
const key = 'Your HMAC Token';  // คัดลอกจากการตั้งค่า Inbox
const message = 'Unique user ID';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');

// แนบใน setUser
window.$livedesk.setUserId("Unique user ID", {
  ...Other information,
  identifier_hash: identifier_hash
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ตั้งค่าตัวแปรกำหนดเองของการสนทนา

window.$livedesk.setConversationCustomAttributes({ utm_source: "google", // ตัวอย่าง: UTM ระดับการสนทนา session_type: "support" });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google",  // ตัวอย่าง: UTM ระดับการสนทนา
  session_type: "support"
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย
  • ตัวแปรกำหนดเองเหล่านี้จะแสดงใน LiveDesk - Conversation - Conversation Info

ตั้งค่าตัวแปรกำหนดเองของผู้ใช้

window.addEventListener("livedesk:ready", function () { window.$livedesk.setCustomAttributes({ pricing_plan: "premium", // key: ตัวระบุที่ไม่ซ้ำกันที่กำหนดไว้ล่วงหน้า; value: ตั้งค่าตามประเภท (เช่น string) signup_date: new Date(), // ตัวอย่าง: ประเภทวันที่ account_id: 123 // ตัวอย่าง: ประเภทตัวเลข }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setCustomAttributes({
    pricing_plan: "premium",  // key: ตัวระบุที่ไม่ซ้ำกันที่กำหนดไว้ล่วงหน้า; value: ตั้งค่าตามประเภท (เช่น string)
    signup_date: new Date(),  // ตัวอย่าง: ประเภทวันที่
    account_id: 123           // ตัวอย่าง: ประเภทตัวเลข
  });
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย
  • ตัวแปรกำหนดเองเหล่านี้จะแสดงใน LiveDesk - Conversation - Contact Attributes

ลบแอตทริบิวต์ผู้ใช้

ลบแอตทริบิวต์กำหนดเองที่ระบุ

window.$livedesk.deleteCustomAttribute("pricing_plan"); // ชื่อ key ของแอตทริบิวต์ชนิดสตริง
              
              window.$livedesk.deleteCustomAttribute("pricing_plan"); // ชื่อ key ของแอตทริบิวต์ชนิดสตริง

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

สลับสถานะการเปิดของ Chat Bubble

สลับสถานะเปิด/ปิดของวิดเจ็ต

window.$livdesk.toggle(); // สลับวิดเจ็ตโดยส่งสถานะเข้าไป window.$livedesk.toggle("open"); // เปิดวิดเจ็ตแชท window.$livedesk.toggle("close"); // ปิดวิดเจ็ตแชท
              
              window.$livdesk.toggle();

// สลับวิดเจ็ตโดยส่งสถานะเข้าไป
window.$livedesk.toggle("open"); // เปิดวิดเจ็ตแชท
window.$livedesk.toggle("close"); // ปิดวิดเจ็ตแชท

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

แสดง/ซ่อน Chat Bubble

window.$livedesk.toggleBubbleVisibility('hide'); // show/hide
              
              window.$livedesk.toggleBubbleVisibility('hide'); // show/hide

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

โหมด Pop-Out

เปิดอินเทอร์เฟซแชทในโหมดหน้าต่างป๊อปเอาต์

window.$livedesk.popoutChatWindow();
              
              window.$livedesk.popoutChatWindow();

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ตั้งค่าภาษา

ตั้งค่าภาษาของวิดเจ็ต

window.$livedesk.setLocale("en"); // รหัสภาษาชนิดสตริง เช่น: zh-CN
              
              window.$livedesk.setLocale("en"); // รหัสภาษาชนิดสตริง เช่น: zh-CN

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

เพิ่ม/ลบป้ายกำกับ

เพิ่มป้ายกำกับให้กับเซสชันปัจจุบัน (ก่อนเริ่มการสนทนา) โดยป้ายกำกับจะถูกนำไปใช้กับการสนทนาโดยอัตโนมัติ

window.$livdesk.setLabel('support-ticket'); // ตัวระบุป้ายกำกับชนิดสตริง window.$livdesk.removeLabel('support-ticket');
              
              window.$livdesk.setLabel('support-ticket'); // ตัวระบุป้ายกำกับชนิดสตริง
window.$livdesk.removeLabel('support-ticket');

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ออบเจ็กต์การกำหนดค่า LiveDesk Widget

ออบเจ็กต์แบบ global ที่ตั้งค่าระหว่างการเริ่มต้นใช้งาน (ก่อนโหลด SDK) เพื่อปรับแต่งพฤติกรรมของวิดเจ็ต โดยกำหนดผ่าน window.livedeskSettings จากนั้นส่งต่อไปยัง window.livedeskSDK.run()

คุณสมบัติของออบเจ็กต์

Property Name Type Description Default Value Example
hideMessageBubble boolean ซ่อน message bubble false true
showUnreadMessagesDialog boolean แสดงกล่องข้อความ unread messages true false
position string ตำแหน่งวิดเจ็ต 'right' 'left'
locale string รหัสภาษาเริ่มต้น ภาษาของ Dashboard 'zh-CN'
useBrowserLanguage boolean ใช้ภาษาของเบราว์เซอร์ (ไม่สนใจ locale) false true
type string ประเภทวิดเจ็ต 'standard' 'expanded_bubble'
darkMode boolean เปิดใช้งานโหมดมืด false true
baseDomain string โดเมนหลัก (ไม่บังคับ สำหรับหลายโดเมน) - 'example.com'
launcherTitle string ชื่อ launcher - 'Support'
showPopoutButton boolean แสดงปุ่ม pop-out true false
welcomeTitle string ชื่อเรื่องต้อนรับ - 'Welcome!'
welcomeDescription string คำอธิบายต้อนรับ - 'How can we help you?'
availableMessage string ข้อความออนไลน์ - 'We are online.'
unavailableMessage string ข้อความออฟไลน์ - 'We will reply later.'
enableFileUpload boolean เปิดใช้งานการอัปโหลดไฟล์ true false
enableEmojiPicker boolean เปิดใช้งานตัวเลือกอีโมจิ true false
enableEndConversation boolean เปิดใช้งานปุ่มจบการสนทนา true false

ตัวอย่างโค้ด

<script> // 1. ก่อนโหลด sdk.js ให้ตั้งค่าการกำหนดค่าแบบ global ก่อน (ต้องวางไว้ตอนต้นของสคริปต์) window.livedeskSettings = { // ตำแหน่งวิดเจ็ต: ล่างซ้าย (ค่าเริ่มต้นคือล่างขวา) position: "left", // บังคับให้ใช้ภาษาจีนตัวย่อ (จะแสดงภาษาจีนแม้ว่าเบราว์เซอร์จะเป็นภาษาอังกฤษ) locale: "zh-CN", // ตรวจจับภาษาของเบราว์เซอร์โดยอัตโนมัติ (หากต้องการให้ความสำคัญกับภาษาของเบราว์เซอร์ผู้ใช้ ให้ตั้งค่าเป็น true และลบ locale ด้านบนออก) // useBrowserLanguage: true, // ประเภทวิดเจ็ต: expanded_bubble = bubble ขนาดใหญ่ (พร้อมข้อความต้อนรับ), standard = bubble ขนาดเล็กแบบคลาสสิก type: "expanded_bubble", // โหมดมืด (ตามระบบโดยอัตโนมัติหรือบังคับใช้โหมดมืด) darkMode: "auto", // ค่าที่เลือกได้: true | false | "auto" // ซ่อนไอคอน bubble ขนาดเล็กด้านล่าง (เหมาะสำหรับวางไว้ในปุ่มที่กำหนดเอง) hideMessageBubble: false, // ซ่อนปุ่มลูกศร "pop-out window" ที่มุมขวาล่าง showPopoutButton: false, // ชื่อ launcher แบบกำหนดเอง (แสดงในโหมด bubble ขนาดใหญ่) launcherTitle: "Online Support", // ข้อความต้อนรับ (มีผลในโหมด expanded_bubble) welcomeTitle: "Hello! How can we help you?", welcomeDescription: "We usually reply within a few minutes.", // ข้อความแจ้งเมื่อออนไลน์/ออฟไลน์ availableMessage: "We are online and ready to assist you at any time", unavailableMessage: "We are currently offline and will reply as soon as possible during business hours", // สวิตช์ฟีเจอร์ enableFileUpload: true, // อนุญาตให้อัปโหลดไฟล์ enableEmojiPicker: true, // อนุญาตให้ใช้อีโมจิ enableEndConversation: true, // อนุญาตให้ผู้ใช้จบการสนทนาได้เอง // ตัวเลือกขั้นสูงอื่น ๆ (เปิดใช้ตามต้องการ) // showUnreadMessagesDialog: true, // การแจ้งเตือนแบบป๊อปอัปเมื่อมีข้อความที่ยังไม่ได้อ่าน (ค่าเริ่มต้น: true) // baseDomain: "yourcompany.com", // ใช้สำหรับการปรับใช้หลายโดเมน }; </script> <!-- 2. โหลด LiveDesk Widget SDK (แทนที่ด้วยโดเมนและ token ของคุณเอง) --> <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 ให้ตั้งค่าการกำหนดค่าแบบ global ก่อน (ต้องวางไว้ตอนต้นของสคริปต์)
window.livedeskSettings = {
  // ตำแหน่งวิดเจ็ต: ล่างซ้าย (ค่าเริ่มต้นคือล่างขวา)
  position: "left",

  // บังคับให้ใช้ภาษาจีนตัวย่อ (จะแสดงภาษาจีนแม้ว่าเบราว์เซอร์จะเป็นภาษาอังกฤษ)
  locale: "zh-CN",

  // ตรวจจับภาษาของเบราว์เซอร์โดยอัตโนมัติ (หากต้องการให้ความสำคัญกับภาษาของเบราว์เซอร์ผู้ใช้ ให้ตั้งค่าเป็น true และลบ locale ด้านบนออก)
  // useBrowserLanguage: true,

  // ประเภทวิดเจ็ต: expanded_bubble = bubble ขนาดใหญ่ (พร้อมข้อความต้อนรับ), standard = bubble ขนาดเล็กแบบคลาสสิก
  type: "expanded_bubble",

  // โหมดมืด (ตามระบบโดยอัตโนมัติหรือบังคับใช้โหมดมืด)
  darkMode: "auto",        // ค่าที่เลือกได้: true | false | "auto"

  // ซ่อนไอคอน bubble ขนาดเล็กด้านล่าง (เหมาะสำหรับวางไว้ในปุ่มที่กำหนดเอง)
  hideMessageBubble: false,

  // ซ่อนปุ่มลูกศร "pop-out window" ที่มุมขวาล่าง
  showPopoutButton: false,

  // ชื่อ launcher แบบกำหนดเอง (แสดงในโหมด bubble ขนาดใหญ่)
  launcherTitle: "Online Support",

  // ข้อความต้อนรับ (มีผลในโหมด expanded_bubble)
  welcomeTitle: "Hello! How can we help you?",
  welcomeDescription: "We usually reply within a few minutes.",

  // ข้อความแจ้งเมื่อออนไลน์/ออฟไลน์
  availableMessage: "We are online and ready to assist you at any time",
  unavailableMessage: "We are currently offline and will reply as soon as possible during business hours",

  // สวิตช์ฟีเจอร์
  enableFileUpload: true,       // อนุญาตให้อัปโหลดไฟล์
  enableEmojiPicker: true,      // อนุญาตให้ใช้อีโมจิ
  enableEndConversation: true,  // อนุญาตให้ผู้ใช้จบการสนทนาได้เอง

  // ตัวเลือกขั้นสูงอื่น ๆ (เปิดใช้ตามต้องการ)
  // showUnreadMessagesDialog: true,   // การแจ้งเตือนแบบป๊อปอัปเมื่อมีข้อความที่ยังไม่ได้อ่าน (ค่าเริ่มต้น: true)
  // baseDomain: "yourcompany.com",    // ใช้สำหรับการปรับใช้หลายโดเมน
};

</script>

<!-- 2. โหลด LiveDesk Widget SDK (แทนที่ด้วยโดเมนและ token ของคุณเอง) -->
<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

Event Name Description Listener Example
livedesk:ready ทริกเกอร์เมื่อ SDK โหลดเสร็จสมบูรณ์และสามารถเรียกใช้เมธอดได้อย่างปลอดภัย window.addEventListener('livedesk:ready', () => { /* Initialization */ });
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 Solid Transparent White Qiyu
ติดต่อฝ่ายขาย