Cara Mengintegrasikan WhatsApp ke Situs Anda

Tahukah Anda? Lebih dari 175 juta orang mengirim pesan ke akun WhatsApp Business setiap hari, menurut Meta.

Anda memiliki halaman “Hubungi Kami” yang tidak ada yang klik dan formulir yang berdebu. Sementara itu, WhatsApp ada di ponsel pelanggan Anda — akrab, tepercaya, dan selalu dicek. Mengintegrasikan WhatsApp ke situs Anda berarti bertemu orang di tempat mereka sudah berkomunikasi, bukan mengarahkan mereka melalui portal dukungan. Menambahkan tombol obrolan WhatsApp ke situs Anda memungkinkan mereka menghubungi Anda seperti yang mereka chat teman.

Tautan “hubungi kami” dasar berfungsi untuk pesan sederhana, tetapi tidak memberi kendali atas tampilan, pesan sambutan, atau penjadwalan. Widget Obrolan WhatsApp khusus memungkinkan Anda menanamkan obrolan WhatsApp ke situs tanpa kode — balasan terisi, penjadwalan tampilan, pemicu, dan branding termasuk. Anda juga bisa melakukannya dengan tautan wa.me manual atau WhatsApp Business API. Panduan ini menjelaskan ketiganya.

Mulai Cepat: Tambahkan Obrolan WhatsApp ke Situs Anda

Jika Anda ingin melewati teori dan langsung memiliki tombol chat WhatsApp yang berfungsi di situs Anda sekarang juga, berikut metodenya yang paling cepat:

1. Editor Obrolan WhatsApp dan pilih template.
2. Masukkan nomor telepon WhatsApp Anda dan atur pesan sambutan.
3. Klik “Tambahkan ke Situs Web” untuk mendapatkan kode sematan.
4. Tempel kode tersebut ke backend situs web Anda dan publikasikan.

Buat widget obrolan WhatsApp Anda sendiri di editor langsung di bawah ini ↓

Cara Mengintegrasikan WhatsApp: Opsi Anda

Ada lebih dari satu cara menanam WhatsApp chat di situs, dan pilihan yang tepat tergantung pada seberapa banyak kendali yang Anda perlukan. Begini perbandingan tiga metode utama.

Tautan wa.me berfungsi untuk tautan “hubungi kami” yang sederhana pada halaman kontak — tanpa alat atau pengaturan apa pun. Widget lebih baik jika Anda ingin tombol mengambang bermerek dengan pesan sambutan, pemicu, dan penjadwalan tanpa coding. API dirancang untuk operasi volume tinggi yang membutuhkan otomasi, integrasi CRM, dan routing multi-agen, dengan pengembang untuk memeliharanya.

Lebih suka menonton? Berikut panduan setup lengkap dalam kurang dari 3 menit:

WhatsApp vs. Chatbot vs. Obrolan Langsung vs. Formulir: Mana yang Paling Cocok

Sebelum memulai pengaturan, ada baiknya meluangkan satu menit untuk mempertimbangkan apakah WhatsApp benar-benar menjadi cara kontak yang tepat untuk bisnis Anda. Setiap opsi menetapkan ekspektasi berbeda bagi pengunjung Anda — pilih yang salah, dan Anda akan membebani diri atau membuat pelanggan frustrasi.

Jika pelanggan Anda lebih suka mengirim pesan daripada mengisi formulir – restoran, salon, toko lokal, freelancer, agensi – WhatsApp biasanya menjadi pilihan terbaik. AI chatbots bekerja paling baik untuk cakupan 24/7, sementara obrolan langsung atau formulir lebih kuat untuk alur dukungan yang kompleks. Sebagian besar bisnis akan mendapat manfaat dari menggabungkan dua: WhatsApp untuk percakapan cepat selama jam operasional, ditambah chatbot atau formulir untuk cakupan di luar jam kerja.

Gunakan akun WhatsApp Business, bukan nomor pribadi Anda

Secara teknis nomor WhatsApp pribadi berfungsi, tetapi pengunjung melihat nomor telepon tanpa konteks bisnis. WhatsApp Business gratis dan memberi Anda profil terverifikasi (nama perusahaan, alamat, jam operasional), plus katalog, balasan cepat, label, dan pesan luar jam operasional — semua fitur ini tidak ada pada akun pribadi.

convert it to a WhatsApp Business account without losing your chat history. One important caveat — you can’t use the same number on both WhatsApp and WhatsApp Business simultaneously. Pick one.”>Jika Anda sudah menggunakan nomor pribadi untuk bisnis, Anda bisa mengubahnya menjadi akun WhatsApp Business tanpa kehilangan riwayat obrolan. Satu catatan penting — Anda tidak bisa menggunakan nomor yang sama untuk WhatsApp dan WhatsApp Business secara bersamaan. Pilih satu.

Langkah demi Langkah: Mengatur WhatsApp Chat Anda

Sekarang Anda telah mengetahui metode mana yang tepat dan akun WhatsApp Business Anda siap, berikut cara mengonfigurasi widget dari awal hingga selesai. Setiap langkah tidak hanya menjelaskan apa yang perlu diklik, tetapi juga mengapa pengaturan default mungkin tidak tepat untuk bisnis Anda.

Langkah 1: Pilih templat

Langkah pertama yang perlu Anda lakukan adalah membuka widget editor dan memilih preset pemula. Bagi kebanyakan bisnis, templat Umumtemplat adalah titik awal yang paling aman — ini adalah tampilan WhatsApp klasik dengan gelembung obrolan yang mengambang.

Jika Anda ingin pengunjung mengetik pesan langsung dari jendela obrolan (bukan hanya mengklik tombol “Mulai Obrolan”), pilih Field Pesan saja. Template kasus penggunaan, seperti Pemesanan Janji Temu atau Konsultasi, dilengkapi dengan salinan dan ikon pra-konfigurasi yang bisa Anda sesuaikan.

Langkah 2: Masukkan nomor telepon Anda dan info agen

Di tab Connect, masukkan nomor telepon WhatsApp Anda beserta kode negara (misalnya +14155551234). Jangan diawali dengan 0 atau 00 — gunakan format +. Jika Anda memiliki akun WhatsApp Business, Anda juga bisa menempelkan tautan singkat Business Anda sebagai pengganti nomor telepon.

Kemudian buka tab Konten untuk menyiapkan header jendela obrolan: foto profil, nama, dan keterangan. Inilah yang dilihat pengunjung sebelum mereka mengklik — ini menentukan nuansa untuk seluruh interaksi.

Gunakan nama asli dan foto, bukan “Tim Dukungan” dengan ikon generik. Orang lebih cenderung mengirim pesan ke seseorang daripada ke departemen atau agen tanpa identitas. Jika Anda operator tunggal, gunakan nama Anda sendiri. Jika Anda tim, pilih orang yang benar-benar merespons pesan.

Anda juga dapat mengonfigurasi:

• Foto Profil — pilih dari galeri, unggah foto kustom, atau gunakan logo bawaan
• Nama — ditampilkan sebagai nama agen di header obrolan.
• Keterangan — tambahkan teks kustom atau pilih dari opsi bawaan seperti “Online” atau “Tanggapan dalam satu jam.”

Langkah 3: Tulis pesan sambutan Anda dan balasan pra-isi

Pesan sambutan adalah salam yang dilihat pengunjung saat jendela obrolan terbuka. Default-nya umum — sesuaikan dengan bisnis Anda. Pesan sambutan yang baik memberitahu pengunjung apa yang bisa mereka tanyakan dan menetapkan ekspektasi waktu respons.

Pesan pra-isi otomatis berbeda: itu adalah teks yang otomatis terisi di WhatsApp pengunjung saat mereka mengklik “Mulai Obrolan”. Pesan ini bisa digunakan untuk memberi tahu pelanggan apa yang perlu mereka sertakan dalam pertanyaan mereka. Pesan pra-isi otomatis juga mendukung placeholder [page_url], yang secara otomatis menyertakan URL halaman yang sedang dilihat pengunjung ketika mereka memulai obrolan, sehingga Anda tahu halaman produk mana yang memicu percakapan.

Contoh

Penting: jika Anda terhubung melalui tautan singkat WhatsApp Business (bukan nomor telepon), pesan yang telah diisi sebelumnya harus dikonfigurasikan di dalam aplikasi WhatsApp Business itu sendiri, bukan di pengaturan widget.

Langkah 4: Atur Penjadwalan Tampilan

Di sinilah kebanyakan panduan sematan WhatsApp berhenti, dan kualitas pengaturannya berbeda. Pengaturan Tanggal & Waktu (dalam tab Pengaturan) memungkinkan Anda mengontrol tepat kapan tombol obrolan muncul di situs Anda. Anda bisa menetapkan hari-hari tertentu, waktu mulai dan waktu selesai, serta zona waktu.

Jika Anda adalah bisnis dengan jam operasional yang jelas — misalnya Senin hingga Jumat, 09:00–18:00 — sesuaikan jadwalnya. Pengunjung di luar jam tersebut tidak akan melihat tombol WhatsApp, sehingga mencegah pengalaman membingungkan mengirim pesan dan tidak ada respons selama 12 jam.

Langkah 5: Sesuaikan Penampilan dan Penempatan

Langkah ini membantu Anda menyesuaikan desain dan tata letak widget obrolan. Tab <strong>Penampilan</strong> mengontrol warna, ikon gelembung, animasi, huruf, dan bentuk tombol. Tab <strong>Pengaturan</strong> menangani posisi widget di halaman. Berikut yang bisa Anda sesuaikan:

• <strong>Posisi</strong> tersedia dalam tiga mode: Gelembung Mengambang (mengikuti pengunjung saat mereka menggulir), Gelembung Tertanam (statis dalam konten), dan Jendela Obrolan Tertanam (obrolan tetap terbuka)
• Penempatan memungkinkan Anda menempatkan widget Anda di kiri, tengah, atau kanan. Kanan bawah adalah konvensi tombol obrolan.
• Offsets dapat disesuaikan secara vertikal dan horizontal. Gunakan ini untuk menjauhkan balon obrolan dari elemen melayang lainnya
• Ikon gelembung dapat dipilih dari perpustakaan bawaan, dibiarkan sebagai default, atau diunggah sebagai ikon kustom.
• Animasi gelembung — saklar hidup/mati yang bisa diatur dengan interval yang bisa diubah (default: 10 detik)
• <strong>Warna</strong> — latar belakang gelembung, ikon, header, wallpaper obrolan, latar belakang pesan, tombol, lencana notifikasi, dan status online semuanya dapat disesuaikan secara independen

Anda bisa mengontrol halaman mana yang menampilkan widget di <strong>Pengaturan Tampilan Obrolan</strong>: tampilkan di semua halaman, kecualikan halaman tertentu berdasarkan URL, atau tampilkan hanya pada halaman tertentu. Anda juga bisa menargetkan berdasarkan perangkat (desktop, seluler, atau keduanya) dan tipe pengunjung (semua pengunjung, pengunjung baru saja, atau pengunjung yang kembali saja).

Strategi Penempatan berdasarkan Jenis Halaman

• Beranda – gelembung mengambang, sudut kanan bawah, selalu terlihat; pintu masuk default Anda
• Halaman produk/layanan – gelembung bantuan mengambang dengan pemicu durasi kunjungan 10–15 detik (“Punya pertanyaan tentang produk ini?”)
• Halaman Harga – pertimbangkan pesan sambutan yang lebih menonjol (“Butuh bantuan memilih paket?”)
• Checkout – pesan pra-isi yang merujuk pada produk yang sedang dibeli pelanggan.
• Halaman blog/konten – hanya jika model bisnis Anda melibatkan percakapan langsung dari konten

Langkah 6: Atur perilaku pemicu

Pemicu mengatur kapan jendela obrolan otomatis terbuka tanpa pengunjung mengklik gelembung. Tersedia lima jenis pemicu, dan mereka bisa digabungkan (pemicu pertama yang aktif membuka obrolan):

• Saat Halaman Dimuat — terbuka segera saat halaman dimuat. Cocok untuk halaman dengan niat tinggi seperti harga atau pembayaran, tetapi bisa terasa agresif.
• Lama Halaman — muncul setelah sejumlah detik tertentu pada halaman saat ini. Cocok untuk halaman produk di mana pengunjung perlu momen untuk menjelajah sebelum Anda menawarkan bantuan.
• Waktu di Situs — dibuka setelah total waktu tertentu di situs. Berguna untuk sesi penjelajahan multi-halaman.
• Posisi Gulir — muncul setelah pengunjung menggulir persentase halaman tertentu. Cocok untuk konten panjang atau halaman arahan.
• Niat Keluar — terbuka saat pengunjung menggerakkan kursor ke tombol tutup tab. Keterlibatan terakhir — “Sebelum pergi, ada pertanyaan?”

Pengaturan Remember Visitor mengontrol apa yang terjadi setelah seseorang menutup obrolan: widget tidak akan terbuka lagi secara otomatis untuk periode yang bisa dikonfigurasi (default: 1 hari). Ini mencegah pola mengganggu di mana obrolan yang telah ditutup muncul lagi di setiap halaman.

Jika Anda tidak ingin obrolan terbuka otomatis sama sekali — biarkan sebagai gelembung yang bisa diklik — nonaktifkan semua pemicu dan atur opsi berbasis waktu menjadi 0 detik.

Langkah 7: Dapatkan kode sematan dan pasang

Klik “Tambahkan ke Situs” untuk mendapatkan kode pemasangan Anda. Kodenya terdiri dari dua bagian: sebuah tag script yang memuat platform Elfsight, dan sebuah tag div dengan kelas unik widget Anda. Salin seluruh blok tersebut.

WordPress, Squarespace, Wix, Webflow, and Shopify.”>Akhirnya, tempelkan kode ke blok HTML Kustom di halaman mana pun situs Anda. Widget ini didukung oleh sebagian besar CMS dan pembuat situs, termasuk WordPress, Squarespace, Wix, Webflow, dan Shopify.

Pemeriksaan Cepat Pemecahan Masalah

• Widget not appearing? Check that the code is in a Custom HTML block, not a regular text block. Clear your website cache.
• WhatsApp terbuka, tapi tidak ada pesan pra-isi?
• Widget overlaps other elements on mobile? Sesuaikan offset vertikal dan horizontal widget di Pengaturan Posisi, atau gunakan penargetan perangkat untuk menyembunyikannya di seluler jika Anda memiliki metode kontak lain di sana.
• “Nomor telepon ini tidak terdaftar di WhatsApp” error? Pastikan nomor tersebut terdaftar di WhatsApp (bukan sekadar nomor telepon biasa) dan mencakup kode negara yang benar, tanpa angka nol di depan.

Cara Lain Menambahkan Obrolan WhatsApp ke Situs Web

Pendekatan widget mencakup sebagian besar kasus penggunaan, namun itu bukan satu-satunya opsi. Berikut dua alternatif — satu untuk kemudahan, satu untuk skala.

Tambahkan tautan WhatsApp ke situs Anda dengan wa.me

wa.me link membuka percakapan WhatsApp langsung dari browser mana pun. Tanpa widget, tanpa JavaScript, tanpa alat pihak ketiga. Ini adalah cara termudah untuk menambahkan tombol obrolan WhatsApp di situs jika Anda hanya membutuhkan tautan “hubungi kami” dasar.

1. https://wa.me/[number-with-country-code]?text=[pre-filled-message] Contoh: https://wa.me/14155551234?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20your%20services
2. Tambahkan sebagai tag anchor HTML: <a href="https://wa.me/14155551234?text=Hi" target="_blank">Message us on WhatsApp</a>
3. Gaya menggunakan CSS atau pakai ikon. Tempatkan di mana saja — header, footer, halaman kontak, atau tombol CSS mengambang yang Anda buat sendiri.

Ini adalah kode sematan WhatsApp untuk situs web Anda dalam bentuk paling sederhana. Tanpa dasbor, tanpa konfigurasi — hanya tautan. Jika itu yang Anda perlukan, itu berfungsi.

Cara menambahkan API WhatsApp ke situs web

WhatsApp Business API resmi memungkinkan Anda membangun pengalaman WhatsApp yang sepenuhnya otomatis: chatbot, pesan template, integrasi CRM, dan routing multi-agen. Ini adalah infrastruktur berkelas perusahaan, bukan widget siap pakai.

1. Ajukan akses WhatsApp Business API melalui Penyedia Solusi Bisnis (BSP)
2. Verifikasi bisnis dan nomor telepon Anda melalui Meta Business Manager.
3. Bangun atau konfigurasikan alur pesan Anda: templat, webhooks, aturan otomatisasi.
4. Sematkan antarmuka obrolan kustom atau pintu masuk “klik untuk chat” di situs Anda.

Tips Optimasi untuk Obrolan WhatsApp Anda

Widget sudah terpasang — inilah yang membedakan antara pengaturan yang diabaikan dan yang menghasilkan percakapan.

🎨 Desain dan Penempatan

Jangan tumpuk elemen mengambang. Jika Anda sudah memiliki chatbot, banner cookie, dan tombol kembali ke atas, menambahkan gelembung WhatsApp akan menimbulkan kekacauan visual di perangkat seluler. Audit elemen mengambang Anda sebelum menambahkan yang lain. Gunakan pengaturan offset widget atau kontrol visibilitas tingkat halaman untuk menghindari tabrakan.

Mulai dengan halaman ber-intensi tinggi, bukan semua halaman. Tampilkan WhatsApp pada halaman produk, harga, dan kontak terlebih dahulu. Periksa data GA Anda setelah dua minggu — Anda akan dengan cepat melihat halaman mana yang benar-benar menghasilkan percakapan dan bisa memangkas sisanya.

💬 Pesan dan respons

Gunakan pesan yang telah diisi sebelumnya untuk mengurangi friksi. Pesan kosong seperti “Hai” dari pelanggan tidak memberi Anda apa-apa. Siapkan dengan konteks — “Hai, saya tertarik pada [produk/layanan]” — dan Anda menghemat satu putaran bolak-balik. Placeholder [page_url] menambahkan konteks lebih banyak secara otomatis.

Tetapkan ekspektasi waktu respons yang realistis. Jika Anda tidak bisa membalas dalam beberapa menit, sebutkan itu dalam pesan sambutan: “Kami biasanya merespons dalam 2 jam selama jam operasional.” Ekspektasi yang tidak terpenuhi terasa lebih menyebalkan daripada respons yang lambat dengan peringatan.

🔍 Pelacakan dan Cakupan

<strong>Lacak interaksi widget.</strong> Widget mendukung pelacakan peristiwa Google Analytics bawaan (tab Pengaturan) dengan dua peristiwa: Widget Dibuka dan Obrolan Dimulai. Atur jika Anda telah memasang GA atau GTM — Anda ingin tahu halaman mana yang menghasilkan percakapan terbanyak dan kapan permintaan masuk mencapai puncaknya.

Gabungkan WhatsApp dengan perlindungan di luar jam operasional. WhatsApp ideal selama jam operasional ketika Anda bisa membalas secara pribadi. Untuk malam hari dan akhir pekan, padukan dengan AI Chatbot yang menangani pertanyaan umum secara otomatis — kunjungan selalu mendapatkan jawaban, tidak peduli waktu.

Pertanyaan yang Sering Diajukan

Kesimpulan

Anda telah melihat tiga cara menambahkan WhatsApp chat ke situs Anda — dari tautan wa.me sederhana hingga widget lengkap yang terkonfigurasi dengan penjadwalan, pemicu, dan pesan pra-isi otomatis. Apa pun metode yang Anda pilih, keputusan pengaturan yang paling penting adalah pengalaman langsung yang dialami pengunjung: pesan sambutan yang menjelaskan apa yang diharapkan, balasan pra-isi yang mengurangi hambatan, dan waktu tampilan yang sesuai dengan ketersediaan Anda untuk merespons.

Jika Anda belum mencoba editor widget, mulai dengan WhatsApp Chat widget — rencana gratis mencakup pengaturan dasar, dan Anda bisa menyesuaikan semuanya sebelum berkomitmen. Dan jika Anda membutuhkan cakupan 24/7 di luar jam operasional, memadukan WhatsApp dengan AI Chatbot berarti pengunjung selalu mendapatkan respons, kapan pun Anda tidak di meja.

Artikel oleh

Valeriya Polyakova

Manajer Konten

Sebagai Manajer Konten di Elfsight, saya fokus pada pembuatan konten yang praktis dan menginspirasi. Saya suka membuat hal-hal yang kompleks menjadi sederhana dan menyenangkan untuk dibaca.

Ikuti kami di Facebook

Ikuti di X

Ikuti di LinkedIn

Ikuti di Reddit