Floating WhatsApp Chat Button Plugin - Whatsapp Floatbox

File Size: 10.5 KB
Views Total: 4381
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Floating WhatsApp Chat Button Plugin - Whatsapp Floatbox

Whatsapp Floatbox is a jQuery plugin to create a floating Whatsapp chat button on the page, which enables your visitors to send a message directly to pre-defined contacts.

How to use it:

1. Insert the Whatsapp Floatbox plugin's JS & CSS files into the HTML page.

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

2. Create the HTML for the floating Whatsapp click to chat button. Possible HTML data attributes:

  • data-wanumber: full phone number in international format
  • data-waname: username
  • data-wadivision: text displayed above the username
  • data-waava: path to user avatar
<div class="myk-wa">
  <div class="myk-item" data-wanumber="628123456079" data-waname="Jonny" data-wadivision="Sales" data-waava="images/user.png"></div>
  <div class="myk-item" data-wanumber="9212312347" data-waname="Rachel" data-wadivision="Technician" data-waava="images/user.png"></div>
  <!-- more whatsapp accounts here -->

3. Call the function WAFloatBox on the top container and done.


This awesome jQuery plugin is developed by davidgoweb. For more Advanced Usages, please check the demo page or visit the official website.