PROMO ULANG TAHUN KE-14 Diskon 33% +1 Bulan GRATIS PENAWARAN WAKTU TERBATAS Dapatkan Penawaran
Diskon 33% +1 Bulan GRATIS Dapatkan Penawaran

Cara Menambahkan Obrolan Langsung di WordPress

Jika Anda bosan mengelola beberapa aplikasi pesan, Anda bisa menggabungkannya menjadi satu peluncur obrolan. Panduan ini menunjukkan cara menambahkan WhatsApp, Messenger, Instagram, dan saluran obrolan populer lainnya ke situs Anda menggunakan widget tanpa kode, beserta metode alternatif dan tips praktis.
Lihat pendapat ChatGPT Buka editor plugin langsung
How to Add Live Chat in WordPress

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.

Dalam panduan ini, Anda akan mempelajari bagaimana:



  • 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:

  1. Buka Elfsight’s editor dan pilih template.
  2. Sesuaikan widget Obrolan Langsung Anda.
  3. Klik ‘Tambahkan ke situs web secara gratis’ dan salin kodenya.
  4. 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 utamaMengapa ini penting
Penggabungan Messenger dalam Obrolan Semua-dalam-SatuPengunjung memilih aplikasi pesan favorit mereka, sehingga setiap percakapan dimulai di antarmuka yang akrab dan nyaman bagi mereka.
Pemicu Cerdas untuk Jendela ObrolanKotak obrolan muncul tepat pada saat yang tepat, membantu Anda mengajak pengunjung berinteraksi dan meningkatkan konversi tanpa gangguan.
Opsi kustomisasi yang kayaSesuaikan pemicu obrolan dengan merek Anda agar terlihat sebagai bagian dari situs, bukan alat yang ditempelkan — berguna saat pedoman merek ketat.
Penempatan Responsif dan FleksibelAtur posisi dan offset per perangkat agar gelembung tidak menutupi tombol keranjang belanja atau navigasi seluler.
Aturan Tampilan TerarahTampilkan 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.

Choose your live chat for WordPress template

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.

Add your preferred sources
💡 Saran: Jika lokasi bisnis Anda sering menjadi permintaan obrolan — tambahkan tombol “Dapatkan Petunjuk Arah” atau “Buka di Google Maps” sebagai sumber untuk mengarahkan pengunjung ke tempat yang ditentukan.

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.

Customize live chat agent info

Anda juga bisa memperbarui gelembung obrolan dengan memilih ikon yang pas dari perpustakaan atau mengunggah milik Anda sendiri.

💡 Tip: Sambutan singkat dan santai — pesan di bawah 10 kata cenderung mendapatkan respons lebih cepat.

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.

Configure chat display settings

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.

💡 Tips: Gunakan pemicu berbasis waktu atau gulir untuk keterlibatan yang halus. Popup langsung bisa terasa mengganggu dan merusak konversi.

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.
Pick your widget font and colors

Untuk kontrol lebih rinci, gunakan bidang kode CSS dan JS — jelajahi Komunitas kami untuk tips dan contoh kode siap pakai.

💡 Tip: Pick colors that complement your brand palette — a consistent visual identity builds trust and helps the chat feel like a natural part of your website.

6. Tambahkan obrolan langsung ke WordPress

Setelah widget Anda sepenuhnya dikonfigurasi, klik “Tambahkan ke situs web secara gratis” untuk menghasilkan kode sisip unik.

Copy your widget embed code

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.

Pemecahan masalah, jika obrolan Anda tidak muncul:
  1. Pastikan seluruh kode semat disalin dengan benar (tidak ada tag yang hilang)
  2. Nonaktifkan caching atau hapus cache browser Anda
  3. Periksa ulang penempatan (harus berada sebelum penutup tag untuk tampilan global)
  4. 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:

  1. Build your link using the format: https://m.me/<your-page-username>
  2. Tambahkan sebagai tombol atau tautan di mana saja di situs Anda dengan HTML standar.
  3. Atur tampilannya dengan CSS agar sesuai dengan merek Anda.
  4. Paste into your site. Tempelkan kode ke HTML situs Anda tepat sebelum tag penutup: </body>
Catatan: Ini membuka Messenger secara langsung — tidak ada jendela obrolan di halaman, dan pengunjung perlu masuk ke Facebook. Untuk peluncur multi-saluran yang bergaya, gunakan metode All-in-One Chat di atas.

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.

  1. Buat tautan. Gunakan format ini untuk menghasilkan URL obrolan langsung: https://wa.me/<your-number>
  2. Sisipkan dalam tombol atau tautan. Gunakan HTML standar untuk menambahkan tautan sebagai tombol di situs Anda.
  3. Tata gaya dengan CSS. Sesuaikan tombolnya agar cocok dengan tampilan merek Anda.
Catatan: Kustomisasi terbatas. Metode ini hanya mendukung WhatsApp dan tidak mencakup elemen UI seperti widget yang mengambang.

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.

  1. Buat bot Telegram. Gunakan BotFather untuk menghasilkan token API.
  2. Implementasikan menggunakan API Telegram. Gunakan API resmi untuk menerima dan merespons pesan.
  3. <strong>Sematkan tautan atau tombol.</strong> Tambahkan tautan seperti <code>https://t.me/your_bot</code> atau gunakan widget kustom berbasis JavaScript.
Catatan: Telegram memerlukan konfigurasi API dan sangat cocok untuk pengembang atau pemilik situs yang memiliki kemampuan teknis.

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

Live Chat Use Case

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.

Inti: Widget Obrolan Semua-dalam-Satu membantu bisnis terhubung dengan pelanggan secara instan, menjawab pertanyaan lebih cepat, dan menutup lebih banyak penjualan dengan menciptakan interaksi manusia nyata langsung dari situs.

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?

Pastikan widget diaktifkan di dashboard Elfsight Anda dan tertanam dengan benar. Jika menggunakan kode manual, masukkan sebelum </body> menggunakan plugin seperti Insert Headers and Footers. Hapus cache browser Anda dan uji coba dalam mode penyamaran untuk menghindari masalah lokal.

Tombol Obrolan Tersembunyi atau Tumpang Tindih dengan Elemen Situs — Cara Memperbaikinya?

Atur z-index yang lebih tinggi pada CSS kustom widget (misalnya 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?

Pasang widget All-in-One Chat melalui editor Elfsight. Lalu konfigurasikan pengaturan obrolan dan masukkan dengan menempelkan cuplikan kode yang dihasilkan ke bidang kode situs web Anda.

Bisakah saya menampilkan obrolan hanya di beranda?

Ya. Di Pengaturan Tampilan widget, pilih “Hanya di” dan masukkan URL beranda Anda. Ini membatasi visibilitas obrolan ke halaman beranda utama Anda. Lihat: Tampilkan di beranda

Bagaimana cara mengatur jam obrolan atau ketersediaan jadwal?

Gunakan fitur penjadwalan bawaan untuk menentukan kapan obrolan muncul. Anda bisa menetapkan jendela waktu yang berbeda untuk setiap hari dalam seminggu. Panduan: Tetapkan Jadwal Obrolan Tetapkan Jadwal Obrolan

Di mana saya menemukan ID WeChat untuk widget?

Masuk ke akun WeChat Anda dan navigasikan ke “Me → Profile.” ID WeChat Anda muncul di bawah foto profil Anda. Langkah lengkap di sini: Temukan ID WeChat

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.

Artikel oleh
Spesialis Konten AI
Kristina Tyumeneva membahas topik AI di Elfsight dan Beamtrace: ia menulis tentang AI Chatbot, visibilitas LLM, dan bagaimana AI merombak pencarian serta pengalaman pelanggan—dengan pandangan praktis untuk pemilik situs web dan tim pemasaran yang membutuhkannya agar benar-benar bekerja.