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.

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 – HTML Whatsapp Icon.

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

2. 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
);

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

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

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

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

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

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

6. Determine whether or not to point out the floating WhatsApp chat button on IE.

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

7. Attach the WhatsApp click on to talk hyperlink to the button.

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

8. 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

optionvaluedefaultdescription
phonestring''WhatsApp international number which 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

Floating-Whatsapp-Chat-Button

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

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…

Leave a Reply

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