Highly Customizable Floating Whatsapp Chat Button – whatsappButton.js

Preview:

Description:

A vanilla JavaScript plugin to create a customizable floating Whatsapp button that opens a conversation (live chat) form when clicked/tapped.

A great tool to make your visitors easily contact you with Whatsapp.

How to use it:

1. Include the whatsappButton.css and whatsappButton.js from the dist folder.

<link href="dist/wpp_css/whatsappButton.css" rel="stylesheet" />
<script src="dist/wpp_js/whatsappButton.js?v5"></script>

2. Generate a Whatsapp chat button on the page using the following parameters:

• pNumber: phone number
• wMessage: text to display when hovering over the button
• phMessage: placeholder text
• dMessage: text to display on mobile device
• iconStyle: icon style (0-4)
• color: background color
• subColor: color of details
• textColor: text color
• fontFamily: font name or font URL

new WhatsappButton(pNumber, wMessage, phMessage, dMessage, iconStyle, color, subColor, textColor, fontFamily);