 |
| Floatbox WhatsApp Chat Button With Plugin jQuery |
Floatbox Whatsapp is a jQuery plugin that allows you to create floating Whatsapp chat buttons on a page that allows visitors to send direct messages to predefined contacts.
This feature can be useful for your website, visitors can contact you directly with this floating button.
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();
});
Live Demo
See the Pen Floatbox WhatsApp Chat Button With Plugins Jquery by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- Floatbox_WhatsApp_Chat.zip
- Size :
- 20KB
- Site Download :
- Mediafire.com
- Official Website:
- Github.com
- License:
- MIT