How To Add A WhatsApp Floating Button To Your HTML Site

Someone lands on your page, likes what they see, and then has to find your email address, switch apps and write a formal-feeling message to a stranger. Most of them just leave instead.

A WhatsApp floating button removes that whole gap. It sits in the corner of every page, and one tap opens a chat with you with the first message already typed.

Search for how to add one and you mostly get plugins: WordPress plugins, Shopify apps, and "free chat widget" services whose script loads their bundle, watches your visitors and shows their branding until you pay.

You need none of it. The whole thing is one link, one inline icon and about thirty lines of CSS. It runs on any static host, including the page an AI just built for you, because there's nothing to run and no third party in the middle.

Below is the finished snippet, the one detail that breaks it for most people, and the corner problem nobody warns you about.

What A WhatsApp Floating Button Actually Is

A WhatsApp floating button is a fixed-position link in the corner of your page that opens a WhatsApp conversation with you when someone taps it. That's the entire mechanism.

It isn't a chat widget. Nothing is embedded and no messages are stored on your site. On a phone the link opens the app; on a laptop it opens WhatsApp Web or the desktop app, and offers the download to anyone with neither. You handle none of those cases yourself.

Because it's only a link, it works anywhere HTML works. No server, no database, no build step, no PHP.

Two limits are worth knowing first. The number must have an active WhatsApp account on it, so a landline or a virtual number that never finished signup will fail. And nothing is recorded on your side: if you want enquiries saved, searchable and emailed to you, that is a job for a contact form and a form service, not a chat link. Plenty of sites sensibly run both.

Get The Phone Number Format Right First

The number in the link must be your full international number as digits only. No plus sign, spaces, dashes or brackets, and no leading zero from your local format.

That last one catches almost everybody. In the UK, Malaysia, Indonesia, India and Nigeria you say your number starting with a zero, and that zero exists only for dialling inside the country. WhatsApp's click to chat help page spells it out as of November 2026: the link is https://wa.me/ plus "a full phone number in international format", and you "omit any zeroes, brackets, or dashes". Its own example of what not to do is wa.me/+001-(XXX)XXXXXXX.

Get it wrong and the failure is loud. WhatsApp opens and tells the visitor the phone number shared via the link is invalid. They won't debug it for you. They'll assume your business is broken and leave.

So test it before anyone else does. Open the finished link on a phone that doesn't have you saved as a contact (click to chat works without a saved contact, by design), and check the chat opens with the message already in the box.

The Copy-Paste Code For A WhatsApp Floating Button

Here is the whole thing. It is self-contained: no image to upload, no script to load, no font to fetch. Paste it just before the closing body tag, change two values, and you are done.

<!-- WhatsApp floating button. Paste this just before </body>. -->
<a id="wa-float"
   href="https://wa.me/6591234567?text=Hi%2C%20I%20found%20you%20on%20your%20website%20and%20I%27d%20like%20to%20ask%20about%20your%20prices."
   target="_blank"
   rel="noopener"
   aria-label="Chat with us on WhatsApp">
  <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"
       aria-hidden="true" focusable="false">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
  </svg>
</a>

<style>
#wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Second declaration wins where env() is supported, and is ignored
     where it is not. Keeps the button off the iPhone home bar. */
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

#wa-float:hover,
#wa-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}

/* Keyboard users need to see where they are. Never delete this. */
#wa-float:focus-visible {
  outline: 3px solid #0a5c36;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  #wa-float {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  #wa-float {
    transition: none;
  }
  #wa-float:hover,
  #wa-float:focus-visible {
    transform: none;
  }
}
</style>

It uses an id rather than a class on purpose: there's only one of these on a page, and the higher specificity makes a stray theme rule less likely to override it.

The Four Things To Change

1. The digits after wa.me/, in the format from the table above.
2. The text after ?text=, URL-encoded. The next section covers that.
3. The corner. Swap right for left if you need the other side, and read the corner section before you decide.
4. The aria-label wording, if "Chat with us on WhatsApp" is not how you refer to yourself.

Leave the sizes alone unless you have a reason: 56px is a comfortable thumb target.

Using The WhatsApp Logo Without Breaking The Rules

The glyph in the snippet above is WhatsApp's trademark. Meta's WhatsApp brand guidelines say to use only the official brand resources, not to modify the logo's colours, and to keep the logo from being the most prominent feature on your page. A small corner button fits that.

If you want to be strictly by the book, WhatsApp also publishes an official "Chat on WhatsApp" button. It comes in green or white, in small, medium and large, and only in English, and the help page says to "use the button as is". Download it from the click to chat page and put the image inside the same link. The icon-in-a-circle version is far more common, but it isn't an official asset.

How To Pre-Fill The Message Without Breaking The Link

Everything after ?text= has to be URL-encoded, because a URL cannot carry raw spaces or punctuation that already means something else in a web address.

This is the most under-used part of a WhatsApp floating button. A blank chat box makes the visitor write an opening sentence, the exact friction you were removing. Give them the first line and they only press send.

Keep it to one sentence, and make it something a real person would send. "Hi, I saw the 2-bedroom listing on your site and would like to view it" starts a useful conversation. "I want to buy now" makes people hesitate.

On a multi-page site, change the text per page, so a tap from your pricing page arrives already saying which plan they were reading about. It costs nothing but a different ?text= value in each file.

What If Something Already Sits In That Corner?

Then a 56px button at bottom: 20px can land right on top of it, so check before you publish. Cookie banners, "back to top" arrows, chat widgets and some hosts' free-plan badges all park in that corner.

Don't try to win with a bigger z-index. Some widgets use the highest stacking value CSS allows and mark it important. Move your button instead. Pick either fix:

/* Option A: keep the corner, sit above whatever is parked there */
#wa-float {
  bottom: 84px;
  bottom: calc(84px + env(safe-area-inset-bottom));
}

/* Option B: move to the opposite corner and forget about it */
#wa-float {
  right: auto;
  left: 20px;
}

Check the live page on a laptop and a phone, because a widget can sit in the corner on one screen and mid-bottom on the other.

A Plain Link Or A Hosted Chat Widget?

Use a WhatsApp floating button when one or two people answer messages, and a hosted widget when a team needs shifts, canned replies and a shared inbox. The choice is about who's answering.

The honest case against the plain link: you can't see who opened it and didn't send, there are no business hours, and every conversation lands next to your family group chats. For a solo business that's fine. For a five-person support desk it isn't.

The Accessibility Details Most Floating Buttons Miss

Four things separate a button everyone can use from one that quietly excludes people. The snippet above handles all four.

• It's a real link, not a styled div. A div with a click handler can't be reached by the Tab key and is announced as nothing by a screen reader. An anchor is focusable and announced for free.
• The tap target is big enough. WCAG 2.2 sets the minimum at 24 by 24 CSS pixels and the enhanced level at 44 by 44 (target size). 56px clears both.
• The icon has a name. An SVG on its own says nothing, so aria-label supplies the name and aria-hidden on the SVG stops it being announced twice.
• Focus is visible and motion is optional. The :focus-visible outline shows keyboard users where they are, and the reduced-motion block drops the hover scale for anyone who asked for less movement.

One honest caveat on colour. White on the WhatsApp green #25d366 measures 1.98:1, under the 3:1 that WCAG asks for meaningful non-text elements. The circle's shadow gives it a clear edge against the page, and the aria-label names it. A darker teal like #128c7e measures 4.1:1 and passes, but it moves away from the brand green Meta asks you not to change, so it's a trade-off you make knowingly.

Then the most commonly missed one: add roughly 90px of bottom padding to your footer, or the button parks on your closing line, often your address or opening hours.

Add A WhatsApp Floating Button In Two Minutes

Here is the whole job on a real site.

1. Open index.html in your host's browser editor, or on your computer.
2. Scroll to the bottom and find the closing body tag.
3. Paste the block from above just before it.
4. Change the number and the ?text= line.
5. Repeat on every other page, including your 404 page, where a lost visitor most wants to ask a question.
6. Publish, then open the live URL on your phone and tap it.

Test on the published address, not in a preview pane. A preview often runs in a sandbox that blocks pop-ups, so a button that looks broken in preview is usually fine live. If the page won't come up at all, that's a different problem.

One trap on the next edit: uploading a folder or a ZIP replaces your whole site, so the copy on your computer needs the button too.

A static page does far more than people expect once you stop hunting for a plugin, and the other copy-paste guides in this series cover a 404 page and more without one.

A WhatsApp button usually means a business site, and the Free plan is for personal, non-commercial use. You can build and test it on a free account first, then pick a paid plan from the pricing page, starting at $5 a month, before you share it.

Let AI Do It For You

Paste this into a code editor's AI assistant, or any agent with access to your files. Replace the two bracketed parts first.

Add a WhatsApp floating button to every page of this site.

Use one <a> element with id="wa-float". No external script, no image
file, no icon font: inline the official WhatsApp SVG glyph, viewBox
"0 0 24 24", fill currentColor.

Link: https://wa.me/[MY NUMBER IN FULL INTERNATIONAL FORMAT, DIGITS ONLY,
NO PLUS SIGN, NO SPACES, NO LEADING ZERO]?text=[MY OPENING MESSAGE,
URL-ENCODED]
Open it with target="_blank" and rel="noopener".

Style it in a <style> block:
- position fixed, bottom right, 20px from each edge, plus a second
  bottom declaration of calc(20px + env(safe-area-inset-bottom))
- 56px circle, background #25d366, white glyph, soft box-shadow
- z-index 9999
- aria-label "Chat with us on WhatsApp" on the link, and aria-hidden
  "true" plus focusable "false" on the SVG
- a visible :focus-visible outline with an outline-offset
- a max-width 600px block that shrinks it to 52px
- a prefers-reduced-motion reduce block that removes the transition
  and the hover scale

If anything else already sits in the bottom-right corner, raise the
button to bottom 84px so the two do not overlap.

Paste it immediately before the closing body tag on every HTML page,
including 404.html, and add 90px of bottom padding to the footer so the
button never covers text. Do not add any third-party script or tracking.