---
title: Floating WhatsApp Button: Free Chat Widget Code (Easy, 6 Sites)
url: https://sukeshdas.com/free-floating-whatsapp-button/
description: Free floating WhatsApp button and chat widget code for any website. One copy-paste block with pulse animation, greeting bubble and settings. Works on WordPress, Shopify, Wix.
---

[Home](https://sukeshdas.com/)[Blog](https://sukeshdas.com/blog/)[Lead Generation](https://sukeshdas.com/category/lead-generation/)

# Floating WhatsApp Button: Free Chat Widget Code for Any Website (6 Platforms)

By Sukesh Das October 3, 2026 15 min read

![Free floating WhatsApp button and chat widget code for any website](https://sukeshdas.com/wp-content/uploads/2026/10/free-floating-whatsapp-button-1024x576.webp)

On this page

1. Floating WhatsApp button at a glance
2. What does this free WhatsApp chat widget do?
3. How does a WhatsApp click-to-chat link work?
4. Before you start
5. How do I add a floating WhatsApp button to my website?
6. How do I customize the floating WhatsApp button?
7. How do I add the WhatsApp chat widget on each platform?
8. Can I add a WhatsApp button without code?
9. How do I track WhatsApp button clicks in Google Analytics?
10. Free floating WhatsApp button or a paid WhatsApp chat widget?
11. Why is my floating WhatsApp button not showing?
12. Need a WhatsApp chat widget with more features?
13. Floating WhatsApp button FAQs
14. Want me to add it to your site?

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](https://faq.whatsapp.com/5913398998672934).

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 becomes `447700900123`: 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.

1. Copy the full code below.
2. Change `phone` and `name` in the SETTINGS section.
3. 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.
4. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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

1. Open `Website → Pages`, scroll to `Custom Code` and choose `Code Injection`.
2. Paste the full code into the **Footer**  box and click **Save** .
3. To show it on one page only, paste it into that page’s `Page Settings → Advanced → Page Header Code Injection` instead.

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](https://sukeshdas.com/fix-squarespace-mobile-issues/).

### WordPress

1. Install the free **WPCode**  plugin (Insert Headers and Footers) from `Plugins → Add New`.
2. Go to `Code Snippets → Header & Footer`.
3. Paste the full code into the **Footer**  box and save.

WPCode is free on the [WordPress plugin directory](https://wordpress.org/plugins/insert-headers-and-footers/). 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

1. Go to `Online Store → Themes`, click the three dots on your live theme and choose **Edit code** .
2. Open `layout/theme.liquid`.
3. 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

1. Open your site dashboard and go to `Settings → Custom Code`.
2. Click **+ Add Custom Code**  and paste the full code.
3. 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](https://support.wix.com/en/article/embedding-custom-code-on-your-site) explains.

### Webflow

1. Open `Site settings → Custom code`.
2. Paste the full code into **Footer code** .
3. 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](https://developers.google.com/analytics/devguides/collection/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 that `phone` is filled in. Also check you are not on a page listed in `hideOn`.
- **“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.**  `mobileOnly` is set to `true`.
- **It covers your cookie banner or cart.**  Set `position: "left"` or raise the `bottom` value.
- **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](https://sukeshdas.com/squarespace-code-stopped-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”.

![Custom floating WhatsApp button and chat widget with profile photo, online status and quick replies](https://sukeshdas.com/wp-content/uploads/2026/10/custom-whatsapp-chat-widget-squarespace.webp)
A custom WhatsApp chat widget I build for client sites.

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](https://sukeshdas.com/contact-us/?service=squarespace#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](https://sukeshdas.com/services/squarespace-web-designer/). [Send me a short brief](https://sukeshdas.com/contact-us/?service=squarespace#brief) and I will reply within one working day.

Related guides: [free countdown timer](https://sukeshdas.com/squarespace-countdown-timer/), [age verification popup](https://sukeshdas.com/how-to-add-an-age-verification-popup-to-your-squarespace-website-no-plugins-needed/) and [schema markup](https://sukeshdas.com/squarespace-schema-markup/).

Related service

[Analytics and conversion tracking](https://sukeshdas.com/services/analytics-conversion-tracking/)

GA4, Tag Manager, Clarity and ad pixels set up around leads and sales, so you can see which pages, ads and channels bring in clients.

[See the service](https://sukeshdas.com/services/analytics-conversion-tracking/)

Share this article

- [floating WhatsApp button](https://sukeshdas.com/tag/floating-whatsapp-button/)
- [Lead generation](https://sukeshdas.com/tag/lead-generation/)
- [Squarespace WhatsApp](https://sukeshdas.com/tag/squarespace-whatsapp/)
- [WhatsApp button for website](https://sukeshdas.com/tag/whatsapp-button-for-website/)
- [WhatsApp chat widget](https://sukeshdas.com/tag/whatsapp-chat-widget/)
- [WordPress WhatsApp button](https://sukeshdas.com/tag/wordpress-whatsapp-button/)

![Sukesh Das](https://sukeshdas.com/wp-content/uploads/2026/09/profile-Sukesh-Das-150x150.webp)

Written by Sukesh Das

Web designer and developer with 1,200+ sites built. If this article describes your problem, I can fix it for you.

 [Ask me about your site](https://sukeshdas.com/contact-us/)

## Start the discussion [Cancel reply](/free-floating-whatsapp-button/?format=md#respond)

On this page

15 min read

1. Floating WhatsApp button at a glance
2. What does this free WhatsApp chat widget do?
3. How does a WhatsApp click-to-chat link work?
4. Before you start
5. How do I add a floating WhatsApp button to my website?
6. How do I customize the floating WhatsApp button?
7. How do I add the WhatsApp chat widget on each platform?
8. Can I add a WhatsApp button without code?
9. How do I track WhatsApp button clicks in Google Analytics?
10. Free floating WhatsApp button or a paid WhatsApp chat widget?
11. Why is my floating WhatsApp button not showing?
12. Need a WhatsApp chat widget with more features?
13. Floating WhatsApp button FAQs
14. Want me to add it to your site?

Browse topics Lead Generation

- [Squarespace7](https://sukeshdas.com/category/squarespace/)
- [Tutorial4](https://sukeshdas.com/category/tutorial/)
- [Wordpress2](https://sukeshdas.com/category/wordpress/)
- [Lead Generation2](https://sukeshdas.com/category/lead-generation/)
- [Website & Conversion8](https://sukeshdas.com/category/website-conversion/)
- [Divi2](https://sukeshdas.com/category/tips-tricks/divi/)
- [SEO & Local SEO2](https://sukeshdas.com/category/seo-local-seo/)
- [Elementor1](https://sukeshdas.com/category/tips-tricks/elementor/)
- [AI Search1](https://sukeshdas.com/category/ai-search/)
- [All articles](https://sukeshdas.com/blog/)

Want this handled for you?

Send a short brief and get a fixed quote.

 [Get a free quote](https://sukeshdas.com/contact-us/)

Keep reading

## More from the *blog.*

[All articles](https://sukeshdas.com/blog/)

Tips & Tricks Oct 4, 2026

### [How to Find Out What a Website Is Built With (Free Chrome Extension)](https://sukeshdas.com/what-is-this-website-built-with/)

I built Undersite to replace the pile of extensions and lookup sites I used to check…

11 min read

SEO & Local SEO Oct 3, 2026

### [Squarespace Schema Markup: 5 Proven JSON-LD Templates (Free)](https://sukeshdas.com/squarespace-schema-markup/)

Learn what Squarespace schema markup the platform adds on its own and how to add the…

13 min read

AI Search Oct 3, 2026

### [Squarespace AI SEO: 10 Proven Ways to Get Cited by ChatGPT, Perplexity and Google AI Overviews](https://sukeshdas.com/squarespace-ai-seo/)

Squarespace AI SEO explained by a Squarespace Circle Platinum Partner: how ChatGPT, Perplexity and Google AI…

13 min read


<!-- Page uncached by LiteSpeed Cache 7.9.1 on 2026-10-05 08:29:52 -->