Add Floating Whatsapp Message Button on Your Website

Add Floating Whatsapp Message Button on Your Website:-
If you want to add quick whatsapp floating button with message box to connect with your users then here I am going to share an awesome jQuery plugin which add floating whatsapp button on your website and if some one click on that button a chat box will open with prefilled message, Using this quick connect box your user can send message to you on given whatsapp number using whatsapp web api.

Add Floating Whatsapp Message Button on Your Website

Libraries

Include following JS+CSS libraries on page to enable floating Whatsapp message button on your website,

<link rel="stylesheet" href="floating-wpp.min.css">
 

<script src="//code.jquery.com/jquery-latest.min.js">script>
<script type="text/javascript" src="floating-wpp.min.js">script>

HTML

Create a div container where whatsapp floating button and message box will display on page.

JS

Finally call the plugin’s function on page and customize the options like messagebox title, predefined message, floating button position etc.

$(function () {
        $('.floating-wpp').floatingWhatsApp({
            phone: '99999999999',
            popupMessage: 'Welcome to iamrohit.in',
            showPopup: true,
            position: 'right', // left or right
            autoOpen: false, // true or false
            //autoOpenTimer: 4000,
            message: 'Hello how are you my name is rohit',
            //headerColor: 'orange', // enable to change msg box color
            headerTitle: 'Whatsapp Message Box',
        });
    });

See live demo and download source code.

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Here are the list of options you can use to customize the plugins.

Related