Hello everyone, welcome back again in pokaone. On this occasion, we will learn how to make a floating WhatsApp button and a WhatsApp popup dialog box on a website using jquery. Intrigued?, let's follow in full below.
Floating whatsapp button is a floating whatsapp button which is usually located in the left or bottom right corner of the website page. When the button is clicked, it will display a dialog form popup to contact the owner or admin of the website. This feature is great for making it easier for visitors to find information directly through the admin.
How to Make Your Own Floating Whatsapp with Jquery
1. Create a new folder with the name whatsapp_floating_example or the folder name you want. The folder location can be anywhere, it can be htdocs or my document
2. Then download the WhatsApp floating plugin or library via the following link https://github.com/rafaelbotazini/floating-whatsapp/archive/refs/heads/master.zip. After downloading, don't forget to unzip and place the unzipped folder in the whatsapp_floating_example folder
3. Next, create a new file in the whatsapp_floating_example folder with the name index.html. Follow the script as below
<!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({
//your whatsapp number
phone: "08137144999",
//popup message
popupMessage: "Hello, how can we help you?",
showPopup: true,
//this is other parameter, you can use it
//remove // below to use other parameter
// message: "I want ask something about your product",
// showOnIE: false,
// headerTitle: 'Welcome!',
// headerColor: 'crimson',
// backgroundColor: 'crimson',
});
</script>
</body>
</html>Ok, all the steps have been done, then we can do a trial run. If successful, it will look like the image below.
|
| Hasil Akhir |
Ok, that's all for our tutorial this time about how to make your own floating whatsapp button with jquery. Hopefully useful and can be implemented. That is all and thank you. 😼
0 Comments
Come on ask us and let's discuss together
Emoji