A WhatsApp button on your website removes the slowest step between a visitor and a conversation: finding your number, saving it, and typing a first message. One tap and WhatsApp opens with your chat ready to go. The good news is that you don’t need a plugin, a subscription or any JavaScript to do it, a WhatsApp button is just a normal link dressed up with a bit of styling. This guide shows the plain-HTML version first, then the fastest route on WordPress, Shopify and the big site builders.
Step 1: get your click-to-chat link
Every WhatsApp button, on every platform, points at the same thing: a wa.me click-to-chat link. It contains your phone number and, optionally, a pre-filled message. The format looks like this:
https://wa.me/15551234567?text=Hi%21%20I%20have%20a%20question%20about%20your%20services
The number must be in full international format, digits only, country code first, no plus sign, spaces or dashes, and the message must be URL-encoded. The easiest way to get both right is the free WhatsApp Link Generator: type your message, watch the live preview, and copy the finished link. For the full syntax, see our complete wa.me guide.
Plain HTML: a button you can paste into any site
At its simplest, the button is an anchor tag with your link. This works in any HTML page, static site generator, or “custom HTML” box in a website builder:
<a href="https://wa.me/15551234567?text=Hi%21" target="_blank" rel="noopener">Chat with us on WhatsApp</a>
To make it look like a proper WhatsApp button rather than a text link, add inline styles, WhatsApp green (#25D366), white text, rounded corners and some padding:
<a href="https://wa.me/15551234567?text=Hi%21" target="_blank" rel="noopener" style="display:inline-block;background:#25D366;color:#fff;padding:12px 24px;border-radius:50px;font-weight:600;text-decoration:none;">💬 Chat on WhatsApp</a>
For the popular floating “bubble” in the bottom corner, wrap the same link in a fixed-position style: position:fixed, bottom and right offsets of about 20px, and a circular background around the WhatsApp icon. It is still just a link, no script, nothing to slow the page down.
WordPress: no plugin needed
- In the block editor, add a Custom HTML block (or a Buttons block) where you want the button.
- Paste the styled anchor tag from above, with your own wa.me link.
- For a site-wide button, add the same HTML to a widget area (Appearance → Widgets) or to your theme’s footer template.
Plugins like “Click to Chat” add floating buttons, business-hours rules and agent pickers. They’re fine if you want those extras, but if all you need is the button, the HTML block does the same job with zero added scripts and nothing new to keep updated.
Shopify
- Go to Online Store → Themes → Customize.
- Add a Custom Liquid or Custom HTML section (most modern themes have one) and paste the button code.
- To show it on every page, edit the theme’s footer section, or add the snippet to theme.liquid just before the closing body tag.
Wix, Squarespace and other builders
Every major builder has an “embed HTML” or “code” element, paste the same anchor tag there. Many also have a native WhatsApp button in their social or contact elements; those only ask for the phone number, so if you want a pre-filled message, use the HTML embed with your generated link instead.
Want visitors to share your page, not message you?
A chat button starts a conversation with you. If what you actually want is visitors sending your page to their contacts (a petition, a product, an article) use the free WhatsApp Share Widget instead. It fetches your page’s title, description and thumbnail and produces a ready-to-embed share card with a “Share on WhatsApp” button, in one version for websites and another that survives Gmail and Outlook for email campaigns. If the card shows the wrong title or no image once it lands in a chat, see why WhatsApp link previews break.
Track the clicks
A WhatsApp click leaves your site, so your analytics won’t see the conversation, but you can count the clicks. Add a UTM tag to the page URL you mention in the message, or track the button click as an event in Google Analytics / Tag Manager (a simple click trigger on links containing wa.me). If the button appears in several places, give each one a different pre-filled message so you can tell where a chat came from just by reading its first line.
Frequently asked questions
Do I need WhatsApp Business for a website button?
No. A wa.me link works with both personal WhatsApp and WhatsApp Business. A free WhatsApp Business account does add useful extras behind the same button, a business profile, away messages and quick replies.
Will the button work on desktop?
Yes. On a phone the link opens the WhatsApp app; on a computer it opens WhatsApp Web or the desktop app if the visitor is signed in. The same link handles both.
Can I use the official WhatsApp logo on the button?
Meta publishes brand guidelines with approved logo assets for exactly this use. Stick to the official glyph, don’t distort or recolor it, and don’t imply WhatsApp endorses your business.