How to Add a WhatsApp Floating Button to Your Website (2026)

Why add a WhatsApp button to your website?

Add one when visitors are more likely to ask a quick question than fill out a form. WhatsApp is especially useful for local services, restaurants, clinics, real estate, coaching, repair businesses, and ecommerce stores where pre-sale questions block the purchase.

WhatsApp says its business products help companies communicate on a platform with more than 2 billion users around the world. That does not mean every audience prefers WhatsApp, but it does mean the behavior is familiar in many markets.

What is the official WhatsApp link format?

Use WhatsApp's click-to-chat link format. The official WhatsApp link documentation explains that links can open a chat with a phone number.

The simple format is:

https://wa.me/YOURNUMBER

Use the full phone number in international format. Remove plus signs, spaces, brackets, and dashes.

https://wa.me/14155551234
https://wa.me/447911123456
https://wa.me/4915112345678

How do you add a pre-filled WhatsApp message?

Add a text parameter to the end of the link. Keep the message short and specific so the visitor can send it without editing much.

Example:

https://wa.me/14155551234?text=Hi%2C%20I%20have%20a%20question%20about%20your%20services

What should the WhatsApp button say?

Use a label that makes the channel and action obvious. "Chat on WhatsApp" is clearer than "Message Us" if the visitor wants to know which app will open.

Good labels:

Chat on WhatsApp
WhatsApp Us
Ask on WhatsApp
Get a Quote on WhatsApp
Message Us

If the button is icon-only, add an accessible label in the HTML so assistive technology can identify it as a WhatsApp chat action.

What color and icon should you use?

Use WhatsApp green when brand recognition matters, but still check contrast. The WCAG contrast minimum requires normal text to meet a 4.5:1 contrast ratio against its background.

For an icon, use an official-looking chat or WhatsApp mark only if you have the right asset and follow brand rules. A text label plus a simple chat icon is usually enough.

Where should the WhatsApp button appear?

Bottom-right is the standard placement for chat-style widgets. On mobile, keep the button far enough from the screen edge and above browser UI. If you already have live chat, cookie consent, or an accessibility widget, do not stack all of them in the same corner.

A WhatsApp button should feel available, not unavoidable. If it covers pricing, checkout buttons, form fields, or navigation, move it or hide it on those screens.

Which website platforms support a WhatsApp floating button?

Any platform that lets you paste custom HTML and CSS can support one. The exact paste location changes by platform.

Where to place WhatsApp floating button code

Platform	Typical placement	Note
WordPress	Child theme footer or WPCode footer snippet	Use a child theme if editing theme files
Shopify	theme.liquid before closing body tag	Test after theme updates
Webflow	Project settings footer code or page embed	Publish after adding custom code
Squarespace	Settings > Advanced > Code Injection	Use the footer/code injection area if it is available on your plan
Wix	Custom code at body end	Check mobile layout separately
Custom HTML	Before closing body tag	Keep CSS with the snippet or in your stylesheet

Do you need WhatsApp Business?

No. A regular WhatsApp number can work with a wa.me link. WhatsApp Business is better when you want a business profile, business tools, and a more professional inbox experience.

WhatsApp's Business help page describes WhatsApp Business as a product for business communication. For most service businesses, it is worth setting up because customers see a business identity rather than a personal account.

How do you create the floating button code?

Open CTA Button Generator, set the link to your wa.me URL, choose a WhatsApp-style color, select bottom-right or bottom-center, and export the HTML and CSS. Paste the snippet into your website's footer area.

Minimal example:

<a class="whatsapp-floating" href="https://wa.me/14155551234?text=Hi%2C%20I%20have%20a%20question" aria-label="Chat on WhatsApp">
  Chat on WhatsApp
</a>

<style>
  .whatsapp-floating {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    min-height: 48px;
    padding: 14px 22px;
    border-radius: 999px;
    background: #25d366;
    color: #111;
    font: 700 16px/1.2 system-ui, sans-serif;
    text-decoration: none;
  }
</style>

How should you test it?

Test the button on a phone first. Tap it from Safari or Chrome, confirm it opens WhatsApp or WhatsApp Web correctly, and check that the pre-filled message appears as expected.

Then test desktop, private browsing, and a device that does not have the WhatsApp app installed. Finally, check your mobile pages for overlap with cookie banners, sticky footers, cart bars, and live chat widgets.

Ready to build your button?

Design it visually, export clean code, and paste it into your site.

Open the Generator

Frequently Asked Questions

Do I need WhatsApp Business for a website chat button?

No. A normal WhatsApp number can use a wa.me link. WhatsApp Business is better if you want a business profile and business messaging tools.

Can visitors message me from desktop?

Yes. Desktop visitors are usually routed to WhatsApp Web or the desktop app, depending on their setup.

Does the WhatsApp button work internationally?

Yes, if you use the full international phone number format in the link and remove symbols such as +, spaces, and brackets.

Sources and contextual notes

CSS fixed positioning: MDN explains that fixed-position elements are positioned relative to the viewport, which is the CSS behavior behind floating CTA buttons.
scroll attention research: Nielsen Norman Group found that users still spend disproportionate viewing time near the top of pages, which supports keeping important actions easy to reach.
Fitts's Law in UX: NN/g summarizes the UX principle that larger, closer targets are faster to acquire, which supports larger, consistently placed CTA controls.
WCAG target size guidance: WCAG 2.5.5 Target Size (Enhanced) recommends custom pointer targets of at least 44 by 44 CSS pixels, with listed exceptions.
WCAG contrast minimum: WCAG 1.4.3 requires a 4.5:1 contrast ratio for normal text, with a 3:1 threshold for large text.
Google Web Vitals: Google's Web Vitals documentation identifies loading, interactivity, and visual stability as user-experience metrics site owners should monitor.
Interaction to Next Paint: web.dev describes INP as a Core Web Vital that measures page responsiveness to user interactions.
optimize poor INP caused by JavaScript: web.dev's INP optimization guide covers JavaScript, long tasks, input delay, and main-thread work as causes of poor responsiveness.
WhatsApp link documentation: Official WhatsApp Help Center page used for click-to-chat link behavior.
WhatsApp Business: Official WhatsApp Business page used for the global user-count and business-product context.
WhatsApp Business help page: Official WhatsApp Help Center page used for WhatsApp Business context.