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 a row of "free chat widget" services that want a script tag which 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 is nothing to run: no install, nothing phoning home, 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

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

It is not 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 is only a link, it works anywhere HTML works. No server, no database, no build step, no PHP. That is worth saying out loud, because plenty of "add live chat to your site" advice assumes a backend you do not have and do not need.

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, 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 written as digits only. No plus sign, no spaces, no dashes, no brackets, and no leading zero from your local dialling 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. It has no place in the link. WhatsApp's own instructions agree: full international format, no zeroes, brackets or dashes (how to use click to chat).

Get it wrong and the failure is loud. The visitor taps, WhatsApp opens, and they are told the phone number shared via the link is invalid. They will not debug it for you. They will assume your business is broken and leave.

So test it before anyone else does. Open the finished link on a phone that does not have you saved as a contact, and check the chat opens with your name at the top and 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 is only ever 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 badge 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.

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 compose an opening sentence, which is the exact friction you were removing. Give them the first line and they only have to 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. That one detail turns a vague enquiry into an answerable question, and it costs nothing but a different ?text= value in each file.

Will A WhatsApp Floating Button Cover The Powered By OxyPages Badge?

On desktop, yes, if you leave it in the bottom-right corner. Check this on any host, because that corner is crowded property.

Free OxyPages sites carry a small "Powered By" pill in exactly that spot. On a laptop it sits 16px from the right edge and 16px from the bottom and stands 36px tall, so it occupies the first 52px above the bottom edge. A 56px button at bottom: 20px lands right on it. On phones the pill moves to the centre of the bottom edge, so a corner button clears it, though only just on a narrow screen.

Do not try to win with a bigger z-index. The pill sets its stacking to the highest value CSS allows and marks it important, so nothing you write goes over it. Move your button instead. Two one-line fixes, pick either:

/* 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;
}

Any paid plan removes the pill, so this applies only on the free tier. Cookie banners, "back to top" arrows and hosted chat widgets all colonise that same corner, so keep the habit of checking wherever you host.

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 is answering, not about what is technically better.

The honest case against the plain link: you cannot see who opened it and did not send, there are no business hours, and every conversation lands in the same app as your family group chats. For a solo business that is fine and often better. For a five-person support desk it is not.

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 is a real link, not a styled div. Widgets built from a div with a click handler cannot be reached by the Tab key and are 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 their device for less movement.

One honest caveat on colour. White on the WhatsApp green #25d366 measures about 2: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, which covers the component boundary, but if you need the glyph itself to pass, swap the background for the darker WhatsApp teal #128c7e and it measures about 4:1.

Then the most commonly missed one: add roughly 90px of bottom padding to your footer, or the button parks permanently on your closing line of text, which on a short page is 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 runs your page in a sandbox that does not allow pop-ups, and opening WhatsApp is a pop-up, so a button that looks broken in preview is usually fine live. If the page will not come up at all, that is 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, or you will quietly undo it.

A static page does far more than people expect once you stop hunting for a plugin, and the rest of what a static site can carry is worth reading before you go shopping for one.

Let AI Do It For You

Paste this into a code editor's AI assistant, or any agent with access to your files, and it will build the whole thing. 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 this site shows a badge or pill 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.