Tombol WhatsApp melayang (floating WhatsApp button) adalah elemen antarmuka sederhana tapi sangat berguna untuk meningkatkan interaksi langs...
Tombol WhatsApp melayang (floating WhatsApp button) adalah elemen antarmuka sederhana tapi sangat berguna untuk meningkatkan interaksi langsung antara pengunjung dan pemilik website. Tombol ini biasanya ditempatkan di pojok bawah halaman dan saat diklik, langsung membuka aplikasi WhatsApp atau WhatsApp Web untuk mengirim pesan.
Pada artikel ini, kamu akan belajar cara membuat tombol WhatsApp melayang menggunakan JavaScript murni, tanpa perlu menyentuh HTML secara langsung.
🔍 Mengapa Floating Button WhatsApp?
Berikut adalah alasan mengapa floating WhatsApp penting untuk situs atau blog:
- Mempermudah komunikasi langsung
- Meningkatkan konversi penjualan/lead
- Mudah dibuat dan ringan (tanpa plugin)
- Dapat digunakan di situs statis maupun dinamis
💡 Fitur yang Akan Kita Buat
- Tombol melayang di pojok kanan bawah
- Menggunakan ikon Font Awesome (atau SVG jika ingin ringan)
- Arahkan ke
https://wa.me/nomor - Dapat ditambahkan ke halaman mana pun dengan satu snippet JavaScript
✍️ Langkah-Langkah Implementasi
1. Buat Struktur HTML Minimal
Misalnya, HTML kamu hanya berisi:
<!DOCTYPE html><html><head> <title>Contoh WhatsApp Floating</title></head><body> <h1>Welcome to syahdandev</h1> <script src="whatsapp-float.js"></script></body></html>
Kita akan menaruh seluruh kode tombol WhatsApp di file JavaScript eksternal (whatsapp-float.js), atau langsung di <script>.
2. Tambahkan Kode JavaScript
Berikut adalah kode lengkap JavaScript untuk:
- Memuat Font Awesome secara dinamis
- Menambahkan elemen tombol
<a>kebody - Menyisipkan CSS melalui JavaScript
// Tambahkan Font Awesomeconst faLink = document.createElement("link");faLink.rel = "stylesheet";faLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";document.head.appendChild(faLink);// Tambahkan tombol WAconst waButton = document.createElement("a");waButton.href = "https://wa.me/628998937095";waButton.target = "_blank";waButton.setAttribute("aria-label", "Chat via WhatsApp");waButton.className = "wa-float";waButton.innerHTML = '<i class="fab fa-whatsapp wa-icon"></i>';document.body.appendChild(waButton);// Tambahkan gayaconst style = document.createElement("style");style.textContent = ` .wa-float { position: fixed; bottom: 20px; right: 20px; background-color: #25d366; color: white; border-radius: 50%; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 9999; transition: transform 0.3s ease; text-decoration: none; } .wa-float:hover { transform: scale(1.1); } .wa-icon { font-size: 28px; }`;document.head.appendChild(style);
🧪 Demo Langsung
Kamu bisa melihat versi langsung dari tombol ini di CodePen berikut:
👉 Demo CodePen (by: @cloud-dark)
CodePen tersebut menggunakan pendekatan full JavaScript, sehingga bisa kamu salin dan tempel ke halaman manapun tanpa menyentuh HTML.
🔧 Tips Tambahan
✅ Ganti Nomor WhatsApp
Pastikan mengganti:
waButton.href = "https://wa.me/628998937095";
… dengan nomor kamu, dan bisa juga ditambah pesan otomatis:
"https://wa.me/628998937095?text=Halo%20saya%20tertarik%20dengan%20layanan%20Anda"
✅ Ubah Posisi ke Kiri
Ganti:
right: 20px;
… menjadi:
left: 20px;
✅ Kelebihan Menggunakan JavaScript
- Tidak perlu menulis ulang elemen HTML
- Cocok untuk Blogger, WordPress (via custom HTML), atau CMS lainnya
- Mudah dikustom tanpa plugin
✨ Penutup
Dengan mengikuti tutorial ini, kamu sekarang bisa membuat tombol WhatsApp melayang di pojok bawah hanya menggunakan JavaScript. Teknik ini cocok untuk situs sederhana, blog pribadi, atau toko online yang ingin meningkatkan konversi lewat komunikasi langsung.
Jangan lupa untuk mengecek CodePen ini jika kamu butuh referensi langsung.
Semoga bermanfaat! 👋
COMMENTS