Floating Whatsapp Chatbox With jQuery - whatsapp-chat.js

whatsapp-chat.js is a small, flexible, and customizable Whatsapp chatbox jQuery plugin that keeps floating on top of the page even when the user scrolls down.

It allows your visitors to chat with multiple Whatsapp users by clicking on the Chat button on your site.

How to use it:

1. Insert the stylesheet whatsapp-chat.css and JavaScript whatsapp-chat.js into your document.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- whatsapp-chat.js Files -->
<script src="/path/to/whatsapp-chat.js"></script>
<link rel="stylesheet" href="/path/to/whatsapp-chat.css" />

2. Create an empty DIV container for the Whatsapp chatbox.

<div id="example"></div>

3. Initialize the plugin and add a contact info to the Whatsapp chatbox.

whatsappchat.singleUser(
{
  selector: '#example',
  name:'jQueryScript',
  phone: 'YOUR PHONE NUMBER',
  designation: 'jQuery Script',
  image : 'Avatar.jpg'
});

4. You're also allowed to add multiple contacts to the Whatsapp chatbox.

whatsappchat.multipleUser(
  {
    selector: '#example',
    users: [
      {
        name:'jQueryScript',
        phone: '8801343434343',
        designation: 'jQueryScript.Net',
        image : 'https://upload.wikimedia.org/wikipedia/en/d/da/Matt_LeBlanc_as_Joey_Tribbiani.jpg'
      },
      {
        name:'CSSScript',
        phone: '8801343434343',
        designation: 'CSSScript.Com',
        image: 'https://upload.wikimedia.org/wikipedia/en/6/66/Matthew_Perry_as_Chandler_Bing.png'
          
      },
      {
        name:'Vue.js',
        phone: '8801343434343',
        active: false
      },
    ],
    headerMessage: 'Feel free to ask any questions in <strong>WhatsApp</strong>',
    chatBoxMessage: 'Team replies in a minute',
    color: '#25D366',
  }
);

---

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