How to Add a Floating WhatsApp Button to a Classic Builder Page

This script adds a floating WhatsApp button to the corner of your page. When a visitor clicks it, WhatsApp opens a chat with your phone number and a prefilled message.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it.

Add the button to your page

1. In the JavaScripts section, add the following script with placement set to Before Body End Tag:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
 document.addEventListener("DOMContentLoaded", function(event) {
   var phone = "your phone goes here (only numbers)"; //Add your phone here in international format. Omit any brackets, dashes, plus signs, and leading zeros when adding the phone   number in international format.
   var message = "your message goes here";
   var whatsappHref = "https://api.whatsapp.com/send?phone=" + phone + "&text=" + encodeURI(message);
   console.log(whatsappHref); // Just to check in the console the generated whatsapp link
   document.getElementById("whatsapp-widget").href=whatsappHref; // add the generated whatsapp link to the widget
});
</script>
<a id="whatsapp-widget" href="" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>

2. In the script, replace the placeholder values for phone and message with your own. Enter the phone number in international format using digits only, without brackets, dashes, plus signs, or leading zeros.

3. In the Stylesheets section, add the following CSS:

<style>
 .float{
 position:fixed;
 width:60px;
 height:60px;
 bottom:40px;
 right:40px;
 background-color:#25d366;
 color:#FFF;
 border-radius:50px;
 text-align:center;
 font-size:30px;
 box-shadow: 2px 2px 3px #999;
 z-index:100;
}
.my-float{
 margin-top:16px;
}
</style>

4. Save and republish the page. The button appears in Preview and on the published page.