Cara Membuat Tombol Mengambang (Floating Button) WhatsApp
Latar Belakang
WhatsApp telah menjadi salah satu sarana komunikasi yang banyak digunakan oleh customer di Indonesia, jika anda banyak menggunakan WhatsApp untuk berkomunikasi dengan customer, anda dapat menambahkan sebuah tombol pada webpage yang anda miliki dimana jika tombol tersebut di click akan mengarahkan customer untuk membuka aplikasi WhatsApp dan langsung mengirimkan message ke nomor perusahaan anda.
Pada dasarnya ada tiga langkah dalam membuat floating button WhatsApp ini. Pertama membuat tombolnya terlebih dahulu, kemudian menatanya (styling), dan yang terakhir memasang tautan ke WhatsApp. Anda dapat membuat desain apa pun untuk tombol, Anda hanya perlu CSS dan/atau JavaScript untuk itu. Bagian terpenting adalah mengarahkan lokasi ke tautan WhatsApp Anda.
Create the Button
First, we'll need to use some icon for the buttons, in this case we're going to use icon from FontAwesome. You can add this code snippet at the `<header>....</header>` section of your webpage.
<!-- load font awesome for icons -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
Then you can paste this code snippet for the button, please change the number inside the URL to your company WhatsApp Number.
<!-- render the button and direct it to wa.me -->
<a href="https://wa.me/6281228430523?text=Hi%20Qiscus" class="floating" target="_blank">
<i class="fab fa-whatsapp fab-icon"></i>
</a>
Style the Button
Setelah kita menambahkan elemen tombol pada halaman, kita dapat mengatur tampilan dari tombol tersebut menggunakan snippet CSS berikut:
<!-- add your custom CSS -->
<style>
body {
font-family: sans-serif;
}
/* Add WA floating button CSS */
.floating {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #25d366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.fab-icon {
margin-top: 16px;
}
</style>
Hasil
Setelah mengimplementasikan kode tersebut, akan tampil button seperti berikut:
Anda dapat mempelajari lebih lanjut tentang ini dari referensi ini: https://faq.whatsapp.com/general/chats/how-to-use-click-to-chatÂ
****