Highly Customizable Floating Whatsapp Chat Button – whatsappButton.js

Category: Javascript , Social Media | November 25, 2019
Views Total:8,024 views
Official Page:Go to website
Last Update:November 25, 2019


Highly Customizable Floating Whatsapp Chat Button – whatsappButton.js


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

You Might Be Interested In:

Leave a Reply