Need help with floating-whatsapp?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

rafaelbotazini
157 Stars 125 Forks MIT License 33 Commits 7 Opened issues

Description

This is a simple floating WhatsApp button plugin for jQuery.

Services available

!
?

Need anything else?

Contributors list

Floating WhatsApp

This is a very simple floating WhatsApp button plugin for jQuery.

It adds a floating-like button to your site that calls the WhatsApp Click to Chat API.

It will automatically begin a WhatsApp chat with the number set when the user clicks the button.

You an also activate a fake chat window with a customized message where the user can input their reply before opening WhatsApp.

Installing

Link the files to your html (make sure you load the files after jQuery)


How to use it

Create a div element and select it with jQuery, then call the plugin using the function

$().floatingWhatsApp([options])
.
  

Fake Chat Window

Enable a little fake chat window floating above the button:

$('#myDiv').floatingWhatsApp({
    phone: '5491133359850',
    popupMessage: 'Hello, how can we help you?',
    showPopup: true
});

Fake Chat Window

Customization

You can customize the appearance of the button and the chat window:

$('#myDiv').floatingWhatsApp({
    phone: '5491133359850',
    popupMessage: 'Hello, how can we help you?',
    message: "I'd like to order a pizza",
    showPopup: true,
    showOnIE: false,
    headerTitle: 'Welcome!',
    headerColor: 'crimson',
    backgroundColor: 'crimson',
    buttonImage: ''
});

Custom settings

Options

| option | value | default | description | |---------------------|-----------------------------------------------|--------------------------|-------------| | phone |

string
|
''
| WhatsApp intenational number which will receive the message. | message |
string
|
''
| Message to be sent. If
showPopup
is
true
, the input will be populated with this message. | position |
'left'
|
'right'
|
'left'
| Position of the button the screen. | popupMessage |
string
|
''
| Message to be shown as a received message in the fake chat. | showPopup |
bool
|
false
| Show a fake chat popup when the user hovers (on desktop) or clicks the button (on mobile). | autoOpenTimeout |
Number
|
0
| Set an amount of time in milliseconds for the popup to open automaticaly. | headerColor | any css color
string
|
'#128C7E'
| Background color of the popup window title bar. | headerTitle |
string
|
'WhatsApp Chat'
| Text to be displayed at the popup window title bar. | buttonImage |
jQuery
object | css selector
string
| this one | Button background image. Must be an
img
or
svg
in order to be displayed properly. | zIndex |
Number
|
string
| none | Overrides
.floating-wpp
div z-index. Use a z-index css property value. | showOnIE |
boolean
|
true
| Whether to show or not the button on IE (recommended, since IE does not support WhatsApp Web). | size |
string
(Any css option valid for width and height properties) |
'72px'
| The size of the button | backgroundColor | Any css color
string
|
'#25D366'
| The button backgrund color.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.