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.
Floating Whatsapp Message Button


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,

<!--CSS-->
<link rel="stylesheet" href="floating-wpp.min.css">
 
<!--JS-->
<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.

<div class="floating-wpp"></div>


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.

DEMO | DOWNLOAD

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.

option value default description
phone string '' WhatsApp intenational number which will receive the message.
message string '' Message to be sent. If showPopup is true, the input will be populated with this message.
position 'left' | 'right' 'left' Position of the button the screen.
popupMessage string '' Message to be shown as a received message in the fake chat.
showPopup bool false Show a fake chat popup when the user hovers (on desktop) or clicks the button (on mobile).
autoOpenTimeout Number 0 Set an amount of time in milliseconds for the popup to open automaticaly.
headerColor any css color string '#128C7E' Background color of the popup window title bar.
headerTitle string 'WhatsApp Chat' Text to be displayed at the popup window title bar.
buttonImage jQuery object | css selector string this one Button background image. Must be an img or svg in order to be displayed properly.
zIndex Number | string none Overrides .floating-wpp div z-index. Use a z-index css property value.
showOnIE boolean true Whether to show or not the button on IE (recommended, since IE does not support WhatsApp Web).
size string (Any css option valid for width and height properties) '72px' The size of the button
backgroundColor Any css color string '#25D366' The button backgrund color.

One Reply to “Add Floating Whatsapp Message Button on Your Website”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.