How to Make Floating Whatsapp Button with Jquery

How to Make Floating Whatsapp Button with Jquery

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 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="" /> <link rel="stylesheet" href="" /> <!-- 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=""></script> <script src=""></script> <script src=""></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.

Cara menambahkan whatsapp button
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. 😼

Post a Comment