WAButton

Embed Universal 1 Baris

Tombol WhatsApp untuk HTML & Custom Websites

Tambahkan widget chat WhatsApp ke HTML & Custom Websites dalam hitungan menit. Kualifikasi pengunjung, arahkan percakapan, dan jaga tema tetap cepat.

Buat Tombol Saya Gratis

Pemasangan 1 mnt Target: index.html (before </body>) or root layout component

Pemasangan langkah demi langkah untuk HTML & Custom Websites

Ikuti langkah ini untuk menyematkan WAButton di situs HTML & Custom Websites Anda. Tanpa pengembangan rumit atau biaya aplikasi.

  1. 1

    Salin Cuplikan Embed Anda

    Salin cuplikan skrip milik Anda dari dasbor widget WAButton atau layar onboarding.

    Tips: Pastikan atribut async tetap aktif agar browser memuat skrip secara asinkron tanpa memblokir halaman.

  2. 2

    Tempel Sebelum Tag Penutup </body>

    Tempel kode ke file HTML root Anda (misalnya index.html) atau komponen layout root (misalnya layout.tsx, App.vue, base.blade.php). Letakkan tepat sebelum </body>.

    Tips: Menempatkan skrip tepat sebelum </body> membuat konten halaman Anda dimuat lebih dulu. 

    <script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
  3. 3

    Buka di Browser

    Simpan file lalu muat ulang browser Anda. Tombol WhatsApp melayang Anda akan langsung muncul di pojok bawah.

Mengapa pemilik toko dan agensi memilih WAButton untuk HTML & Custom Websites

Satu Tag Skrip Universal

Satu loader async mungil yang bekerja secara identik di HTML statis, SSR, dan framework SPA.

Gaya dengan Cakupan Terbatas

Setiap gaya dibatasi pada nama class berawalan wabutton-, sehingga tidak mengubah tampilan class Tailwind, Bootstrap, atau CSS kustom Anda.

Skrip Mandiri

Dibangun dengan Preact dan disertakan di dalam skripnya sendiri, sehingga halaman Anda tidak membutuhkan jQuery, React, maupun font ikon.

Peka terhadap Navigasi SPA

Otomatis mempertahankan status widget di setiap transisi rute sisi klien (React Router, Next.js, Vue Router).

Pertanyaan yang sering diajukan

Apakah WAButton berfungsi dengan Single Page App (SPA) seperti React, Next.js, atau Vue?

Ya! WAButton diinisialisasi pada objek window dan tetap bertahan di sepanjang navigasi router sisi klien tanpa perlu dieksekusi ulang pada setiap perpindahan rute.

Apakah WAButton akan menurunkan skor Google Lighthouse atau PageSpeed Insights saya?

WAButton adalah skrip async berukuran di bawah 40KB (dengan gzip) dari edge Cloudflare, jadi tidak memblokir first paint. Panel obrolan baru dimuat saat pengunjung membukanya. Pengaruhnya terhadap skor Anda bergantung pada situs Anda, jadi jalankan PageSpeed Insights sebelum dan sesudah menambahkannya.

Alat Gratis Terkait

Utilitas WhatsApp gratis untuk meningkatkan konversi toko Anda.

Panduan instalasi lainnya

Anda sudah punya pengunjung. Beri mereka .

Menambah trafik butuh waktu dan uang. Tombol WhatsApp membantu Anda mendapatkan lebih banyak pelanggan dari orang yang sudah berkunjung, selagi mereka masih tertarik.

Buat Tombol Saya Gratis Coba pembuat langsung

Satu baris kode. Tanpa kartu kredit. Tanpa menunggu.