Floating WhatsApp Chat Button Plugin - Whatsapp Floatbox

File Size: 10.5 KB
Views Total: 4229
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 -->
</div>

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

$(function(){
  $(".myk-wa").WAFloatBox();
});

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