How to Add Floating Whatsapp Chat Button In HTML

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp conversation with the specified number when the user clicks the button.

You can also activate a fake chat window with a custom message where the user can input their response before opening WhatsApp.

WhatsApp’s Click to Chat feature allows you to start a conversation with someone without saving their phone number in your phone’s address book. As long as you know that person’s phone number and they have an active WhatsApp account, you can create a link that will allow you to start a conversation with them. By clicking on the link, you automatically open a chat with the person. Click to chat works on both your phone and WhatsApp Web.

How to use chat on WhatsApp button

The branded chat on the WhatsApp button follows the branding guidelines. By following the branding guidelines, this button will be known and trusted by potential customers who want to interact with you. The chat button on WhatsApp is available in green and white and in three different sizes: small, medium, and large.

Note: The chat button on WhatsApp is currently only available in English.

To increase engagement using the chat button on WhatsApp, follow these best practices:

Use the button as is. Don’t change the button.
Use the latest version of the button. You can download button designs here.
Make sure the button is visible and easy to read.

You can use the chat button on WhatsApp in many places, such as:

Landing pages on desktop browsers
Contact pages
Mobile applications
Mobile versions of your website
Templates from third-party developers

Must Read: Simple Facebook/Linkedin-like Chat Module For Angular

How to make use of it

1. Load the stylesheet venom-button.min.css and JavaScript venom-button.min.js within the HTML document.

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="venom-button.min.css" />
<script src="venom-button.min.js"></script>

2. Create a placeholder for the floating WhatsApp chat button.

<div id="myButton"></div>

3. Create a default floating WhatsApp chat button on the webpage.

$('#myButton').venomButton(
  phone: 'Your Phone Number Here',
  chatMessage: 'Chat Window Title',
  message: "Chat Message",
  nameClient: "WCF",
  showPopup: true
);

4. Create a fundamental floating Whatsapp chat button on the webpage.

$('#myButton').venomButton();

5. Change the place of the floating WhatsApp chat button.

$('#myButton').venomButton();

6. Set the time to attend earlier than opening the chat window.

$('#myButton').venomButton({
  autoOpenTimeout: 100
});

7. Determine the floating WhatsApp chat button on IE.

$('#myButton').venomButton({
  showOnIE: false
});

8. Attach the WhatsApp click on to talk link to the button.

$('#myButton').venomButton(
  linkButton: true
);

9. Customize the looks of the floating WhatsApp chat button.

$('#myButton').venomButton();

Must Read:

[ChatBot] A JavaScript Plugin to Help Developers Build a Simple Conversation | flow-chat-js
A Simple Quick Chat Conversation Component Created with Vue.js

Options

option	value	default	description
phone	`string`	`''`	The WhatsApp international number will receive the message (https://faq.whatsapp.com/en/general/21016748).
message	`string`	`''`	Message to be sent. It `showPopup` is `true`, the input will be populated with this message.
position	`'left'` \| `'right'`	`'left'`	Position of the button on the screen.
nameClient	`string`	`'Name Client'`	Set the name of the client 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 automatically.
headerColor	any css color `string`	`'rgb(9, 94, 84)'`	The 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 background color.