Logo Site EngageLab Mark Colored TransparentDokumen
Cari

Panduan Penggunaan Lanjutan Website

Panduan Penggunaan Lanjutan Website untuk channel Website mendukung opsi konfigurasi tambahan melalui antarmuka LiveDesk Widget SDK atau dengan menggunakan iframe untuk memenuhi berbagai kebutuhan pengguna.

Pengaturan Terkait iframe

Lewati Layar Sambutan

Dalam mode iframe, pengguna dapat melewati layar sambutan saat membuka bubble dengan menambahkan parameter action=autoStart, yang akan membawa mereka langsung ke kotak chat untuk memulai percakapan.

<iframe class="livedesk-widget-iframe" src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" // Ganti website_token dengan nilai yang sesuai yang dihasilkan setelah membuat channel 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" // Ganti website_token dengan nilai yang sesuai yang dihasilkan setelah membuat channel
    title="Live desk"
    allow="camera;microphone"
/>

            
Tampilkan blok kode ini di jendela mengambang

Tetapkan User ID

Tersedia dua metode konfigurasi:

Metode 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' },
}),
'*',
),
);

            
Tampilkan blok kode ini di jendela mengambang

Metode 2: Tambahkan parameter user_id=xxxxx ke 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"
/>

            
Tampilkan blok kode ini di jendela mengambang

Antarmuka LiveDesk Widget SDK

Tetapkan User ID dan Informasi Pengguna (Mode Standar)

window.addEventListener("livedesk:ready", function () { window.$livedesk.setUserId("Unique user ID (such as user_id)", { // Parameter pertama adalah pengenal unik email: "user@example.com", name: "User Name", avatar_url: "https://example.com/avatar.jpg", // Opsional phone_number: "+1234567890" // Opsional }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setUserId("Unique user ID (such as user_id)", {  // Parameter pertama adalah pengenal unik
    email: "user@example.com",
    name: "User Name",
    avatar_url: "https://example.com/avatar.jpg",  // Opsional
    phone_number: "+1234567890"  // Opsional
  });
});

            
Tampilkan blok kode ini di jendela mengambang
Catatan: Jika pengaturan user ID dalam konfigurasi dipicu oleh pengguna akhir, Anda dapat menghapus pembungkus event window.addEventListener("livedesk:ready", function () {}).

Tetapkan User ID dan Informasi Pengguna (Mode Terenkripsi)

Aktifkan autentikasi (disarankan): Untuk mencegah pemalsuan dan memastikan persistensi sesi lintas browser, aktifkan HMAC dalam konfigurasi (gunakan SHA256 untuk menghasilkan identifier_hash). Contoh (JavaScript):

const crypto = require('crypto'); const key = 'Your HMAC Token'; // Salin dari pengaturan Inbox const message = 'Unique user ID'; const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex'); // Lampirkan di setUser window.$livedesk.setUserId("Unique user ID", { ...Other information, identifier_hash: identifier_hash });
              
              const crypto = require('crypto');
const key = 'Your HMAC Token';  // Salin dari pengaturan Inbox
const message = 'Unique user ID';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');

// Lampirkan di setUser
window.$livedesk.setUserId("Unique user ID", {
  ...Other information,
  identifier_hash: identifier_hash
});

            
Tampilkan blok kode ini di jendela mengambang

Tetapkan Variabel Kustom Percakapan

window.$livedesk.setConversationCustomAttributes({ utm_source: "google", // Contoh: UTM tingkat percakapan session_type: "support" });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google",  // Contoh: UTM tingkat percakapan
  session_type: "support"
});

            
Tampilkan blok kode ini di jendela mengambang
  • Variabel kustom ini ditampilkan di LiveDesk - Conversation - Conversation Info.

Tetapkan Variabel Kustom Pengguna

window.addEventListener("livedesk:ready", function () { window.$livedesk.setCustomAttributes({ pricing_plan: "premium", // key: pengenal unik yang telah ditentukan; value: tetapkan sesuai tipe (seperti string) signup_date: new Date(), // Contoh: tipe tanggal account_id: 123 // Contoh: tipe angka }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setCustomAttributes({
    pricing_plan: "premium",  // key: pengenal unik yang telah ditentukan; value: tetapkan sesuai tipe (seperti string)
    signup_date: new Date(),  // Contoh: tipe tanggal
    account_id: 123           // Contoh: tipe angka
  });
});

            
Tampilkan blok kode ini di jendela mengambang
  • Variabel kustom ini ditampilkan di LiveDesk - Conversation - Contact Attributes.

Hapus Atribut Pengguna

Hapus atribut kustom yang ditentukan.

window.$livedesk.deleteCustomAttribute("pricing_plan"); // Nama key atribut string
              
              window.$livedesk.deleteCustomAttribute("pricing_plan"); // Nama key atribut string

            
Tampilkan blok kode ini di jendela mengambang

Ubah Status Bubble Chat

Ubah status buka/tutup widget.

window.$livdesk.toggle(); // Ubah widget dengan meneruskan status window.$livedesk.toggle("open"); // Buka widget chat window.$livedesk.toggle("close"); // Tutup widget chat
              
              window.$livdesk.toggle();

// Ubah widget dengan meneruskan status
window.$livedesk.toggle("open"); // Buka widget chat
window.$livedesk.toggle("close"); // Tutup widget chat

            
Tampilkan blok kode ini di jendela mengambang

Tampilkan/Sembunyikan Bubble Chat

window.$livedesk.toggleBubbleVisibility('hide'); // tampilkan/sembunyikan
              
              window.$livedesk.toggleBubbleVisibility('hide'); // tampilkan/sembunyikan

            
Tampilkan blok kode ini di jendela mengambang

Mode Pop-Out

Buka antarmuka chat dalam mode jendela pop-out.

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

            
Tampilkan blok kode ini di jendela mengambang

Tetapkan Bahasa

Tetapkan bahasa widget.

window.$livedesk.setLocale("en"); // Kode bahasa string, misalnya: zh-CN
              
              window.$livedesk.setLocale("en"); // Kode bahasa string, misalnya: zh-CN

            
Tampilkan blok kode ini di jendela mengambang

Tambahkan/Hapus Label

Tambahkan label ke sesi saat ini (sebelum percakapan dimulai). Label akan otomatis diterapkan ke percakapan.

window.$livdesk.setLabel('support-ticket'); // Pengenal label string window.$livdesk.removeLabel('support-ticket');
              
              window.$livdesk.setLabel('support-ticket'); // Pengenal label string
window.$livdesk.removeLabel('support-ticket');

            
Tampilkan blok kode ini di jendela mengambang

Objek Konfigurasi LiveDesk Widget

Objek global yang ditetapkan selama inisialisasi (sebelum memuat SDK) untuk menyesuaikan perilaku widget. Definisikan melalui window.livedeskSettings, lalu teruskan ke window.livedeskSDK.run().

Properti Objek

Property Name Type Description Default Value Example
hideMessageBubble boolean Menyembunyikan bubble pesan. false true
showUnreadMessagesDialog boolean Menampilkan dialog pesan yang belum dibaca. true false
position string Posisi widget. 'right' 'left'
locale string Kode bahasa default. Bahasa Dashboard 'zh-CN'
useBrowserLanguage boolean Menggunakan bahasa browser (mengabaikan locale). false true
type string Tipe widget. 'standard' 'expanded_bubble'
darkMode boolean Mengaktifkan mode gelap. false true
baseDomain string Domain dasar (opsional, untuk beberapa domain). - 'example.com'
launcherTitle string Judul launcher. - 'Support'
showPopoutButton boolean Menampilkan tombol pop-out. true false
welcomeTitle string Judul sambutan. - 'Welcome!'
welcomeDescription string Deskripsi sambutan. - 'How can we help you?'
availableMessage string Pesan online. - 'We are online.'
unavailableMessage string Pesan offline. - 'We will reply later.'
enableFileUpload boolean Mengaktifkan unggah file. true false
enableEmojiPicker boolean Mengaktifkan pemilih emoji. true false
enableEndConversation boolean Mengaktifkan tombol akhiri percakapan. true false

Contoh Kode

<script> // 1. Sebelum memuat sdk.js, tetapkan konfigurasi global terlebih dahulu (harus ditempatkan di awal script) window.livedeskSettings = { // Posisi widget: kiri bawah (default adalah kanan bawah) position: "left", // Paksa bahasa ke Mandarin Sederhana (akan menampilkan bahasa Mandarin meskipun browser menggunakan bahasa Inggris) locale: "zh-CN", // Deteksi otomatis bahasa browser (jika Anda ingin memprioritaskan bahasa browser pengguna, setel ke true dan hapus locale di atas) // useBrowserLanguage: true, // Tipe widget: expanded_bubble = bubble besar (dengan pesan sambutan), standard = bubble kecil klasik type: "expanded_bubble", // Mode gelap (ikuti sistem secara otomatis atau paksa mode gelap) darkMode: "auto", // Nilai opsional: true | false | "auto" // Sembunyikan ikon bubble kecil di bagian bawah (cocok untuk ditempatkan pada tombol kustom) hideMessageBubble: false, // Sembunyikan tombol panah "jendela pop-out" di sudut kanan bawah showPopoutButton: false, // Judul launcher kustom (ditampilkan dalam mode bubble besar) launcherTitle: "Online Support", // Pesan sambutan (berlaku dalam mode expanded_bubble) welcomeTitle: "Hello! How can we help you?", welcomeDescription: "We usually reply within a few minutes.", // Teks petunjuk yang ditampilkan saat online/offline 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", // Sakelar fitur enableFileUpload: true, // Izinkan unggah file enableEmojiPicker: true, // Izinkan penggunaan emoji enableEndConversation: true, // Izinkan pengguna mengakhiri percakapan secara proaktif // Opsi lanjutan lainnya (aktifkan sesuai kebutuhan) // showUnreadMessagesDialog: true, // Pengingat pop-up saat ada pesan yang belum dibaca (default: true) // baseDomain: "yourcompany.com", // Digunakan untuk deployment multi-domain }; </script> <!-- 2. Muat LiveDesk Widget SDK (ganti dengan domain dan token Anda sendiri) --> <script> (function(d,t) { var BASE_URL="https://www.engagelab.com"; // ← Ganti dengan alamat LiveDesk Anda 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', // ← Ganti dengan Website Token Anda baseUrl: BASE_URL }); } })(document,"script"); </script>
              
              <script>
// 1. Sebelum memuat sdk.js, tetapkan konfigurasi global terlebih dahulu (harus ditempatkan di awal script)
window.livedeskSettings = {
  // Posisi widget: kiri bawah (default adalah kanan bawah)
  position: "left",

  // Paksa bahasa ke Mandarin Sederhana (akan menampilkan bahasa Mandarin meskipun browser menggunakan bahasa Inggris)
  locale: "zh-CN",

  // Deteksi otomatis bahasa browser (jika Anda ingin memprioritaskan bahasa browser pengguna, setel ke true dan hapus locale di atas)
  // useBrowserLanguage: true,

  // Tipe widget: expanded_bubble = bubble besar (dengan pesan sambutan), standard = bubble kecil klasik
  type: "expanded_bubble",

  // Mode gelap (ikuti sistem secara otomatis atau paksa mode gelap)
  darkMode: "auto",        // Nilai opsional: true | false | "auto"

  // Sembunyikan ikon bubble kecil di bagian bawah (cocok untuk ditempatkan pada tombol kustom)
  hideMessageBubble: false,

  // Sembunyikan tombol panah "jendela pop-out" di sudut kanan bawah
  showPopoutButton: false,

  // Judul launcher kustom (ditampilkan dalam mode bubble besar)
  launcherTitle: "Online Support",

  // Pesan sambutan (berlaku dalam mode expanded_bubble)
  welcomeTitle: "Hello! How can we help you?",
  welcomeDescription: "We usually reply within a few minutes.",

  // Teks petunjuk yang ditampilkan saat online/offline
  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",

  // Sakelar fitur
  enableFileUpload: true,       // Izinkan unggah file
  enableEmojiPicker: true,      // Izinkan penggunaan emoji
  enableEndConversation: true,  // Izinkan pengguna mengakhiri percakapan secara proaktif

  // Opsi lanjutan lainnya (aktifkan sesuai kebutuhan)
  // showUnreadMessagesDialog: true,   // Pengingat pop-up saat ada pesan yang belum dibaca (default: true)
  // baseDomain: "yourcompany.com",    // Digunakan untuk deployment multi-domain
};

</script>

<!-- 2. Muat LiveDesk Widget SDK (ganti dengan domain dan token Anda sendiri) -->
<script>
  (function(d,t) {
    var BASE_URL="https://www.engagelab.com";          // ← Ganti dengan alamat LiveDesk Anda
    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',  // ← Ganti dengan Website Token Anda
        baseUrl: BASE_URL
      });
    }
  })(document,"script");
</script>

            
Tampilkan blok kode ini di jendela mengambang

Event Listener LiveDesk Widget

Event Name Description Listener Example
livedesk:ready Dipicu saat SDK dimuat sepenuhnya dan metode dapat dipanggil dengan aman. window.addEventListener('livedesk:ready', () => { /* Initialization */ });
livedesk:on-message Dipicu saat pesan baru diterima. window.addEventListener('livedesk:on-message', (data) => { console.log(data); });
livedesk:error Dipicu saat terjadi error SDK (v2.3.0+). window.addEventListener('livedesk:error', (error) => { console.error(error); });
Icon Solid Transparent White Qiyu
Hubungi Sales