The easiest way to add a free floating WhatsApp button to any website is one block of code that you paste into your site’s footer. Change your number and business name in the settings at the top, save, and a green chat button with a greeting bubble and a gentle pulse animation appears on every page. It works on Squarespace, WordPress, Shopify, Wix, Webflow and plain HTML sites, with no plugin and no monthly fee.
I’m Sukesh Das, a Squarespace Circle Platinum Partner. I have built more than 1,200 websites since 2018 on Squarespace, WordPress and custom code, many of them for coaches, therapists and local businesses whose customers would rather send a WhatsApp message than fill in a form. I wrote this floating WhatsApp button so it works the same way on every platform.
Floating WhatsApp button at a glance
| Platform | Where to paste the code | Plan or access needed |
|---|---|---|
| Squarespace | Code Injection → Footer | Core, Plus or Advanced (or older Business/Commerce) |
| WordPress | WPCode plugin → Footer, or your theme’s footer code area | Any self-hosted site; WordPress.com needs a plugin-enabled plan |
| Shopify | theme.liquid, just before </body> | Any plan |
| Wix | Settings → Custom Code → Body – end | Published site with a connected domain |
| Webflow | Site settings → Custom code → Footer code | A plan that allows custom code |
| Plain HTML | Before </body> on every page, or a shared footer file | None |
What does this free WhatsApp chat widget do?
It is a small, self-contained floating WhatsApp button that behaves like a paid WhatsApp chat widget, without the subscription. Here is what you get out of the box:
- A round WhatsApp button fixed to the bottom corner of every page.
- An attention animation: pulse, bounce, shake or none.
- A greeting bubble with your business name and a friendly message, which visitors can close.
- A pre-filled message, so the chat opens with text already typed.
- Left or right position, custom size, colors and spacing.
- A delay before the button or the bubble appears.
- A mobile only option and a list of pages where the button stays hidden.
- Click tracking in Google Analytics 4, if you use it.
- Respect for the “reduce motion” accessibility setting, so the animation stops for visitors who turn motion off.
The icon is drawn with inline SVG, so there are no images to upload and nothing loads from another server. The whole floating WhatsApp button is a few kilobytes.
How does a WhatsApp click-to-chat link work?
WhatsApp has an official click-to-chat link: https://wa.me/ followed by your full phone number in international format, with digits only. Add ?text= and an encoded message to pre-fill the chat. WhatsApp explains the format in its help article on how to use click to chat.
On a phone the link opens the WhatsApp app straight into a chat with you. On a computer it opens WhatsApp Desktop or WhatsApp Web. Visitors never need to save your number first, which is exactly why a floating WhatsApp button gets more messages than a phone number written in the footer.
Before you start
- Have your number ready in international format. A US number +1 (555) 555-0123 becomes
15555550123. A UK mobile 07700 900123 becomes447700900123: drop the leading zero and add the country code. - Use a WhatsApp number you check every day. A WhatsApp Business number is best, because you can set greeting and away messages inside the app.
- Make sure you can add custom code to your site. The table above shows where each platform keeps its footer code area and what plan it needs.
How do I add a floating WhatsApp button to my website?
Copy the complete code below. It is one block with two parts: a SETTINGS section at the top, which is the only part you edit, and the engine underneath, the SukeshDasWhatsAppButton class, which builds the floating WhatsApp button, adds its styles and animation, opens the greeting bubble and tracks clicks.
- Copy the full code below.
- Change
phoneandnamein the SETTINGS section. - Paste it into your site’s footer code area, just before the closing
</body>tag. The platform steps further down show exactly where that is. - Save or publish, then open your site in a private window to see the button.
<!-- Floating WhatsApp Button & Chat Widget by Sukesh Das, sukeshdas.com -->
<!-- Works on any website: paste this whole block just before the closing </body> tag (or your site's footer code area) -->
<script>
/* ============ SETTINGS: edit these values ============ */
window.SukeshDasWhatsAppSettings = {
phone: "15555550123", // Country code + number, digits only (no +, spaces or dashes)
name: "Your Business", // Shown in the greeting bubble
message: "Hi! I have a question.", // Message that is pre-filled in WhatsApp
greeting: "Hi there! How can we help you today?", // Text in the greeting bubble
buttonColor: "#25D366", // Button background color
iconColor: "#ffffff", // Icon color
position: "right", // "right" or "left"
bottom: 20, // Distance from the bottom of the screen (px)
side: 20, // Distance from the side of the screen (px)
size: 60, // Button size (px)
animation: "pulse", // "pulse", "bounce", "shake" or "none"
showAfter: 0, // Seconds before the button appears (0 = right away)
greetingAfter: 4, // Seconds before the greeting bubble pops up (0 = never)
mobileOnly: false, // true = show on phones only
hideOn: ["/checkout", "/cart"],// Pages where the button is hidden (start of the URL path)
trackClicks: true // Send a GA4 event "whatsapp_click" if Google Analytics is installed
};
/* ============ END OF SETTINGS ============ */
</script>
<script>
/* Floating WhatsApp Button & Chat Widget by Sukesh Das, sukeshdas.com. Please keep this credit. */
(function () {
class SukeshDasWhatsAppButton {
constructor(settings) {
this.s = settings || {};
if (!this.s.phone || this.sukeshShouldHide()) return;
this.sukeshAddStyles();
this.sukeshBuild();
}
sukeshShouldHide() {
var path = window.location.pathname;
var hidden = (this.s.hideOn || []).some(function (p) { return path.indexOf(p) === 0; });
var editor = document.body.classList.contains("sqs-edit-mode"); // Squarespace editor only
var desktop = window.matchMedia("(min-width: 768px)").matches;
return hidden || editor || (this.s.mobileOnly && desktop);
}
sukeshLink() {
var phone = String(this.s.phone).replace(/\D/g, "");
var text = this.s.message ? "?text=" + encodeURIComponent(this.s.message) : "";
return "https://wa.me/" + phone + text;
}
sukeshAddStyles() {
var s = this.s, side = s.position === "left" ? "left" : "right";
var css =
".sdwa-wrap{position:fixed;" + side + ":" + s.side + "px;bottom:" + s.bottom + "px;z-index:9999;display:flex;flex-direction:column;align-items:" + (side === "left" ? "flex-start" : "flex-end") + ";gap:12px;opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease;font-family:inherit}" +
".sdwa-wrap.sdwa-show{opacity:1;transform:none}" +
".sdwa-btn{position:relative;width:" + s.size + "px;height:" + s.size + "px;border-radius:50%;background:" + s.buttonColor + ";display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s ease}" +
".sdwa-btn:hover{transform:scale(1.08);animation-play-state:paused}" +
".sdwa-btn svg{width:55%;height:55%;fill:" + s.iconColor + "}" +
".sdwa-anim-pulse .sdwa-btn::before,.sdwa-anim-pulse .sdwa-btn::after{content:'';position:absolute;inset:0;border-radius:50%;background:" + s.buttonColor + ";z-index:-1;animation:sdwaPulse 2.4s ease-out infinite}" +
".sdwa-anim-pulse .sdwa-btn::after{animation-delay:1.2s}" +
".sdwa-anim-bounce .sdwa-btn{animation:sdwaBounce 4s ease-in-out infinite}" +
".sdwa-anim-shake .sdwa-btn{animation:sdwaShake 5s ease-in-out infinite}" +
"@keyframes sdwaPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}" +
"@keyframes sdwaBounce{0%,20%,50%,80%,100%{transform:translateY(0)}10%{transform:translateY(-14px)}30%{transform:translateY(-7px)}}" +
"@keyframes sdwaShake{0%,8%,100%{transform:rotate(0)}2%,6%{transform:rotate(-12deg)}4%{transform:rotate(12deg)}}" +
".sdwa-bubble{position:relative;max-width:260px;background:#fff;color:#111;border-radius:14px;padding:14px 34px 14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:14px;line-height:1.45;display:none}" +
".sdwa-bubble.sdwa-open{display:block;animation:sdwaPop .35s ease}" +
".sdwa-bubble strong{display:block;margin-bottom:4px;font-size:14px}" +
".sdwa-close{position:absolute;top:6px;right:8px;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:#666;padding:4px}" +
"@keyframes sdwaPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}" +
"@media (prefers-reduced-motion:reduce){.sdwa-wrap,.sdwa-wrap *,.sdwa-wrap *::before,.sdwa-wrap *::after{transition:none!important;animation:none!important}}";
var style = document.createElement("style");
style.id = "sdwa-styles";
style.textContent = css;
document.head.appendChild(style);
}
sukeshBuild() {
var s = this.s, self = this;
var wrap = document.createElement("div");
wrap.className = "sdwa-wrap" + (s.animation && s.animation !== "none" ? " sdwa-anim-" + s.animation : "");
if (s.greetingAfter > 0 && s.greeting) {
var bubble = document.createElement("div");
bubble.className = "sdwa-bubble";
bubble.setAttribute("role", "status");
var title = document.createElement("strong");
title.textContent = s.name || "";
var text = document.createElement("span");
text.textContent = s.greeting;
var close = document.createElement("button");
close.className = "sdwa-close";
close.setAttribute("aria-label", "Close message");
close.textContent = "\u00d7";
close.addEventListener("click", function () { bubble.classList.remove("sdwa-open"); });
bubble.appendChild(close);
bubble.appendChild(title);
bubble.appendChild(text);
wrap.appendChild(bubble);
setTimeout(function () { bubble.classList.add("sdwa-open"); }, (s.showAfter + s.greetingAfter) * 1000);
}
var btn = document.createElement("a");
btn.className = "sdwa-btn";
btn.href = this.sukeshLink();
btn.target = "_blank";
btn.rel = "noopener";
btn.setAttribute("aria-label", "Chat with " + (s.name || "us") + " on WhatsApp");
btn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-5.6c-.2-.1-1.4-.7-1.7-.8s-.4-.1-.5.1-.6.8-.8.9-.3.1-.5 0a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3 2.8 2.8 0 0 0-.9 2.1 4.9 4.9 0 0 0 1 2.6 11.2 11.2 0 0 0 4.3 3.8c1.6.7 2.2.7 3 .6a2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .2-1.2c-.1-.1-.3-.2-.5-.3z"/></svg>';
btn.addEventListener("click", function () { self.sukeshTrack(); });
wrap.appendChild(btn);
document.body.appendChild(wrap);
setTimeout(function () { wrap.classList.add("sdwa-show"); }, s.showAfter * 1000 + 50);
}
sukeshTrack() {
if (this.s.trackClicks && typeof window.gtag === "function") {
window.gtag("event", "whatsapp_click", { page_path: window.location.pathname });
}
}
}
function sukeshDasStartWhatsApp() {
new SukeshDasWhatsAppButton(window.SukeshDasWhatsAppSettings);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", sukeshDasStartWhatsApp);
} else {
sukeshDasStartWhatsApp();
}
})();
</script>That is the whole floating WhatsApp button. You do not need jQuery, an account with a widget company or any other file.
How do I customize the floating WhatsApp button?
Every option lives in the SETTINGS section. Change a value, save, and refresh your site. Keep the quotes around text values and the comma at the end of each line.
| Setting | What it does | Example |
|---|---|---|
phone | Your WhatsApp number with country code, digits only | 447700900123 |
name | Business name shown in bold in the greeting bubble | Bloom Studio |
message | Text already typed when the chat opens. Write it normally | Hi, I want a quote |
greeting | Friendly line in the bubble above the button | Questions? Message us |
buttonColor | Button color (any hex color) | #25D366 |
iconColor | Icon color | #ffffff |
position | Which corner the button sits in | "right" or "left" |
bottom / side | Distance from the screen edges in pixels | 20 |
size | Button size in pixels | 56 |
animation | Attention effect | "pulse", "bounce", "shake", "none" |
showAfter | Seconds before the button appears | 3 |
greetingAfter | Seconds before the bubble pops up. 0 turns it off | 5 |
mobileOnly | Show the button on phones only | true |
hideOn | Pages where the button stays hidden | ["/checkout", "/cart"] |
trackClicks | Send a whatsapp_click event to GA4 | true |
Choose an animation for the floating WhatsApp button
Set animation to one of four values. pulse sends soft rings out from the button, the classic “live chat” look. bounce hops the button every few seconds. shake gives it a short wiggle every five seconds, like a phone buzzing. none keeps it still.
All three animations pause when someone hovers over the button and switch off completely for visitors who have “reduce motion” turned on in their device settings. That keeps your floating WhatsApp button friendly for people who are sensitive to movement, which MDN explains in its guide to prefers-reduced-motion.
Change the number and the pre-filled message
Type the message normally, for example Hi, I found you on your website and want a quote. The code encodes spaces and symbols for you. A message that mentions your website also tells you where the lead came from.
Move the button, resize it and match your brand
Set position: "left" if a cookie banner, cart or back to top button already sits in the bottom right corner. Two floating things in one corner look messy and block each other on phones. WhatsApp green is the color people recognise instantly, so I usually keep it, but buttonColor takes any hex color.
Show it on phones only, or after a delay
Set mobileOnly: true to hide the button on screens 768px and wider. Phone visitors already hold the device WhatsApp lives on, so many of my clients only show the floating WhatsApp button there. showAfter: 3 lets visitors read your page for three seconds before the button slides in.
Hide the button on certain pages
Add page paths to hideOn. The code checks whether the address starts with each path, so "/shop" also hides it on every product page inside /shop/. Checkout, cart, thank you and legal pages are good candidates.
How do I add the WhatsApp chat widget on each platform?
The floating WhatsApp button works anywhere you can add code before the closing body tag. These are the exact places on the most popular platforms.
Squarespace
- Open
Website → Pages, scroll toCustom Codeand chooseCode Injection. - Paste the full code into the Footer box and click Save.
- To show it on one page only, paste it into that page’s
Page Settings → Advanced → Page Header Code Injectioninstead.
Code Injection needs a Core, Plus or Advanced plan, or one of the older Business and Commerce plans. The code also hides itself while you are editing in Squarespace, so it never covers the editing tools. More Squarespace fixes live in my guide to Squarespace mobile issues.
WordPress
- Install the free WPCode plugin (Insert Headers and Footers) from
Plugins → Add New. - Go to
Code Snippets → Header & Footer. - Paste the full code into the Footer box and save.
WPCode is free on the WordPress plugin directory. If you use Elementor Pro, you can paste it under Elementor → Custom Code with the location set to </body> - End. On Divi, use Divi → Theme Options → Integration → Add code to the <body>. Avoid pasting it into your theme’s footer.php directly, because a theme update will wipe it.
Shopify
- Go to
Online Store → Themes, click the three dots on your live theme and choose Edit code. - Open
layout/theme.liquid. - Paste the full code just above the closing
</body>tag and click Save.
Duplicate your theme first so you have a backup. Add "/cart" and "/checkouts" to hideOn if you do not want the button near checkout.
Wix
- Open your site dashboard and go to
Settings → Custom Code. - Click + Add Custom Code and paste the full code.
- Choose All pages, load it on each new page, and set the placement to Body – end. Then apply.
Wix only runs custom code on a published site that is connected to a domain, as its custom code help article explains.
Webflow
- Open
Site settings → Custom code. - Paste the full code into Footer code.
- Save, then publish your site. Custom code only runs on the published site, not inside the Designer.
Plain HTML and other builders
On a hand-coded site, paste the code just before </body> on every page, or in a shared footer include if you have one. Most other builders, including GoDaddy, Framer, Carrd and Duda, have a “custom code”, “footer code” or “embed code” setting that does the same job. Use the site-wide footer option so the floating WhatsApp button appears on every page.
Can I add a WhatsApp button without code?
Yes, if you only need a regular button inside a page. Add a normal button in your builder and link it to https://wa.me/yournumber?text=Hi%20there, with “open in new tab” turned on. That works on every platform and every plan. It just does not float, animate or show a greeting, which is what the code above adds.
How do I track WhatsApp button clicks in Google Analytics?
With trackClicks: true, every tap sends a GA4 event called whatsapp_click, as long as the Google tag (gtag.js) is on your site. Test it in Reports → Realtime, then mark it as a key event so WhatsApp chats count as leads. Google describes the event model in its guide to GA4 events. If you use Google Tag Manager instead, swap the gtag line for a dataLayer.push({ event: "whatsapp_click" }) and build a trigger for it.
Tracking matters because WhatsApp chats never pass through your website forms. Without this event you cannot see how many leads your floating WhatsApp button brings in.
Free floating WhatsApp button or a paid WhatsApp chat widget?
Paid WhatsApp chat widget tools such as Elfsight, Common Ninja and similar services add things that take more than a few lines of code: several agents with their own numbers, business hours, multi-channel chat with Messenger and email, and a visual editor.
If you have one number and want a clean, fast floating WhatsApp button, the free code in this guide does the job and loads nothing from outside your site. If you run a team inbox or need opening hours, a paid widget, or a custom build, is worth it.
Why is my floating WhatsApp button not showing?
- Nothing appears. Check that you pasted the full block, including both
<script>tags, into the footer area, and thatphoneis filled in. Also check you are not on a page listed inhideOn. - “Phone number shared via url is invalid”. The number format is wrong. Use digits only with the country code, no plus sign and no leading zero.
- It shows on your phone but not your computer.
mobileOnlyis set totrue. - It covers your cookie banner or cart. Set
position: "left"or raise thebottomvalue. - The animation is not moving. Your device probably has “reduce motion” turned on, which the code respects on purpose.
- You made changes but nothing updated. Clear your site or browser cache and try a private window.
On Squarespace, if other custom code stopped working after an update, see my guide on why Squarespace code stops working.
Need a WhatsApp chat widget with more features?
The free floating WhatsApp button covers most sites. Some businesses want more, like the chat-style widget below with a profile photo, an online status, a welcome message and quick reply buttons such as “Book a call” or “Pricing”.
I build custom versions with your photo or logo, brand colors, business hours, several team members or departments, and quick replies that send a ready-made message. It runs from your own site with no monthly widget fee, on Squarespace, WordPress or any other platform.
Want one like this? Send me a short brief and tell me which features you need.
Floating WhatsApp button FAQs
Is this floating WhatsApp button free?
Yes. The code is free and uses the official wa.me click-to-chat link. You only need access to your site’s footer code area, which some platforms include only on certain plans.
Does the floating WhatsApp button work on any website?
Yes. It is plain HTML, CSS and JavaScript with no dependencies, so it works on Squarespace, WordPress, Shopify, Wix, Webflow, plain HTML sites and most other builders that let you add footer code.
What is the difference between a WhatsApp button and a WhatsApp chat widget?
A WhatsApp button is a link that opens a chat. A WhatsApp chat widget usually adds a popup with a greeting, photo or quick replies. This code sits in between: a floating button with an animated greeting bubble.
How do I add an animation to the WhatsApp button?
Set animation to “pulse”, “bounce” or “shake” in the settings. The animation pauses on hover and switches off for visitors who turn on reduce motion.
What number format does a wa.me link need?
Your full international number with digits only. Include the country code and remove the plus sign, spaces, dashes and any leading zero, for example 15555550123.
Can I show the WhatsApp button only on mobile?
Yes. Set mobileOnly to true and the button hides on screens 768px and wider.
Will a floating WhatsApp button slow down my site?
No. It is a few kilobytes with an inline SVG icon and no external files, so it is far lighter than most paid chat widgets.
Can I track WhatsApp clicks in Google Analytics?
Yes. With trackClicks set to true, the code sends a whatsapp_click event to GA4 whenever the Google tag is on your site.
Does it work with WhatsApp Business?
Yes. The wa.me link works with both WhatsApp and WhatsApp Business numbers.
Want me to add it to your site?
If you would rather not touch code, I can add the floating WhatsApp button to your site, match it to your brand and test it on real phones. I build and support Squarespace and WordPress sites every week as a Squarespace web designer. Send me a short brief and I will reply within one working day.
Related guides: free countdown timer, age verification popup and schema markup.
