logoDokumen
Cari

Panduan Lanjutan Website

Saluran website mendukung lebih banyak konfigurasi melalui antarmuka LiveDesk Widget SDK untuk memenuhi kebutuhan pengguna.

Antarmuka LiveDesk Widget SDK

Mengatur Userid dan Informasi Pengguna (Mode Normal)

window.addEventListener("livedesk:ready", function () { window.$livedesk.setUser("ID Unik Pengguna (misal: user_id)", { // Parameter pertama adalah identitas unik email: "user@example.com", name: "Nama Pengguna", avatar_url: "https://example.com/avatar.jpg", // Opsional phone_number: "+1234567890" // Opsional }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setUser("ID Unik Pengguna (misal: user_id)", {  // Parameter pertama adalah identitas unik
    email: "user@example.com",
    name: "Nama Pengguna",
    avatar_url: "https://example.com/avatar.jpg",  // Opsional
    phone_number: "+1234567890"  // Opsional
  });
});

            
Tampilkan blok kode ini di jendela mengambang

Mengatur Userid dan Informasi Pengguna (Mode Enkripsi)

Aktifkan autentikasi (disarankan): Untuk mencegah pemalsuan dan memastikan sesi tetap berjalan di berbagai browser, aktifkan HMAC pada konfigurasi (gunakan SHA256 untuk menghasilkan identifier_hash). Contoh (JavaScript):

const crypto = require('crypto'); const key = 'Token HMAC Anda'; // Salin dari pengaturan Inboxes const message = 'ID Unik Pengguna'; const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex'); // Lampirkan pada setUser window.$livedesk.setUser("ID Unik Pengguna", { ...info lainnya, identifier_hash: identifier_hash });
              
              const crypto = require('crypto');
const key = 'Token HMAC Anda';  // Salin dari pengaturan Inboxes
const message = 'ID Unik Pengguna';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');

// Lampirkan pada setUser
window.$livedesk.setUser("ID Unik Pengguna", {
  ...info lainnya,
  identifier_hash: identifier_hash
});

            
Tampilkan blok kode ini di jendela mengambang

Mengatur "Atribut Kustom Percakapan"

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

            
Tampilkan blok kode ini di jendela mengambang
  • Variabel kustom ini akan tampil di Livedesk - Percakapan - Informasi Percakapan.

Mengatur "Atribut Kustom Kontak"

window.addEventListener("livedesk:ready", function () { window.$livedesk.setCustomAttributes({ pricing_plan: "premium", // key: Identitas unik yang telah ditentukan, value: diatur sesuai tipe (misal: 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: Identitas unik yang telah ditentukan, value: diatur sesuai tipe (misal: string)
    signup_date: new Date(),  // Contoh: Tipe tanggal
    account_id: 123           // Contoh: Tipe angka
  });
});

            
Tampilkan blok kode ini di jendela mengambang
  • Variabel kustom ini akan tampil di "Livedesk - Percakapan - Atribut Kontak".

Menghapus Atribut Pengguna

Hapus atribut kustom tertentu.

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

Mengubah Status Buka/Tutup Chat Bubble

Ubah status buka/tutup widget.

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

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

            
Tampilkan blok kode ini di jendela mengambang

Tampilkan/Sembunyikan Chat Bubble

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

            
Tampilkan blok kode ini di jendela mengambang

Mode Popout

Buka antarmuka chat dalam mode jendela popout.

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

            
Tampilkan blok kode ini di jendela mengambang

Mengatur Bahasa

Atur bahasa widget

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

            
Tampilkan blok kode ini di jendela mengambang

Menambah/Menghapus Label

Tambahkan label pada percakapan saat ini (sebelum percakapan dimulai), label akan otomatis diterapkan ke percakapan

window.$livedesk.setLabel('support-ticket'); // identitas label string window.$livedesk.removeLabel('support-ticket');
              
              window.$livedesk.setLabel('support-ticket'); // identitas label string
window.$livedesk.removeLabel('support-ticket');

            
Tampilkan blok kode ini di jendela mengambang

Objek Konfigurasi Widget Livedesk

Objek global yang diatur saat inisialisasi (sebelum memuat SDK) untuk menyesuaikan perilaku widget. Didefinisikan melalui window.livedeskSettings lalu diteruskan pada window.livedeskSDK.run().

Properti Objek

Nama Properti Tipe Deskripsi Nilai Default Contoh
hideMessageBubble boolean Sembunyikan bubble pesan. false true
showUnreadMessagesDialog boolean Tampilkan dialog pesan belum dibaca. true false
position string Posisi widget. 'right' 'left'
locale string Kode bahasa default. Bahasa pada Dashboard 'zh-CN'
useBrowserLanguage boolean Gunakan bahasa browser (abaikan locale). false true
type string Tipe widget. 'standard' 'expanded_bubble'
darkMode boolean Aktifkan mode gelap. false true
baseDomain string Domain dasar (opsional, untuk multi-domain) - 'example.com'
launcherTitle string Judul peluncur. - 'Support'
showPopoutButton boolean Tampilkan tombol popout. true false
welcomeTitle string Judul sambutan. - 'Welcome!'
welcomeDescription string Deskripsi sambutan. - 'How can we help you?'
availableMessage string Pesan saat online. - 'We are online.'
unavailableMessage string Pesan saat offline. - 'We will reply later.'
enableFileUpload boolean Aktifkan unggah file. true false
enableEmojiPicker boolean Aktifkan pemilih emoji. true false
enableEndConversation boolean Aktifkan tombol akhiri percakapan. true false

Contoh Kode

<script> // 1. Atur konfigurasi global sebelum memuat sdk.js (harus diletakkan di awal script) window.livedeskSettings = { // Posisi widget: kiri bawah (default kanan bawah) position: "left", // Paksa bahasa ke Mandarin Sederhana (akan menampilkan Mandarin meski browser berbahasa Inggris) locale: "zh-CN", // Deteksi otomatis bahasa browser (jika ingin mengutamakan bahasa browser pengguna, set 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 (otomatis mengikuti sistem atau paksa gelap) darkMode: "auto", // Nilai opsional: true | false | "auto" // Sembunyikan ikon bubble kecil di bawah (cocok untuk tombol kustom) hideMessageBubble: false, // Sembunyikan tombol panah kecil "jendela popout" di kanan bawah showPopoutButton: false, // Judul peluncur kustom (ditampilkan pada mode expanded bubble) launcherTitle: "Dukungan Online", // Pesan sambutan (berlaku pada mode expanded_bubble) welcomeTitle: "Halo! Ada yang bisa kami bantu?", welcomeDescription: "Kami biasanya membalas dalam beberapa menit~", // Teks prompt saat online/offline availableMessage: "Kami online, siap melayani Anda", unavailableMessage: "Saat ini kami sedang offline, akan membalas secepatnya pada jam kerja", // Pengaturan fitur enableFileUpload: true, // Izinkan unggah file enableEmojiPicker: true, // Izinkan penggunaan emoji enableEndConversation: true, // Izinkan pengguna mengakhiri percakapan // Opsi lanjutan lainnya (aktifkan sesuai kebutuhan) // showUnreadMessagesDialog: true, // Pop-up pengingat jika ada pesan belum dibaca (default true) // baseDomain: "yourcompany.com", // 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. Atur konfigurasi global sebelum memuat sdk.js (harus diletakkan di awal script)
window.livedeskSettings = {
  // Posisi widget: kiri bawah (default kanan bawah)
  position: "left",

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

  // Deteksi otomatis bahasa browser (jika ingin mengutamakan bahasa browser pengguna, set 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 (otomatis mengikuti sistem atau paksa gelap)
  darkMode: "auto",        // Nilai opsional: true | false | "auto"

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

  // Sembunyikan tombol panah kecil "jendela popout" di kanan bawah
  showPopoutButton: false,

  // Judul peluncur kustom (ditampilkan pada mode expanded bubble)
  launcherTitle: "Dukungan Online",

  // Pesan sambutan (berlaku pada mode expanded_bubble)
  welcomeTitle: "Halo! Ada yang bisa kami bantu?",
  welcomeDescription: "Kami biasanya membalas dalam beberapa menit~",

  // Teks prompt saat online/offline
  availableMessage: "Kami online, siap melayani Anda",
  unavailableMessage: "Saat ini kami sedang offline, akan membalas secepatnya pada jam kerja",

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

  // Opsi lanjutan lainnya (aktifkan sesuai kebutuhan)
  // showUnreadMessagesDialog: true,   // Pop-up pengingat jika ada pesan belum dibaca (default true)
  // baseDomain: "yourcompany.com",    // 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 Listening Widget Livedesk

Nama Event Deskripsi Contoh Listener
livedesk:ready SDK telah dimuat sepenuhnya, aman untuk memanggil metode. window.addEventListener('livedesk:ready', () => { /* Inisialisasi */ });
livedesk:on-message Dipicu saat pesan baru diterima. window.addEventListener('livedesk:on-message', (data) => { console.log(data); });
livedesk:error Dipicu saat terjadi error pada SDK (v2.3.0+). window.addEventListener('livedesk:error', (error) => { console.error(error); });
icon
Hubungi Sales