How to Add a Floating WhatsApp Button to Your Website (Free Code)

Most customers in the UAE prefer to send a WhatsApp message instead of filling in a contact form. A floating WhatsApp button in the corner of your website lets visitors start a chat with one tap, from any page.

In this tutorial you get free copy-paste code for a floating WhatsApp button, and simple steps to add it to WordPress or Elementor – no plugin needed.

What the button does

• Shows a green WhatsApp button in the bottom-right corner of every page
• Opens a WhatsApp chat with your number when clicked, on mobile and desktop
• Fills in a ready-made first message, so the customer only has to press send
• Has a soft pulse animation so visitors notice it

Step 1: Copy the code

Copy the full code below. It includes the HTML and CSS together.

<!-- Floating WhatsApp Button by junedweb.com -->
<a href="https://wa.me/971500000000?text=Hello%2C%20I%20visited%20your%20website%20and%20have%20a%20question."
   class="jw-wa-btn" target="_blank" rel="noopener" aria-label="Chat with us on WhatsApp">
  <svg viewBox="0 0 32 32" width="30" height="30" fill="#fff" aria-hidden="true">
    <path d="M16 3a13 13 0 0 0-11.2 19.6L3 29l6.6-1.7A13 13 0 1 0 16 3zm0 23.7a10.6 10.6 0 0 1-5.4-1.5l-.4-.2-3.9 1 1-3.8-.2-.4A10.7 10.7 0 1 1 16 26.7zm5.9-8c-.3-.2-1.9-.9-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1a8.8 8.8 0 0 1-4.4-3.8c-.3-.6.3-.5 1-1.8a.6.6 0 0 0 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6a1.2 1.2 0 0 0-.9.4 3.7 3.7 0 0 0-1.2 2.8 6.5 6.5 0 0 0 1.4 3.4 14.8 14.8 0 0 0 5.7 5c2.1.9 3 1 4 .8a3.4 3.4 0 0 0 2.3-1.6 2.8 2.8 0 0 0 .2-1.6c-.1-.2-.3-.3-.7-.5z"/>
  </svg>
</a>

<style>
.jw-wa-btn{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  animation:jwWaPulse 2s infinite;
  transition:transform .2s ease;
}
.jw-wa-btn:hover{ transform:scale(1.08); }
@keyframes jwWaPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.6); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:767px){
  .jw-wa-btn{ right:14px; bottom:14px; width:54px; height:54px; }
}
</style>

Step 2: Change the phone number and message

In the first line of the code, find 971500000000 and replace it with your own WhatsApp number:

• Use the full international format with country code – for the UAE start with 971
• Remove the +, spaces and the first 0 of the mobile number. For example, 050 123 4567 becomes 971501234567

To change the ready-made message, edit the text after ?text=. Use %20 instead of spaces, or create the link with any online “URL encoder”.

Step 3: Add the code to your website

Option A: Elementor Pro (all pages)

1. Go to Elementor → Custom Code → Add New
2. Give it a name, for example “WhatsApp Button”
3. Set Location to </body> – End and paste the code
4. Click Publish and choose Entire Site

Option B: Free Elementor (one page)

1. Edit the page with Elementor
2. Drag an HTML widget anywhere on the page
3. Paste the code and click Update

Because the button uses position:fixed, it will float in the corner no matter where you place the widget. To show it on every page, add the HTML widget to your footer template.

Option C: Any WordPress theme

Install a code snippets plugin that can add code to the site footer, create a new HTML snippet, paste the code and set it to load in the footer on the whole site.

Step 4: Test it

Open your website on your phone, tap the green button and check that WhatsApp opens with your number and message. Then test on a computer – it should open WhatsApp Web or the desktop app.

Common problems

• The button does not appear: clear your cache plugin (for example LiteSpeed Cache) and refresh.
• Wrong number opens: check that the number has the country code and no +, spaces or leading 0.
• The button covers another chat icon: change bottom:20px to a bigger value, such as bottom:90px.

Need help?

Every website we build includes a WhatsApp button, contact form and Google Maps. If you want us to add it for you, or need a new website, message us on WhatsApp at +971 58 156 5050 or see our services.