Floating WhatsApp Message Button - jQuery Floating WhatsApp

Floating WhatsApp Message Button - jQuery Floating WhatsApp

Floating WhatsApp is a jQuery plugin that adds a customizable WhatsApp message button to the webpage. Clicking on the floating WhatsApp button will display a chat popup that enables your users to send a pre-filled message to a specific WhatsApp user.

1. Insert the jQuery Floating WhatsApp plugin's files into the webpage which has jQuery library loaded.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<link rel="stylesheet" href="floating-wpp.min.css">
<script src="floating-wpp.min.js"></script>

2. Create a contaner element to place the floating WhatsApp button.

<div class="floating-wpp"></div>

3. Generate a floating WhatsApp button on the webpage and specify the message to send.

$(function () {
    phone: 'xxxxxxxxxx',
    popupMessage: 'Popup Message',
    showPopup: true,
    message: 'Message To Send',
    headerTitle: 'Header Title'

4. Full plugin options with default values.

  phone: '',
  message: '',
  position: 'left', // or right
  popupMessage: '',
  showPopup: false,
  autoOpen: false,
  autoOpenTimer: 4000,
  headerColor: '#128C7E',
  headerTitle: '',

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

  • Publication date: 27.03.2018
  • Source