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