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
});
});
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
});
Mengatur "Atribut Kustom Percakapan"
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // Contoh: UTM tingkat sesi
session_type: "support"
});
- 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
});
});
- 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
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
Tampilkan/Sembunyikan Chat Bubble
window.$livedesk.toggleBubbleVisibility('hide'); // tampilkan/sembunyikan
Mode Popout
Buka antarmuka chat dalam mode jendela popout.
window.$livedesk.popoutChatWindow();
Mengatur Bahasa
Atur bahasa widget
window.$livedesk.setLocale("en"); // kode bahasa string, contoh: zh-CN
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');
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>
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); }); |










