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"
/>
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' },
}),
'*',
),
);
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"
/>
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 () {}).
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
});
Tetapkan Variabel Kustom Percakapan
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // Contoh: UTM tingkat percakapan
session_type: "support"
});
- 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
});
});
- 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
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
Tampilkan/Sembunyikan Bubble Chat
window.$livedesk.toggleBubbleVisibility('hide'); // tampilkan/sembunyikan
Mode Pop-Out
Buka antarmuka chat dalam mode jendela pop-out.
window.$livedesk.popoutChatWindow();
Tetapkan Bahasa
Tetapkan bahasa widget.
window.$livedesk.setLocale("en"); // Kode bahasa string, misalnya: zh-CN
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');
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>
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); }); |










