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
});

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" />'
});

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.

jhoanborges / floating-whatsapp Goto Github PK