Lewati ke konten
OmniChannels.ai
Menu

Alat gratis

Tombol chat WhatsApp untuk website Anda

Pasang tombol WhatsApp melayang di website mana pun dalam hitungan menit. Atur nomor, pesan awal, warna, posisi, sapaan, dan jeda tampil, lihat hasilnya langsung di pratinjau desktop atau seluler, lalu salin snippet kecil yang berdiri sendiri beserta langkah pemasangan untuk WordPress, Shopify, Wix, dan HTML biasa.

Gratis · tanpa pendaftaran · berjalan di browser Anda

Nomor dan pesan

Ketik seperti saat Anda menghubungi nomor tersebut secara lokal, atau awali dengan + atau 00. Spasi, tanda hubung, dan tanda kurung boleh digunakan.

Muncul di kolom teks pelanggan dan dapat mereka ubah sebelum dikirim. Teks Arab, emoji, dan baris baru di-encode otomatis.

Pengaturan tombol

Posisi

Ikon putih pada warna ini memiliki kontras 2.0:1, di bawah pedoman 3:1 untuk ikon. Tombol tetap memiliki nama yang dapat diakses, tetapi warna hijau yang lebih gelap lebih mudah dibaca.

Ditampilkan di samping tombol; pengunjung dapat menutupnya selama sisa kunjungan. Kosongkan jika tidak ingin menampilkan balon.

Dibaca oleh screen reader dan ditampilkan sebagai tooltip saat kursor diarahkan ke tombol.

Tampilkan di

Angka 0 menampilkannya langsung. Jeda singkat membantu agar tombol tidak bersaing dengan ajakan bertindak (call to action) utama di halaman Anda.

Pratinjau langsung

Kode embed Anda

Masukkan nomor WhatsApp yang valid untuk melengkapi kode Anda.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Halo 👋 Ada yang bisa kami bantu?</span><button type="button" class="ocwa-x" aria-label="Tutup">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=Halo%21%20Saya%20punya%20pertanyaan%20tentang%20website%20Anda." target="_blank" rel="noopener" aria-label="Chat dengan kami di WhatsApp" title="Chat dengan kami di WhatsApp"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Mandiri: sekitar 3,8 KB, tanpa skrip, font, atau gambar eksternal, dan tanpa cookie.

Cara memasangnya

  1. 1Salin kode di atas.
  2. 2Pasang plugin kode header dan footer seperti WPCode, atau buka Appearance → Editor jika Anda memakai tema blok.
  3. 3Tempel kode ke bagian footer (akhir body), atau ke blok Custom HTML di bagian template footer.
  4. 4Simpan, bersihkan cache dari plugin caching, lalu uji di ponsel Anda.

Chat menumpuk di satu ponsel? Balas chat ini dari kotak masuk bersama (shared inbox) tim Anda

Data yang Anda ketik di sini tidak dikirim ke server kami.

Jawaban singkat

Tombol chat WhatsApp adalah tombol kecil melayang di website yang membuka chat WhatsApp dengan bisnis saat diklik. Tombol ini berupa tautan ke https://wa.me/ ditambah nomor bisnis dan pesan awal opsional, yang ditampilkan sebagai ikon di sudut halaman. Pengunjung memulai percakapan dari ponsel atau WhatsApp Web mereka sendiri, tanpa formulir dan tanpa menyimpan nomor.

Infrastruktur tepercayaMeta Business Solution Provider resmiMitra Google RBMAnggota GSMAISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IISesuai GDPR

Cara memasang tombol WhatsApp di website Anda

  1. 1

    Masukkan nomor dan pesan

    Pilih negara, ketik nomor WhatsApp Anda, dan tulis pesan yang akan dikirim pengunjung, misalnya pertanyaan tentang pesanan.

  2. 2

    Atur tampilan tombol

    Pilih sudut, warna, balon sapaan, perangkat, dan jeda tampil. Pratinjau langsung menampilkan tombol pada halaman contoh di desktop dan seluler.

  3. 3

    Salin kodenya

    Salin snippet. Ukurannya hanya beberapa kilobyte HTML, CSS, dan JavaScript, tanpa permintaan eksternal, cookie, atau pelacakan.

  4. 4

    Tempel sebelum </body>

    Ikuti langkah untuk WordPress, Shopify, Wix, atau HTML biasa, publikasikan, lalu uji tombol di ponsel dan komputer.

Apa yang dilakukan kode yang dihasilkan

Snippet ini menambahkan satu tautan berposisi tetap di sudut bawah halaman Anda. Tautan tersebut adalah URL click-to-chat standar dengan format yang didokumentasikan WhatsApp di halaman bantuannya (faq.whatsapp.com/5913398998672934): https://wa.me/ ditambah nomor internasional lengkap Anda dan, jika diinginkan, ?text= berisi pesan yang sudah di-encode URL. Tautan ini membuka aplikasi WhatsApp di ponsel, serta WhatsApp Web atau aplikasi desktop di komputer.

Semuanya inline: logo WhatsApp berupa path SVG, gaya CSS dibatasi di bawah satu prefiks class, dan skripnya hanya beberapa baris untuk mengatur jeda tampil dan sapaan yang bisa ditutup. Tidak ada skrip, font, gambar, atau cookie eksternal, sehingga tombol tidak memperlambat halaman dan tidak menambah pelacak pihak ketiga.

Aksesibel dan siap RTL sejak awal

Tombol melayang sering hanya berupa ikon, sehingga pengguna pembaca layar harus menebak fungsinya. Tautan yang dihasilkan memiliki aria-label yang bisa Anda ubah (secara default "Chat dengan kami di WhatsApp"), outline fokus yang terlihat untuk pengguna keyboard, dan ikon dekoratif yang disembunyikan dari teknologi bantu. Sapaan memiliki tombol tutup sungguhan dengan label sendiri.

Pengunjung yang mengatur perangkatnya untuk mengurangi gerakan akan melihat tombol tanpa animasi geser masuk atau zoom saat hover. Sapaan menggunakan arah teks otomatis dan properti CSS logis, sehingga teks Arab dan bahasa right-to-left lainnya tampil dengan benar, dan Anda bisa menempatkan tombol di kiri bawah untuk situs RTL.

  • Tautan dapat dijangkau keyboard dengan nama aksesibel yang jelas.
  • Mengikuti prefers-reduced-motion.
  • Disembunyikan saat dicetak, dan bisa diatur per jenis perangkat.
  • Sapaan yang ditutup diingat selama kunjungan, tanpa cookie.

Memilih warna, posisi, dan waktu tampil

Kanan bawah adalah konvensi di situs left-to-right, sedangkan kiri bawah sering cocok untuk situs berbahasa Arab. Pastikan tombol tidak menutupi banner cookie, peluncur chatbot, atau bilah checkout di seluler. Hijau WhatsApp (#25D366) langsung dikenali; dengan ikon putih, kontrasnya sekitar 2:1, jadi jika aksesibilitas paling penting, hijau yang lebih gelap seperti #128C7E memberi kontras sekitar 4:1.

Jeda beberapa detik memberi pengunjung waktu membaca halaman sebelum tombol muncul, dan menampilkannya hanya di seluler adalah pilihan yang masuk akal jika tim Anda membalas dari ponsel. Buat sapaan satu baris pendek dan spesifik, seperti "Ada pertanyaan soal pengiriman? Chat dengan kami."

Tombol resmi Chat on WhatsApp dan aturan merek

WhatsApp juga menyediakan tombol "Chat on WhatsApp" resmi berwarna hijau dan putih dalam tiga ukuran, dan meminta bisnis menggunakannya tanpa perubahan. Menurut pusat bantuan WhatsApp, tombol ini saat ini hanya tersedia dalam bahasa Inggris. Tombol ikon melayang dari alat ini adalah pola lain yang lebih ringkas. Apa pun yang Anda pakai, jangan ubah logo WhatsApp itu sendiri dan jangan memberi kesan bahwa WhatsApp mendukung bisnis Anda.

Saat satu ponsel tidak lagi cukup

Tombol di website dapat meningkatkan jumlah chat masuk dengan cepat. Di aplikasi WhatsApp Business, percakapan tersimpan pada sejumlah terbatas perangkat tertaut. Di WhatsApp Business Platform (API), tautan wa.me yang sama dapat terhubung ke kotak masuk tim bersama (shared inbox), tempat chat ditugaskan ke agen, dijawab lebih dulu oleh chatbot atau agen AI, dan ditindaklanjuti dengan template yang disetujui setelah jendela layanan pelanggan 24 jam berakhir.

Rencanakan siapa yang menjawab, pada jam berapa, dan seberapa cepat. Cantumkan jam balasan Anda di sapaan jika Anda tidak melayani chat sepanjang waktu.

Pertanyaan seputar tombol WhatsApp di website

Bagaimana cara memasang tombol WhatsApp di website saya?

Buat kode di atas dengan nomor dan pesan Anda, salin, lalu tempel tepat sebelum tag penutup </body> di situs Anda, atau di area kode footer pada website builder Anda. Tombol kemudian muncul di setiap halaman.

Apakah widget chat WhatsApp ini gratis?

Ya. Generator dan kodenya gratis, tidak memerlukan akun, dan tanpa batas penggunaan. Tombol ini langsung terhubung ke WhatsApp, jadi tidak ada langganan atau skrip hosting di baliknya.

Apakah tombol WhatsApp akan memperlambat website saya?

Tidak. Snippet ini hanya beberapa kilobyte HTML, CSS, dan JavaScript inline, dan tidak membuat permintaan jaringan sampai pengunjung mengkliknya, berbeda dengan widget yang memuat skrip, font, dan pelacak eksternal.

Bagaimana cara memasang tombol WhatsApp di WordPress?

Gunakan plugin kode header dan footer seperti WPCode lalu tempel snippet di bagian footer, atau tambahkan ke blok Custom HTML di template footer jika Anda memakai block theme. Bersihkan cache lalu uji.

Bagaimana cara memasang tombol WhatsApp di Shopify?

Di admin Shopify, buka Online Store, Themes, lalu Edit code pada tema yang aktif. Buka layout/theme.liquid dan tempel snippet tepat sebelum </body>, lalu simpan dan periksa toko Anda di seluler.

Bisakah tombol WhatsApp hanya ditampilkan di seluler?

Bisa. Hapus centang Desktop di generator dan tombol akan disembunyikan pada layar selebar 768 piksel ke atas. Anda juga bisa menghapus centang Mobile untuk menampilkannya hanya di desktop.

Bisakah beberapa agen menjawab chat dari tombol di website?

Kurang baik jika dari satu ponsel. Hubungkan nomor ke WhatsApp Business API dan arahkan chat ke kotak masuk bersama, tempat beberapa agen dan chatbot dapat menjawab dari nomor yang sama.

Alat gratis lainnya