Venom Button 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 src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="venom-button.min.js"></script>
<link rel="stylesheet" href="venom-button.min.css">

How to use it

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

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

Fake Chat Window

Enable a little fake chat window floating above the button:

$('#myDiv').venomButton({
    phone: '5521990000000',
    chatMessage: 'Hi there 👋<br><br>How can I help you?',
    showPopup: true
});

Customization

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

$('#myDiv').venomButton({
        phone: '5521990000000',
        message: "I'd like to order a pizza",
        chatMessage: 'Hi there 👋<br><br>How can I help you?',
        showPopup: true,
        avatar: './assets/avatar.jpg',
        position: "right",
        headerColor: '#033E8C',
        buttonColor: '#033E8C',
        linkButton: false,
        showOnIE: false,
        nameClient: "Joe Dutra",
        headerTitle: 'Commercial Sales',
    });

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.
nameClient	`string`	`'Name Client'`	Set name of clint in fake chat.
chatMessage	`string`	`'Hi there 👋<br><br>How can I help you?'`	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).
linkButton	`bool`	`false`	Put the link on the button so that when clicked it also sends the user to whatsapp
autoOpenTimeout	`Number`	`0`	Set an amount of time in milliseconds for the popup to open automaticaly.
headerColor	any css color `string`	`'rgb(9, 94, 84)'`	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.
avatar	`jQuery` object \| css selector `string`	this one	Set avatar image of fake chat. Must be an `img` or `svg` in order to be displayed properly.
zIndex	`Number` \| `string`	none	Overrides `.venom-button` 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`	`'rgb(9, 94, 84)'`	The button backgrund color.

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting