Skip to content
This is a simple floating WhatsApp button plugin for jQuery.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Alter image and demo file Jul 12, 2018
.gitignore Added .gitignore file Jul 12, 2018
LICENSE Create LICENSE Aug 12, 2019
README.md Update README.md Aug 27, 2018
burger.svg Update demo and README Aug 27, 2018
custom-settings.png Update demo and README Aug 27, 2018
fake-chat.png
floating-wpp.css Customize button size and background color Aug 27, 2018
floating-wpp.js Customize button size and background color Aug 27, 2018
floating-wpp.min.css Update minified versions Aug 27, 2018
floating-wpp.min.js Update minified versions Aug 27, 2018
index.html Update demo and README Aug 27, 2018
jquery-3.3.1.min.js Initial commit Mar 26, 2018
whatsapp.svg Alter image and demo file Jul 12, 2018

README.md

Floating WhatsApp

This is a very simple floating WhatsApp button plugin for jQuery.

It adds a floating-like button to your site that calls the WhatsApp Click to Chat API.

It will automatically begin a WhatsApp chat with the number set when the user clicks the button.

You an also activate a fake chat window with a customized message where the user can input their reply before opening WhatsApp.

Installing

Link the files to your html (make sure you load the files after jQuery)

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="floating-wpp.min.js"></script>
<link rel="stylesheet" href="floating-wpp.min.css">

How to use it

Create a div element and select it with jQuery, then call the plugin using the function $().floatingWhatsApp([options]).

<body>
  <div id="myDiv"></div>
</body>
<script type="text/javascript">
  $(function () {
    $('#myDiv').floatingWhatsApp({
      phone: '5491133359850'
    });
  });
</script>

Fake Chat Window

Enable a little fake chat window floating above the button:

$('#myDiv').floatingWhatsApp({
    phone: '5491133359850',
    popupMessage: 'Hello, how can we help you?',
    showPopup: true
});

Fake Chat Window

Customization

You can customize the appearance of the button and the chat window:

$('#myDiv').floatingWhatsApp({
    phone: '5491133359850',
    popupMessage: 'Hello, how can we help you?',
    message: "I'd like to order a pizza",
    showPopup: true,
    showOnIE: false,
    headerTitle: 'Welcome!',
    headerColor: 'crimson',
    backgroundColor: 'crimson',
    buttonImage: '<img src="burger.svg" />'
});

Custom settings

Options

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.
You can’t perform that action at this time.