Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat tombol whatsapp mengambang dan popup dialog box whatsapp di website dengan jquery. Penasaran?, ayo ikuti selengkapnya di bawah ini.
Floating whatsapp button adalah tombol whatsapp mengambang yang biasanya terletak di pojok kiri atau kanan bawah halaman website. Ketika tombolnya diklik, maka akan menampilkan popup form dialog untuk menghubungi si pemilik atau admin website tersebut. Fitur ini sangat bagus untuk mempermudah pengunjung mencari informasi langsung melalui admin.
Cara Membuat Floating Whatsapp Sendiri dengan Jquery
1. Buatlah sebuah folder baru dengan nama whatsapp_floating_example atau nama folder yang kalian inginkan. Lokasi folder boleh dimana saja, bisa di htdocs atau my document
2. Selanjutnya download plugin atau library floating whatsapp melalui link berikut ini https://github.com/rafaelbotazini/floating-whatsapp/archive/refs/heads/master.zip. Setelah didownload jangan lupa untuk unzip dan letakkan folder yang telah diunzip di dalam folder whatsapp_floating_example
3. Selanjutnya buatlah sebuah file baru di dalam folder whatsapp_floating_example dengan nama index.html. Ikuti scriptnya seperti di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- this is floating whatsapp css -->
<link rel="stylesheet" href="floating-whatsapp-master/floating-wpp.min.css">
<title>How to Add Whatsapp Button</title>
</head>
<body>
<div class="container mt-4">
<div class="alert alert-info p-4 text-center">
<h3>Sahretech - How to add whatsapp floating button</h3>
</div>
</div>
<div id="whatsapp_button"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- this is floating whatsapp javascript -->
<script type="text/javascript" src="floating-whatsapp-master/floating-wpp.js"></script>
<script>
$("#whatsapp_button").floatingWhatsApp({
//nomor whatsappmu
phone: "08137144999",
//popup message
popupMessage: "Hello, how can we help you?",
showPopup: true,
//ini adalah parameter lain yang bisa kalian gunakan
//hapus tanda komentar untuk menggunakan
// message: "I want ask something about your product",
// showOnIE: false,
// headerTitle: 'Welcome!',
// headerColor: 'crimson',
// backgroundColor: 'crimson',
});
</script>
</body>
</html>Ok semua step sudah dikerjakan, selanjutnya kita bisa melakukan uji coba. Jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.
|
| Hasil Akhir |
Ok, sekian tutorial kita kali ini tentang cara membuat floating whatsapp button sendiri dengan jquery. Semoga bermanfaat dan dapat diimplementasikan. Sekian dan terima kasih. 😼
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi