WhatsApp Widget untuk Website: Cara Mengubah Pengunjung Website Menjadi Percakapan

Cara Integrasi Chatbot dengan WhatsApp Business API: Panduan Teknis untuk Bisnis

Cara Pasang Widget WhatsApp di Website

Pelajari cara membuat link wa.me, memasang tombol WhatsApp mengambang, mengukur klik, dan meneruskan chat ke inbox tim.

Panduan praktis dari pembuatan link wa.me hingga pengukuran klik dan pengelolaan chat di inbox tim, tanpa menjanjikan bahwa setiap klik otomatis menjadi lead.

Widget WhatsApp menghubungkan pengunjung website dengan percakapan di smartphone

Widget WhatsApp dapat mengubah pengunjung website menjadi percakapan dengan mengarahkan mereka ke chat melalui link wa.me. Namun, satu klik tidak otomatis menjadi pesan atau lead. Agar alurnya jelas, bisnis perlu membuat link yang benar, memasang tombol yang mudah digunakan, mengukur klik, dan menyiapkan pengelolaan chat setelah pesan masuk.

Widget WhatsApp bekerja dengan link untuk nomor Indonesia yang dipasang sebagai tombol di website dan diukur melalui klik. Setelah itu, bisnis dapat menentukan apakah membutuhkan inbox tim atau WhatsApp Business Platform.

Widget WhatsApp Itu Apa dan Bagaimana Cara Kerjanya?

Widget WhatsApp adalah elemen di website, biasanya berupa tombol, ikon, atau bubble mengambang, yang membawa pengunjung ke percakapan WhatsApp. Mekanismenya menggunakan fitur Click to Chat melalui link https://wa.me/<nomor>, bukan menampilkan inbox WhatsApp langsung di halaman. Dokumentasi resmi WhatsApp menjelaskan bahwa link ini membantu pengguna memulai chat dengan nomor tujuan melalui aplikasi WhatsApp atau WhatsApp Web, dari ponsel maupun desktop.

Widget WhatsApp bukan inbox yang tertanam

Tombol, ikon, dan bubble hanya berfungsi sebagai antarmuka. Link wa.me di baliknya membuka percakapan. Widget sederhana mengarahkan pengunjung ke satu nomor tertentu. Link tersebut belum menyediakan assignment agen, histori CRM, routing percakapan, atau pelacakan lead secara otomatis.

Karena itu, widget cocok menjadi jalur percakapan bagi pengunjung yang belum siap mengisi formulir. Bisnis dapat mengarahkan mereka untuk bertanya langsung tentang produk atau layanan. Penjelasan tentang peran WhatsApp dalam komunikasi pelanggan tersedia dalam artikel mengapa bisnis perlu menggunakan WhatsApp untuk komunikasi pelanggan.

Apa yang terjadi setelah pengunjung mengeklik tombol?

Setelah diklik, link membuka tujuan WhatsApp pada perangkat pengguna. Pengunjung kemudian dapat memulai chat dengan nomor yang ditentukan. Jika link menyertakan pesan pembuka, teks itu muncul di kolom pesan dan tetap perlu dikirim oleh pengunjung. Jadi, satu klik hanya menunjukkan bahwa tombol dipilih, bukan bahwa pesan sudah terkirim atau lead sudah tercatat.

Untuk menerima chat dalam inbox bersama, membagi percakapan ke agen, dan menyimpan histori, bisnis memerlukan sistem tambahan yang terhubung dengan WhatsApp Business Platform atau inbox yang sesuai. Widget membuka percakapan; sistem berikutnya menentukan cara chat dikelola.

Buat wa.me Link yang Benar untuk Nomor Indonesia

Gunakan format https://wa.me/<nomor> untuk membuat link yang membuka percakapan WhatsApp dari website. Nomor tujuan harus ditulis dalam format internasional tanpa tanda plus, angka nol di awal, tanda kurung, atau tanda hubung.

Ubah nomor Indonesia ke format internasional

Untuk nomor Indonesia, hapus angka 0 di awal lalu tambahkan kode negara 62. Contohnya:

  • Nomor: 0812-3456-7890
  • Format link: https://wa.me/6281234567890

Pastikan nomor tersebut merupakan nomor yang digunakan di WhatsApp. Link ini dapat ditempatkan pada tombol website atau elemen lain yang mengarahkan pengunjung ke WhatsApp. Lihat juga panduan membuat link WhatsApp untuk bisnis untuk contoh penggunaan lainnya.

Baca Juga:  Cara Menghindari Spam Saat Broadcast WhatsApp (100% Aman!)

Tambahkan pesan pembuka otomatis

Tambahkan parameter text setelah nomor tujuan untuk mengisi kolom pesan sebelum chat dikirim. Contohnya:

https://wa.me/6281234567890?text=Halo%2C%20saya%20ingin%20bertanya%20tentang%20produk%20Anda

Spasi dan karakter khusus pada pesan harus di-URL-encode. Dalam contoh tersebut, spasi menjadi %20 dan koma menjadi %2C. Pesan akan muncul di kolom chat, tetapi pengguna tetap dapat mengubahnya sebelum mengirim.

Isi pesan dengan konteks halaman, seperti “Saya tertarik dengan Paket A” atau “Saya datang dari halaman Konsultasi”. Teks ini membantu tim mengenali konteks secara operasional, tetapi bukan bukti atribusi yang sempurna karena masih bisa diedit pengguna. Untuk penggunaan tanpa menyimpan nomor lebih dulu, baca cara menggunakan WhatsApp tanpa menyimpan nomor.

WhatsApp Business App juga membuat short link bisnis secara otomatis. Short link tersebut dapat disalin ke website dan dilengkapi pesan default yang telah diisi sebelumnya.

Cara Pasang Tombol WhatsApp di Website

Widget WhatsApp dapat dipasang sebagai link biasa, tombol mengambang, atau elemen dari CMS dan website builder. Pastikan setiap opsi mengarah ke wa.me dengan pesan pembuka yang sudah URL-encoded. Untuk format nomor dan contoh pesan lainnya, lihat panduan membuat link wa.me untuk bisnis.

Opsi 1: tombol HTML sederhana

Gunakan anchor HTML dengan label tindakan yang jelas. Nomor pada contoh berikut bersifat ilustratif, bukan nomor pelanggan atau nomor pribadi nyata.

“`html <a class=”wa-widget” href=”https://wa.me/6281234567890?text=Halo%2C%20saya%20ingin%20bertanya” target=”_blank” rel=”noopener”

<span aria-hidden=”true”>💬</span> <span>Chat WhatsApp</span> </a> “`

Jika tombol hanya menampilkan ikon, tambahkan aria-label=”Chat WhatsApp” agar memiliki nama yang dapat dibaca teknologi bantu. Jika sudah ada teks tombol yang jelas, jangan memberikan aria-label berbeda yang menggantikan nama tersebut.

Opsi 2: floating button dengan CSS

Tombol mengambang dapat memakai aturan CSS berikut:

“`css .wa-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: inline-flex; border-radius: 999px; padding: 12px 16px; background: #1e64dc; color: #fff; }

.wa-widget:hover, .wa-widget:focus-visible { background: #1450b5; outline: 3px solid #8bafed; } “`

Nilai tersebut adalah contoh CSS, bukan ketentuan resmi WhatsApp. Uji tombol pada layar kecil agar tidak menutupi menu, formulir, tombol checkout, atau elemen penting lain.

Opsi 3: CMS, website builder, atau plugin

Alur umumnya adalah membuat link wa.me, menempelkannya ke tombol atau floating button, memberi label CTA, lalu menguji desktop dan mobile. Nama menu serta plugin berbeda menurut platform, jadi jangan menjadikan satu prosedur sebagai panduan universal tanpa menyebut CMS atau website builder yang digunakan.

WhatsApp juga menyediakan tombol resmi “Chat on WhatsApp” dalam warna hijau dan putih serta tiga ukuran untuk konteks web tertentu. Jika memakainya, ikuti panduan resmi dan gunakan tombol sebagaimana tersedia. Tombol visual buatan sendiri tidak boleh disebut aset resmi WhatsApp.

Ukur Klik Widget Tanpa Menyamakan Klik dengan Lead

Catat outbound click dengan GA4

Mulai dengan GA4: platform ini dapat mencatat outbound click ketika pengunjung mengeklik link yang membawa mereka ke luar domain website. Jika Enhanced Measurement aktif, pengukuran tersebut dapat berjalan tanpa perubahan kode tambahan. Data outbound click dapat mencakup URL link, domain tujuan, dan status outbound. Dokumentasi Google Analytics menjelaskan pengaturan ini.

Baca Juga:  Kenapa WhatsApp Masih Jadi Kanal Komunikasi Pelanggan Terbaik untuk Bisnis Indonesia

Untuk penamaan yang lebih spesifik, buat custom event editorial whatsapp_widget_click dengan parameter page_location, button_position, dan page_type. Pola ini membantu memisahkan klik widget dari interaksi lain pada website. Custom event dapat digunakan untuk mengukur interaksi tertentu, termasuk klik tombol atau link. Pastikan event dikirim saat tombol ditekan, tanpa menganggap percakapan sudah dimulai.

Klik, pesan, dan lead adalah tiga hal berbeda

Ketiga sinyal ini perlu dibaca terpisah. Event klik hanya membuktikan tombol ditekan. Event itu tidak membuktikan pengguna benar-benar mengirim pesan di WhatsApp, membalas, menjadi lead, atau melakukan pembelian. Setelah pengunjung meninggalkan halaman, website tidak otomatis mengetahui hasil percakapannya.

Pesan pembuka yang berbeda per halaman dapat membantu tim mengenali konteks secara operasional, misalnya asal halaman atau topik yang ditanyakan. Namun, pengguna dapat mengedit teks tersebut sebelum mengirimnya. Perlakukan pesan itu sebagai petunjuk, bukan bukti atribusi sempurna.

Untuk mengukur pesan masuk dan tindak lanjut, cocokkan data klik dengan pencatatan di inbox, CRM, atau sistem WhatsApp Business Platform yang terhubung. Dengan begitu, tim dapat memisahkan interaksi awal dari percakapan dan lead yang benar-benar tercatat.

Tim customer service menangani chat pelanggan bersama di kantor

Dari Klik ke Inbox Tim: Kapan Membutuhkan Sistem Tambahan?

Setelah klik diukur, pertanyaan berikutnya adalah bagaimana percakapan yang benar-benar masuk ditangani. Jika chat perlu ditangani banyak agen atau berasal dari beberapa channel, bisnis membutuhkan sistem tambahan setelah pesan masuk.

Batas widget satu nomor

Link wa.me mengarahkan pengunjung ke satu nomor WhatsApp. Tautan tersebut hanya membuka chat dan tidak menjanjikan assignment agen, histori CRM, routing, atau pelacakan lead. Dengan demikian, klik pada widget tidak otomatis mengirim percakapan ke inbox tim atau membagi chat kepada petugas tertentu.

Penggunaan aplikasi WhatsApp Business juga tidak otomatis memberikan fungsi routing, CRM, atau API. Jika satu orang menangani semua pesan, alur sederhana mungkin sudah memadai. Kebutuhannya berubah ketika beberapa orang harus membalas nomor yang sama.

Peran shared inbox dan WhatsApp Business Platform

Shared inbox membutuhkan lapisan sistem tambahan yang menerima dan mengelola percakapan setelah pesan masuk. Untuk bisnis dengan banyak agen, tetapkan tujuan chat, penanggung jawab balasan, cara penyimpanan histori, dan pencatatan follow-up. Panduan inbox terpusat membantu memetakan kebutuhan ini.

WhatsApp Business Platform mendukung integrasi dengan CRM dan marketing automation, automated conversational flows, serta smart routing ketika dukungan agen langsung diperlukan. Fungsinya berbeda dari widget: widget membuka percakapan, sedangkan inbox omnichannel membantu tim menerima, menyimpan, menindaklanjuti, dan mengelola percakapan dari berbagai channel.

Untuk chat dari banyak sumber, cara mengelola banyak chat WhatsApp dan penggunaan satu nomor untuk banyak agen perlu dipikirkan sejak awal. Mobichat memosisikan inbox omnichannel sebagai lapisan pengelolaan setelah widget membuka chat, bukan sebagai fungsi otomatis dari link wa.me.

Baca Juga:  Bagaimana AI Chatbot Menghemat Budget CS Chain Coffee Shop?

Checklist Sebelum Widget WhatsApp Dipublikasikan

Checklist teknis dan operasional

Mulai dari nomor tujuan. Setelah itu, uji seluruh jalur percakapan sebelum tombol ditayangkan.

  • Pastikan nomor aktif di WhatsApp dan ditulis dalam format internasional, tanpa nol awal, tanda kurung, atau tanda hubung.
  • Periksa pesan pembuka agar sudah URL-encoded. Uji link dari browser desktop dan perangkat mobile.
  • Cek posisi tombol, terutama di layar kecil. Tombol tidak boleh menutupi navigasi, formulir, checkout, atau elemen penting lain.
  • Gunakan label yang menjelaskan tindakan, seperti “Chat WhatsApp”, “Tanya Produk”, atau “Konsultasi Sekarang”.
  • Catat klik widget sebagai outbound click atau custom event. Pastikan tim tahu chat masuk ke mana dan siapa yang bertugas membalas.

Jika percakapan ditangani banyak agen, siapkan inbox, API, atau CRM dengan routing dan histori yang sudah dikonfigurasi. Link wa.me hanya membuka percakapan; jangan menganggapnya otomatis menyediakan pembagian chat atau histori CRM. Pelajari opsi pengelolaan WhatsApp untuk tim customer service dan WhatsApp Coexistence sesuai alur kerja bisnis.

Bedakan chat masuk dari pesan proaktif

Pada WhatsApp Business Platform, bisnis hanya dapat memulai percakapan menggunakan Message Template yang telah disetujui. Bisnis dapat membalas tanpa template selama masih dalam 24 jam sejak pesan terakhir pengguna. Ketentuan ini khusus untuk Platform, bukan otomatis untuk aplikasi WhatsApp Business. Untuk pesan proaktif, baca juga panduan WhatsApp marketing untuk bisnis UMKM.

Biaya Platform dapat bergantung pada kategori pesan, pasangan pasar, dan ketentuan rate card resmi terbaru. Aturan biaya untuk service dan utility perlu diverifikasi kembali. Jangan mencantumkan nominal Indonesia sebelum memeriksa rate card terbaru. Kebijakan dan harga dapat berubah, jadi periksa ulang sebelum publikasi.

Jika sudah siap menghubungkan widget dengan inbox tim dan follow-up untuk chat website, WhatsApp, serta channel lain, gunakan inbox omnichannel Mobichat.

Do not change any figure, date, price, link URL or anchor text.

Kesimpulan dan FAQ

Widget WhatsApp adalah jalur dari website menuju percakapan, bukan jaminan bahwa pesan atau lead sudah masuk. Buat link wa.me dengan benar, pasang tombol yang mudah digunakan, ukur klik secara terpisah, lalu siapkan inbox atau sistem lanjutan jika chat perlu ditangani oleh beberapa agen.

Apa perbedaan widget WhatsApp, tombol WhatsApp website, dan link wa.me?

Widget WhatsApp adalah elemen antarmuka di website, tombol WhatsApp adalah salah satu bentuk widget, sedangkan link wa.me adalah URL yang membuka percakapan.

Apakah link wa.me dapat dibuka dari desktop jika WhatsApp tidak terpasang di komputer?

Ya. Link dapat mengarahkan pengguna ke WhatsApp Web di desktop, meskipun WhatsApp tidak terpasang sebagai aplikasi komputer.

Apakah klik pada widget WhatsApp berarti pesan atau lead sudah masuk?

Tidak. Klik hanya menunjukkan tombol dipilih; pesan tetap perlu dikirim dan lead perlu dicatat melalui proses atau sistem yang sesuai.

Kapan bisnis membutuhkan WhatsApp Business Platform atau shared inbox?

Saat chat perlu ditangani banyak agen, diarahkan dengan routing, disimpan historinya, dihubungkan ke CRM, atau dikelola bersama percakapan dari beberapa channel.