A floating "Chat on WhatsApp" button turns website visitors into conversations. The good news: you can add one to almost any site without writing real code. Here are three approaches, from the absolute simplest to a lightweight copy-paste snippet.
First: get your WhatsApp link ready
Every method below needs a wa.me link. If you don't have one yet, create your free WhatsApp link — enter your country, number, and a pre-filled message like "Hi! I'm on your website and have a question." Copy the finished URL; you'll paste it into whichever method you choose.
Method 1: A simple link button (truest no-code)
If your site builder lets you add a button or link (they all do), you don't need a widget at all:
- Add a button element anywhere — header, footer, or a sticky bar.
- Set its link/URL to your
wa.melink. - Set it to open in a new tab.
- Label it "Chat on WhatsApp" and, if you can, add the green WhatsApp icon.
This works on Wix, Squarespace, Webflow, WordPress, Shopify, Carrd — anything. It's not a floating bubble, but it's zero-risk and takes 60 seconds.
Method 2: A no-code widget service
Services like WATI, Chaty, Chaport, or Tidio give you a hosted floating bubble you enable from a dashboard:
- Sign up and enter your WhatsApp number and pre-filled message.
- Customize the bubble color, position, and greeting.
- Copy the one-line
<script>they give you. - Paste it into your site's "custom code / footer" area (every builder has one).
Pros: a polished, animated bubble with greeting text and hours. Cons: it's a third-party dependency, may load extra JavaScript, and some tiers cost money. For most small sites, the free tier is plenty.
Method 3: A copy-paste floating button (no service, no plugin)
Want a floating button without signing up for anything? Paste this into your site's custom HTML/footer area and change the number:
<a href="https://wa.me/15551234567?text=Hi!%20I%20have%20a%20question."
target="_blank" rel="noopener"
style="position:fixed;bottom:20px;right:20px;z-index:9999;
background:#25D366;color:#fff;padding:14px 18px;border-radius:50px;
font-family:sans-serif;text-decoration:none;
box-shadow:0 4px 12px rgba(0,0,0,.15);">
💬 Chat on WhatsApp
</a>
This is a plain link styled to float in the bottom-right corner. No JavaScript, nothing to break, no monthly fee. Swap 15551234567 for your number and adjust the message.
Where to place the button
- Bottom-right corner is the universal convention — users expect chat there.
- Sticky footer bar on mobile works well for stores.
- Inside the contact section as a big primary button.
Avoid covering important content or stacking it on top of a cookie banner.
Design tips that increase clicks
- Use the official green (
#25D366) and the WhatsApp icon so it's instantly recognizable. - Keep the label action-oriented: "Chat with us" or "Chat on WhatsApp" beats "Contact."
- Add a subtle greeting bubble ("Questions? Message us!") that appears after a few seconds — most widget services do this automatically.
- Show business hours if you can't reply instantly, so expectations are set.
Always pre-fill a message
Whatever method you choose, include a ?text= pre-filled message. An empty chat makes visitors hesitate; a ready first line ("Hi! I'm on your website…") gets them talking. Learn more in how to add a pre-filled message.
Test on real devices
Before you call it done:
- On a phone: tap the button — WhatsApp app should open with your message ready.
- On desktop: it should open WhatsApp Web (users need to be logged in).
- Check placement on both mobile and desktop; a button that's perfect on desktop can cover your menu on mobile.
Business vs personal number
Point the button at a WhatsApp Business number, not your personal one. Business gives you a professional profile, a greeting message, and quick replies — all valuable once website chats start rolling in. See WhatsApp Business vs personal.
Recap
The fastest path: create your free WhatsApp link, then either add it as a normal button (Method 1) or paste the floating-button snippet (Method 3). No plugins, no code beyond copy-paste, and no monthly fee.