--- title: "Tombol chat WhatsApp untuk website Anda" description: "Buat tombol chat WhatsApp melayang untuk website Anda: atur warna, posisi, sapaan, dan jeda, lihat pratinjau langsung, lalu salin kode ringan. Gratis." canonical: "https://omnichannels.ai/id/tools/whatsapp-chat-button/" language: "id" updated: "2026-10-10" publisher: "BroadNet Technologies" brand: "OmniChannels.ai" --- # Tombol chat WhatsApp untuk website Anda Canonical: https://omnichannels.ai/id/tools/whatsapp-chat-button/ Language: id Publisher: OmniChannels.ai by BroadNet Technologies 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. ## Cara memasang tombol WhatsApp di website Anda 1. **Masukkan nomor dan pesan:** Pilih negara, ketik nomor WhatsApp Anda, dan tulis pesan yang akan dikirim pengunjung, misalnya pertanyaan tentang pesanan. 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. **Salin kodenya:** Salin snippet. Ukurannya hanya beberapa kilobyte HTML, CSS, dan JavaScript, tanpa permintaan eksternal, cookie, atau pelacakan. 4. **Tempel sebelum :** 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 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 , 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.