How to Add Floating Whatsapp Chat Button In HTML | venom-button

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.

  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.


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


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

  autoOpenTimeout: 100

7. Determine the floating WhatsApp chat button on IE.

  showOnIE: false

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

  linkButton: true

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


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


phonestring''The WhatsApp international number will receive the message (
messagestring''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.
nameClientstring'Name Client'Set the name of the client in fake chat.
chatMessagestring'Hi there 👋<br><br>How can I help you?'Message to be shown as a received message in the fake chat.
showPopupboolfalseShow a fake chat popup when the user hovers (on desktop) or clicks the button (on mobile).
linkButtonboolfalsePut the link on the button so that when clicked it also sends the user to WhatsApp
autoOpenTimeoutNumber0Set an amount of time in milliseconds for the popup to open automatically.
headerColorany css color string'rgb(9, 94, 84)'The background color of the popup window title bar.
headerTitlestring'WhatsApp Chat'Text to be displayed at the popup window title bar.
buttonImagejQuery object | css selector stringthis oneButton background image. Must be an img or svg in order to be displayed properly.
avatarjQuery object | css selector stringthis oneSet avatar image of fake chat. Must be an img or svg in order to be displayed properly.
zIndexNumber | stringnoneOverrides .venom-button div z-index. Use a z-index CSS property value.
showOnIEbooleantrueWhether to show or not the button on IE (recommended, since IE does not support WhatsApp Web).
sizestring (Any css option valid for width and height properties)'72px'The size of the button
backgroundColorAny css color string'rgb(9, 94, 84)'The button background color.

See Also –

A Lightweight, Elegant and Ethical Popular Social Share Buttons | shareon
jQuery Select Plugin for Mobile (Android and iOS) with Feature

See Demo And Download


Official Website(orkestral): Click Here

This superior jQuery/javascript plugin is developed by orkestral. For extra advanced usage, please go to the official website.

Related Posts


Collapsible Sidebar Navigation Using Bootstrap 4

Portable Sidebar Foldable Navigation System [Navigate Out of Canvas] built on Bootstrap 4, jQuery, and CSS / CSS3. Feel free to download and use it in your…


UI Interactive Range Input Slider with CSS

UI-Range input component, highly customizable, based on CSS variants. This CSS library is for creating range sliders with hash marks, min/max values, and floating labels from regular…


Accessible Bootstrap 4 Accordion With jQuery Plugin

Accessible Bootstrap 4, an easy-to-use accordion component for BS4 makes it easy to navigate accordion panels. It includes features intended to help users understand that the accordion…


Component with jQuery Image Previewer Plugin | Envato Preview

jQuery Envato Preview is a plug-in that attaches a tooltip-style rich text preview to an element when hovered over it. It also appears on Envato Networks such…


A Responsive, Touch-Enabled jQuery Grid Accordion Component

Grid Accordion jQuery plugin is a responsive, touch-enabled jQuery grid accordion plugin that combines grid and accordion functionality. Use it to create a responsive grid where you…


Responsive Card Neon Glass HTML & CSS

Responsive Neon Glass Cards are beautiful neon glass cards using HTML and CSS with animation effects. Don’t forget to join the channel for more videos like this…

Leave a Reply

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