Menjawab pertanyaan dengan cepat membangun kepercayaan, tetapi saat Anda berpindah antara WhatsApp, Messenger, Telegram, dan email, pesan bisa terlewat begitu saja. Ping yang terlewat, balasan tertunda, dan notifikasi berserakan bisa membuat bisnis Anda terlihat tidak responsif, sehingga lead yang hangat pun bisa mendingin sebelum Anda sempat membantu.
Obrolan Semua-dalam-Satu widget, Anda bisa menempatkan satu pemicu obrolan di situs WordPress Anda sehingga pengunjung bisa menghubungi Anda lewat aplikasi mana pun yang telah mereka pakai. Pemasangan cepat, menyesuaikan dengan desain situs Anda, dan menampilkan semua kanal dalam satu jendela — tidak perlu mengelola inbox baru. Di bawah ini, kami akan membimbing Anda melalui proses pengaturannya, tips pemecahan masalah, dan cara alternatif menambahkan Obrolan Langsung ke situs Anda.
- Tambahkan Live Chat ke situs WordPress Anda tanpa keahlian pemrograman
- Pilih antara opsi bawaan vs integrasi obrolan pihak ketiga
- Terapkan tips praktis untuk membuat widget Anda tampil lebih baik di WordPress
- Atasi masalah umum terkait penyematan widget dan tampilan obrolan
Luncurkan obrolan langsung WordPress Anda sekarang.
Berikut alur kerja singkat bagi siapa saja yang ingin menambahkan obrolan langsung di WordPress dalam beberapa langkah sederhana:
- Buka Elfsight’s editor dan pilih template.
- Sesuaikan widget Obrolan Langsung Anda.
- Klik ‘Tambahkan ke situs web secara gratis’ dan salin kodenya.
- Tempelkan ke backend situs WordPress Anda.
Buat widget obrolan langsung Anda sendiri di editor interaktif ↓
Semua yang bisa dilakukan widget All-in-One Chat
Sekarang Anda telah melihat betapa mudahnya membangun dan menyesuaikan widget Anda, berikut fitur-fitur yang membantu Obrolan Langsung membangun koneksi nyata dengan pelanggan:
| Fitur utama | Mengapa ini penting |
|---|---|
| Penggabungan Messenger dalam Obrolan Semua-dalam-Satu | Pengunjung memilih aplikasi pesan favorit mereka, sehingga setiap percakapan dimulai di antarmuka yang akrab dan nyaman bagi mereka. |
| Pemicu Cerdas untuk Jendela Obrolan | Kotak obrolan muncul tepat pada saat yang tepat, membantu Anda mengajak pengunjung berinteraksi dan meningkatkan konversi tanpa gangguan. |
| Opsi kustomisasi yang kaya | Sesuaikan pemicu obrolan dengan merek Anda agar terlihat sebagai bagian dari situs, bukan alat yang ditempelkan — berguna saat pedoman merek ketat. |
| Penempatan Responsif dan Fleksibel | Atur posisi dan offset per perangkat agar gelembung tidak menutupi tombol keranjang belanja atau navigasi seluler. |
| Aturan Tampilan Terarah | Tampilkan obrolan kepada audiens yang tepat atau di halaman tertentu, sehingga tim Anda bisa fokus pada kontak yang paling penting. |
Ini hanyalah beberapa sorotan dari apa yang bisa dilakukan widget obrolan langsung untuk bisnis Anda. Untuk daftar lengkapnya, lihat Halaman Fitur widget tersebut.
6. Tambahkan obrolan langsung ke WordPress langkah demi langkah
Bagian ini merinci setiap langkah untuk membuat, menyesuaikan, dan menyematkan obrolan langsung di situs WordPress Anda, dengan petunjuk praktis untuk menyesuaikan saluran obrolan dan penampilan sesuai audiens Anda.
1. Pilih template widget
Mulailah dengan membuka editor Elfsight dan memilih templat siap pakai yang sesuai tujuan situs Anda. Anda bisa memilih dari preset seperti Booking, Support, Onboarding, Feedback Chat, dll. Ada tiga tata letak yang tersedia yang bisa Anda sesuaikan nanti:
- Balon Mengambang
- Sematkan Bubble
- Sematkan Jendela Obrolan
Setiap widget dioptimalkan untuk gaya keterlibatan yang berbeda. Untuk saat ini, mari pilih templat pemula yang optimal.

Setelah Anda memilih, klik “Lanjutkan dengan templat ini” untuk melanjutkan ke pengaturan dan styling.
2. Tambahkan saluran obrolan Anda
Di tab “Kontak”, hubungkan aplikasi pesan pilihan Anda — seperti WhatsApp, Messenger, Telegram, Instagram, Viber, atau bahkan Email. Anda bisa menghubungkan beberapa platform sekaligus, memungkinkan pengunjung menjangkau Anda melalui saluran mana pun yang paling mereka gunakan. Cukup klik “Tambahkan Kontak” untuk menambahkan lebih banyak messenger.

3. Sesuaikan info agen dan pesan
Selanjutnya, buka tab “Konten” untuk mengatur nama agen obrolan, foto, dan statusnya (online, waktu respons, atau kustom). Tambahkan sapaan ramah atau pesan promosi yang muncul saat pengguna membuka jendela obrolan — misalnya, “Hai! Butuh bantuan menemukan paket yang tepat?” Pesan pribadi yang konsisten dengan merek meningkatkan keterlibatan dan membuat pengguna merasa lebih terhubung.

Anda juga bisa memperbarui gelembung obrolan dengan memilih ikon yang pas dari perpustakaan atau mengunggah milik Anda sendiri.
4. Sesuaikan perilaku obrolan dan pemicu tampilan
Di tab “Pengaturan”, pilih kapan dan bagaimana widget obrolan Anda muncul. Anda bisa memicu gelembung obrolan saat pemuatan halaman, setelah beberapa detik, saat menggulir, atau berdasarkan perilaku pengguna. Anda juga bisa memilih halaman mana yang menampilkan obrolan — ideal untuk menargetkan halaman dukungan atau checkout.

Jika situs web Anda memiliki Google Analytics atau Google Tag Manager terpasang, bagian Google Analytics memungkinkan Anda menambahkan sebuah peristiwa “Widget Dibuka”, sehingga Anda bisa melihat kapan pengunjung membuka obrolan Anda.
5. Sesuaikan gaya widget obrolan Anda
Buka tab “Appearance” untuk menyesuaikan widget dengan desain situs Anda. Anda bisa mengedit elemen-elemen berikut:
- Gaya gelembung obrolan: Sesuaikan warna latar belakang gelembung, ikon, dan lencana notifikasi.
- Header dan Latar Belakang: Ubah latar belakang widget untuk menciptakan tampilan yang konsisten dan mengundang.
- Tipografi dan animasi: Pilih font pesan dan gaya animasi.
- Tombol Obrolan: Sesuaikan warna masing-masing tombol agar terlihat berbeda secara visual.

Untuk kontrol lebih rinci, gunakan bidang kode CSS dan JS — jelajahi Komunitas kami untuk tips dan contoh kode siap pakai.
6. Tambahkan obrolan langsung ke WordPress
Setelah widget Anda sepenuhnya dikonfigurasi, klik “Tambahkan ke situs web secara gratis” untuk menghasilkan kode sisip unik.

Berikut tiga cara sederhana untuk benar-benar menyematkan Obrolan All-in-One Anda ke WordPress:
Opsi 1: Tambahkan Obrolan Langsung di Halaman Tertentu
Alur kerja cepat: Editor Halaman → Tambah blok HTML Kustom → Tempel kode → Perbarui halaman
- Buka dasbor WordPress Anda dan pergi ke Halaman → Edit halaman yang diinginkan.
- HTML Kustom Klik ikon “+” dan pilih HTML Kustom dari daftar blok.
- Tempelkan kode sematan Obrolan Semua-dalam-Satu ke blok tersebut.
- Perbarui atau Publikasikan untuk menyimpan perubahan dan melihat pratinjau penempatan obrolan Anda.
Metode ini paling cocok untuk halaman kontak, harga, atau dukungan, di mana akses obrolan sebaiknya terasa kontekstual — tidak persisten.
Opsi 2: Tampilkan obrolan di semua halaman (seluruh situs)
Alur kerja singkat: Tampilan → Widget → pilih area → HTML Kustom → tempel → Simpan
- Dari dasbor Anda, buka Tampilan → Widget
- Pilih area widget yang dimuat di setiap halaman (mis. Footer).
- Tambahkan widget HTML Kustom ke area itu.
- Tempelkan kode sematan All-in-One Chat Anda dan klik Simpan.
Suka Customizer? Pergi ke Tampilan → Sesuaikan, tempelkan kode ke bidang konten yang sesuai, lalu Publikasikan. Keduanya menjaga launcher tetap terlihat di seluruh situs tanpa mengubah file tema.
Opsi 3: Tombol obrolan mengambang (selalu terlihat)
Alur kerja singkat: Widget Editor → Layout → Floating → Choose Position → Save
- Buka widget Anda di editor Elfsight.
- Pergi ke Tata Letak → Posisi dan pilih penempatan Floating.
- Pilih posisi sudut — kanan bawah atau kiri bawah.
- Klik Simpan dan salin kembali kode yang telah diperbarui jika diperlukan.
- Tempelkan dan sematkan di situs Anda menggunakan salah satu cara di atas.
Pengaturan ini menjaga gelembung obrolan tetap terlihat saat pengunjung menggulir, mendorong percakapan spontan tanpa mengganggu alur penjelajahan mereka.
- Pastikan seluruh kode semat disalin dengan benar (tidak ada tag yang hilang)
- Nonaktifkan caching atau hapus cache browser Anda
- Periksa ulang penempatan (harus berada sebelum penutup tag untuk tampilan global)
- Pastikan tema WordPress Anda mendukung blok HTML kustom atau skrip yang disisipkan
Jika Anda menjelajahi berbagai cara untuk mengintegrasikan fungsionalitas obrolan ke situs Anda, bagian berikut menjabarkan metode resmi dan bawaan.
Cara menambahkan Obrolan Langsung ke WordPress secara bawaan
Ada beberapa cara bawaan dan didukung platform untuk mengaktifkan pesan real-time di situs Anda. Meskipun masing-masing memiliki keuntungan sendiri, kompleksitas pengaturan dan kebutuhan pemeliharaan bisa berbeda-beda.
Facebook Messenger (m.me link)
Meta menghentikan Facebook Chat Plugin pada Mei 2024, sehingga widget Messenger lama yang bisa disematkan tidak lagi berfungsi. Yang tetap berfungsi adalah tautan Messenger langsung:
- Build your link using the format:
https://m.me/<your-page-username> - Tambahkan sebagai tombol atau tautan di mana saja di situs Anda dengan HTML standar.
- Atur tampilannya dengan CSS agar sesuai dengan merek Anda.
- Paste into your site. Tempelkan kode ke HTML situs Anda tepat sebelum tag penutup:
</body>
API Klik untuk Chat WhatsApp Bisnis
WhatsApp menawarkan API Click-to-Chat yang membuat tautan pesan langsung atau tombol untuk memulai obrolan dengan bisnis Anda.
- Buat tautan. Gunakan format ini untuk menghasilkan URL obrolan langsung:
https://wa.me/<your-number> - Sisipkan dalam tombol atau tautan. Gunakan HTML standar untuk menambahkan tautan sebagai tombol di situs Anda.
- Tata gaya dengan CSS. Sesuaikan tombolnya agar cocok dengan tampilan merek Anda.
Navigate to Pusat Bantuan WhatsApp to find out more.
Telegram Web Widget
Telegram menyediakan widget web bawaan yang memungkinkan pengunjung mengirim pesan langsung ke akun Telegram Anda atau bot.
- Buat bot Telegram. Gunakan BotFather untuk menghasilkan token API.
- Implementasikan menggunakan API Telegram. Gunakan API resmi untuk menerima dan merespons pesan.
- <strong>Sematkan tautan atau tombol.</strong> Tambahkan tautan seperti <code>https://t.me/your_bot</code> atau gunakan widget kustom berbasis JavaScript.
Lihat Telegram Widgets untuk melihat opsi Anda.
Bagaimana perbandingan cara menambahkan live chat ini?
| Metode | Pro Utama | Kelemahan Utama |
|---|---|---|
| Elfsight Obrolan Semua-dalam-Satu | Menggabungkan WhatsApp, Messenger, Telegram, dan lainnya dalam satu widget mengambang — tanpa coding. | Akun diperlukan untuk mengakses dasbor. |
| Facebook Messenger | Tautan m.me tetap langsung membuka Messenger. | Tautan saja, tanpa jendela obrolan di situs. |
| WhatsApp Klik-untuk-Chat | Cepat, tanpa banyak kode, cara memulai obrolan melalui tautan atau tombol. | Tidak ada UI bawaan atau gaya widget; hanya berfungsi untuk WhatsApp. |
| Telegram API/Widget | Ideal untuk integrasi dan bot yang fokus pada pengembang. | Memerlukan konfigurasi API dan tidak memiliki kustomisasi visual. |
Jika Anda ingin tips praktis agar obrolan langsung berjalan lancar di situs WordPress Anda, lanjutkan membaca untuk saran langsung berikutnya.
Tips Pakar untuk Memaksimalkan All-in-One Chat
Dari pengalaman tim Elfsight dalam menguji widget obrolan langsung di berbagai situs, kami tahu susunan yang tepat bisa mengubah pengunjung kasual menjadi pelanggan yang terlibat. Berikut daftar periksa andalan kami untuk membuat widget obrolan langsung Anda mulus, personal, dan siap meningkatkan konversi.
- Urutkan saluran berdasarkan siapa yang benar-benar menanganinya. Tombol-tombol muncul dalam urutan yang Anda tambahkan, dan yang pertama adalah jalur dengan hambatan terendah — letakkan saluran yang paling responsif di bagian atas.
- Selalu sertakan fallback tanpa aplikasi. Kanal Messenger hanya berfungsi jika pengunjung memiliki aplikasi terkait; jika tidak, widget hanya menampilkan pemberitahuan instal dulu. Tambahkan Email atau Telepon agar pengunjung desktop tanpa WhatsApp/Telegram tidak terjebak.
- Sesuaikan “Remember Visitor” daripada meninggalkan pengaturan bawaan. Setelah seseorang menutup obrolan, balon obrolan tidak akan terbuka lagi untuk jangka waktu tertentu (default 1 hari). Pendekkan untuk halaman dengan niat tinggi, perpanjang jika balon obrolan terasa mengganggu.
- Sisipkan Teks SMS Default Aksi SMS memungkinkan Anda menetapkan teks pesan default — sisipkan konteks (nama produk, halaman) sehingga balasan datang sudah terframe. Widget tidak mengirim apa pun ke kanal Messenger, jadi ini adalah satu-satunya peluang Anda untuk memberikan konteks.
- Siapkan sedikit CSS jika pedoman merek ketat. Ukuran balon, pembulatan sudut, dan ukuran huruf bukan slider — ini tweak CSS kustom. Rencanakan potongan kode kecil alih-alih mengharapkan kendali satu-klik.
- Jadwalkan pemicu obrolan sesuai jam operasional Anda dan tetapkan waktu balasan yang wajar. Gunakan Pengaturan → Tanggal & Waktu untuk menyembunyikan obrolan di luar jam operasional, dan sesuaikan waktu balasan pada Keterangan agar sesuai — jangan menyiratkan balasan instan pada pukul 02:00.
Selanjutnya, mari lihat contoh nyata bagaimana menambahkan widget obrolan langsung mengubah keterlibatan pelanggan pada salah satu pengguna kami.
All-in-One Chat di tempat kerja
Wales Outdoors adalah bisnis tur pendakian dan petualangan yang dijalankan oleh Andrew Lamb. Dengan lebih dari 10 widget Elfsight yang digunakan, widget All-in-One Chat menjadi alat komunikasi utama bagi Andrew, membantu mengubah pengunjung situs menjadi pemesanan tur nyata melalui pesan instan.
Sebelum menggunakan Elfsight
Cari pelanggan potensial sering memiliki pertanyaan tentang rute, persyaratan kebugaran, perlengkapan, atau ketersediaan. Namun bertanya berarti mengisi formulir kontak atau mengirim email, dan menunggu balasan. Penundaan itu menciptakan gesekan, sehingga orang ragu untuk memesan.
- Tidak ada opsi komunikasi cepat di situs web.
- Lead terlewat karena balasan yang tertunda
- Sulit membangun kepercayaan tanpa percakapan waktu-nyata
Dengan Obrolan Semua-dalam-Satu
“Elfsight telah mengubah permainan dengan widget yang bekerja, berfungsi dengan baik, dan menarik secara visual.” – Andrew Lamb, Wales Outdoors
Dengan menambahkan widget Obrolan Semua-dalam-Satu, Andrew memungkinkan komunikasi instan melalui WhatsApp, Messenger, atau Telegram langsung dari situs web. Pengunjung kini bisa mengajukan pertanyaan singkat dan menerima jawaban tepat di mana mereka sedang menjelajah. Hal ini membantu mengurangi keraguan dan mempercepat pelanggan menuju pemesanan.

Hasil nyata
Perubahan sederhana itu membawa perubahan besar pada perilaku pelanggan. Orang yang mungkin meninggalkan situs tanpa memesan kini menghubungi dengan pertanyaan — dan akhirnya mendapatkan tempat untuk tur.
- Lebih banyak prospek langsung dari situs
- Waktu respons lebih cepat = konversi lebih tinggi
- Percakapan yang membangun kepercayaan, terasa personal dan meyakinkan
Widget lain yang sedang digunakan
Wales Outdoors juga menggunakan Ulasan Semua-dalam-Satu, AI Chatbot, Galeri Foto, Lokasi Toko, dan lainnya. Bersama-sama, alat-alat ini membuat situs web tetap interaktif, tepercaya, dan fokus mengonversi pengunjung menjadi klien yang membayar.
Punya pertanyaan tentang pengaturan atau masalah chat yang umum? Bagian berikut menjawab Pertanyaan yang Sering Diajukan agar Anda bisa memulai dengan mulus dan menghindari kendala umum.
Pertanyaan yang Sering Diajukan
Mengapa widget obrolan saya tidak muncul?
Tombol Obrolan Tersembunyi atau Tumpang Tindih dengan Elemen Situs — Cara Memperbaikinya?
z-index: 9999;) agar tetap berada di atas. Periksa tampilan seluler dan desktop untuk masalah tata letak.Bagaimana cara menambahkan tombol obrolan langsung di WordPress?
Bisakah saya menampilkan obrolan hanya di beranda?
Bagaimana cara mengatur jam obrolan atau ketersediaan jadwal?
Di mana saya menemukan ID WeChat untuk widget?
Pemikiran Akhir
Itu adalah seluruh pengaturannya. Hal utama yang perlu diingat: Obrolan Semua-dalam-Satu adalah pemicu obrolan, bukan helpdesk — ia memberi pengunjung satu tempat rapi untuk memilih saluran, lalu menyerahkan percakapan ke aplikasi yang mereka pilih, tempat tim Anda sudah bekerja.
Atur saluran Anda di Kontak, kendalikan kapan dan di mana gelembung muncul di Pengaturan, gaya tampilannya di Tampilan, dan masukkan kode sisipan ke blok HTML Kustom. Lakukan itu, dan Anda telah mengubah “we’ll get back to you” menjadi percakapan yang dimulai sekarang.


