Floating WhatsApp adalah sebuah widget yang muncul sebagai tombol layar terapung pada situs web atau aplikasi seluler Anda untuk memungkinkan pengguna menghubungi Anda melalui aplikasi WhatsApp. Pada artikel ini, kita akan membahas cara membuat Floating WhatsApp dengan menggunakan metode yang sederhana dan efektif.
Langkah 1: Persiapkan Kode HTML
Pertama, kita perlu menyiapkan kode HTML untuk Floating WhatsApp. Salah satu cara paling umum adalah dengan menggunakan elemen <a> dengan atribut khusus. Di dalam elemen <a>, kita juga akan menambahkan ikon WhatsApp yang diambil dari FontAwesome.
<a href="https://wa.me/{YOUR_PHONE_NUMBER}" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>Pastikan untuk mengganti {YOUR_PHONE_NUMBER} dengan nomor telepon yang ingin Anda gunakan untuk menerima pesan WhatsApp dari pengguna.
Langkah 2: Gaya CSS
Setelah kita menyiapkan kode HTML, kita perlu menambahkan gaya CSS agar Floating WhatsApp dapat tampil dengan baik dan terapung di sudut layar. Berikut adalah contoh gaya CSS yang dapat Anda gunakan atau sesuaikan sesuai kebutuhan Anda:
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-float{
margin-top:22px;
}Pastikan Anda menyertakan file CSS ini dalam markup HTML Anda dengan menggunakan elemen <style> atau menyimpannya dalam file terpisah dan menghubungkannya melalui elemen <link>.
Langkah 3: Integrasi JavaScript (Opsional)
Jika Anda ingin menambahkan logika tambahan, misalnya menampilkan atau menyembunyikan Floating WhatsApp berdasarkan beberapa kondisi tertentu, Anda dapat mengintegrasikan JavaScript ke dalam kode floating WhatsApp. Misalnya, berikut adalah contoh penggunaan jQuery untuk menyembunyikan dan menampilkan Floating WhatsApp sesuai dengan jarak scroll dari atas halaman.
$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('.float').fadeIn();
} else {
$('.float').fadeOut();
}
});Pastikan Anda menyertakan library jQuery dan mencantumkan script di atas dalam <script> tag setelah referensi librari jQuery.
Kesimpulan
Dalam artikel ini, kami telah membahas cara membuat Floating WhatsApp dengan menggunakan kode HTML, gaya CSS, dan penggunaan JavaScript opsional. Dengan mengikuti langkah-langkah ini, Anda dapat dengan mudah menambahkan fitur Floating WhatsApp ke situs web atau aplikasi seluler Anda, membuatnya lebih mudah bagi pengguna untuk menghubungi Anda melalui WhatsApp.
