Memasang Live Chat Barantum di Website
Buat integrasi Live Chat lalu pasang widget-nya di website agar pengunjung bisa chat dengan tim Anda. Semua chat masuk ke inbox BarantumChat bersama channel lain.
Kapan memasang Live Chat?
- Anda ingin pengunjung website bisa langsung bertanya tanpa pindah ke aplikasi lain.
- Tim ingin menjawab pengunjung website dari inbox yang sama dengan channel lain.
Hasilnya seperti apa?
Widget chat tampil di website Anda. Chat dari pengunjung masuk ke inbox BarantumChat, lalu tim membalasnya dari Barantum.
Contoh: widget Live Chat terbuka di website Anda
Sebelum memulai
- Anda masuk ke Barantum dengan akun berperan Admin.
- Paket Anda sudah termasuk kanal Live Chat. Cek kanal per paket di Harga Barantum.
- Anda atau tim IT bisa mengubah kode HTML website.
Langkah-langkah
- Di BarantumChat, klik ikon Integrasi di sidebar kiri.
- Pada halaman Saluran Integrasi, klik kartu Live Chat.
Langkah 1–2: Menu Integrasi dan kanal Live Chat
- Klik Hubungkan di kanan atas halaman Live Chat.
Langkah 3: Tombol Hubungkan
- Isi Nama Live Chat (4a), nama internal untuk membedakan integrasi, misalnya Live Chat Website Utama. Isi juga URL Website Customer (opsional) (4b) dengan alamat website tempat widget dipasang, atau biarkan kosong.
- Klik Aktifkan Otomatis (5).
Langkah 4–5: Mengisi data integrasi Live Chat
- Setelah muncul Live Chat aktif, klik Salin pada snippet embed.
Langkah 6: Snippet embed siap disalin
- Tempel snippet sebelum tag penutup </body> di setiap halaman website yang ingin menampilkan Live Chat.
- Simpan dan deploy perubahan website, lalu muat ulang halamannya.
Ada dua bentuk kode Live Chat, dan keduanya didukung:
- Kode versi baru memuat file packs/js/sdk.js dengan nilai websiteToken.
- Kode versi lama memuat file widget.js dengan atribut data-livechat-inbox.
Anda tidak perlu memilih atau mengetik ulang kodenya. Cukup salin kode yang tampil di halaman pemasangan Live Chat di akun Anda.
Kode versi baru (contoh; websiteToken diganti token Live Chat Anda):
<script>
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src="https://livechat.barantum.com/packs/js/sdk.js";g.defer=true;
s.parentNode.insertBefore(g,s);g.onload=function(){
window.barantumSDK.run({websiteToken:"TOKEN_WEBSITE_ANDA",baseUrl:"https://livechat.barantum.com"})}})(document,"script");
</script>
Kode versi lama:
<script
src="https://livechat.barantum.com/widget.js"
data-livechat-url="https://livechat.barantum.com"
data-livechat-inbox="INBOX_IDENTIFIER_ANDA"
defer
></script>
Catatan: Selalu pakai snippet yang Anda salin dari halaman integrasi, karena berisi identitas Live Chat Anda sendiri.
Hasil: Bubble Live Chat muncul di website. Kirim pesan percobaan, lalu pastikan pesan itu masuk ke Pesan Masuk BarantumChat.
Gambar 1: Bubble Live Chat (1) di website
Tips: Di halaman ini juga tersedia Link chat langsung yang bisa dibagikan, misalnya di email atau media sosial, tanpa memasang snippet.
Memastikan Live Chat sudah berjalan
- Buka website Anda di browser, sebaiknya di jendela penyamaran (incognito) agar tidak memakai tampilan lama dari cache.
- Pastikan bubble Live Chat tampil di pojok kanan bawah, lalu klik dan kirim pesan percobaan.
- Buka inbox BarantumChat. Pesan percobaan tampil sebagai chat Live Chat, dengan ikon dan nama Live Chat Anda (3).
Gambar: Chat Live Chat di daftar chat BarantumChat
- Balas dari BarantumChat, lalu pastikan balasannya muncul di widget di website.
Menyalin ulang snippet dari widget yang sudah ada
Jika snippet hilang atau perlu dipasang di halaman lain, salin lagi dari halaman detail widget.
- Buka Integrasi > Live Chat, lalu klik Kelola (1) pada kartu widget yang ingin dipakai.
Langkah 1: Tombol Kelola pada kartu widget Live Chat
- Halaman detail widget terbuka. Di kiri tampil Pratinjau langsung widget seperti yang dilihat pengunjung; di kanan ada tab Info, Tampilan, Percakapan, dan Pemasangan & tautan. Klik tab Pemasangan & tautan (2a), lalu klik bagian Pasang di website (2b).
Langkah 2: Tab Pemasangan & tautan di halaman detail widget
- Klik Salin (3) pada Snippet embed Widget SDK, lalu tempel di website seperti langkah 7–8 di atas.
Langkah 3: Tombol Salin pada snippet embed
- Untuk kembali ke daftar widget, klik ikon panah kiri di kiri atas halaman detail.
Jika tidak sesuai
Masalah | Penyebab | Cara memperbaiki |
Bubble Live Chat tidak muncul | Snippet belum disimpan dan di-deploy, ditempel di halaman yang salah, atau browser masih menampilkan versi lama | Pastikan snippet ada sebelum </body> di halaman tersebut, deploy ulang website, lalu buka lagi di jendela penyamaran |
Kode snippet tampil sebagai teks di halaman website | Snippet ditempel di editor teks biasa, bukan di bagian kode HTML | Tempel snippet di mode HTML atau di pengaturan kode tambahan (custom code) website Anda |
Bubble muncul, tetapi pesan tidak masuk ke inbox | Integrasi Live Chat sedang dijeda | Di halaman Live Chat, aktifkan lagi sakelar widget |
Pesan masuk ke widget Live Chat yang salah | Snippet yang ditempel berasal dari widget lain (Anda bisa punya beberapa widget untuk domain berbeda) | Klik Kelola pada widget yang benar, salin lagi kodenya (lihat Menyalin ulang snippet dari widget yang sudah ada), lalu ganti snippet di website |
Masih bermasalah?
Hubungi tim support lewat live chat di pojok kanan bawah support.barantum.com atau email support@barantum.com.