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" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<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 () {
  $('.floating-wpp').floatingWhatsApp({
    phone: 'xxxxxxxxxx',
    popupMessage: 'Popup Message',
    showPopup: true,
    message: 'Message To Send',
    headerTitle: 'Header Title'
  });
});

4. Full plugin options with default values.

$('.floating-wpp').floatingWhatsApp({
  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