Most "add WhatsApp to your website" tutorials send you to a plugin. This guide skips all of that. A WhatsApp button is just a styled anchor tag around a wa.me link — and you can build one in under five minutes with plain HTML and CSS.
The Minimal WhatsApp Button
At its core, a WhatsApp button is a hyperlink. Here is the smallest version that works everywhere:
<a href="https://wa.me/14155551234" target="_blank" rel="noopener">Chat on WhatsApp</a>
Replace 14155551234 with your phone number in international format — country code first, no plus sign, no spaces. For a Spanish number (+34 612 345 678) it becomes 34612345678.
Adding a Pre-filled Message
Attach a text query parameter to guide the conversation. The message must be URL-encoded — spaces become %20, commas become %2C:
<a href="https://wa.me/14155551234?text=Hi%2C%20I%27d%20like%20more%20information" target="_blank" rel="noopener">Ask us on WhatsApp</a>
Don't want to encode manually? Use our WhatsApp Link Generator — it handles encoding automatically and gives you a ready-to-paste URL.
Styling It Like a Real Button
Add CSS to make it look like a proper WhatsApp button. This version uses WhatsApp's brand green and includes the icon as an inline SVG:
<a href="https://wa.me/14155551234?text=Hi"
target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:10px;
background:#25D366;color:#fff;font-family:sans-serif;
font-size:15px;font-weight:600;padding:12px 22px;
border-radius:9999px;text-decoration:none;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.52 3.48A11.84 11.84 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.12.55 4.19 1.6 6.02L0 24l6.15-1.61A11.93 11.93 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.2-1.25-6.21-3.48-8.52zM12 21.9a9.88 9.88 0 0 1-5.06-1.39l-.36-.22-3.65.96.97-3.56-.24-.38A9.9 9.9 0 1 1 12 21.9zm5.4-7.4c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.65.07a8.12 8.12 0 0 1-2.38-1.47 8.94 8.94 0 0 1-1.65-2.05c-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.51H6.8c-.17 0-.45.07-.69.35-.23.27-.9.88-.9 2.15 0 1.27.92 2.5 1.05 2.67.13.17 1.82 2.78 4.42 3.9.62.27 1.1.43 1.47.55.62.2 1.18.17 1.63.1.5-.07 1.52-.62 1.74-1.22.21-.6.21-1.11.15-1.22-.07-.1-.27-.17-.57-.32z"/>
</svg>
Chat on WhatsApp
</a>
Floating WhatsApp Button
A floating button stays visible as users scroll — great for product and service pages. Add this anywhere in your <body> and the button will sit at the bottom-right corner on every page:
<style>
.wa-float {{
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
background: #25D366;
color: #fff;
border-radius: 50%;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
text-decoration: none;
transition: transform 0.2s;
}}
.wa-float:hover {{ transform: scale(1.1); }}
</style>
<a href="https://wa.me/14155551234?text=Hi" class="wa-float"
target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.52 3.48A11.84 11.84 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.12.55 4.19 1.6 6.02L0 24l6.15-1.61A11.93 11.93 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.2-1.25-6.21-3.48-8.52zM12 21.9a9.88 9.88 0 0 1-5.06-1.39l-.36-.22-3.65.96.97-3.56-.24-.38A9.9 9.9 0 1 1 12 21.9zm5.4-7.4c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.65.07a8.12 8.12 0 0 1-2.38-1.47 8.94 8.94 0 0 1-1.65-2.05c-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.51H6.8c-.17 0-.45.07-.69.35-.23.27-.9.88-.9 2.15 0 1.27.92 2.5 1.05 2.67.13.17 1.82 2.78 4.42 3.9.62.27 1.1.43 1.47.55.62.2 1.18.17 1.63.1.5-.07 1.52-.62 1.74-1.22.21-.6.21-1.11.15-1.22-.07-.1-.27-.17-.57-.32z"/>
</svg>
</a>
When to Use Each Version
- Inline button — Best in the body of a page, near a product description or contact section.
- Floating button — Best site-wide, especially on pages where visitors spend more than 30 seconds.
- Text link — Best inside blog posts or email signatures where a button would look out of place.
Technical Notes
Always use target="_blank"
Without it, WhatsApp Web opens in the same tab and the user loses their place on your site. Pair it with rel="noopener" to prevent the opened tab from accessing your page's window object — a simple but important security practice.
Mobile vs Desktop
On mobile, clicking a wa.me link opens the WhatsApp app directly. On desktop, it opens WhatsApp Web in a new tab (or prompts the user to scan a QR code if they haven't connected their phone). Both paths work fine — you don't need different URLs for each device.
URL Length
Very long pre-filled messages may get truncated by some platforms. Keep your default message under 100 characters to be safe. If you need more context, include it in the button label instead.
Common Mistakes
- Including + in the phone number — The URL format uses the number directly:
wa.me/14155551234, notwa.me/+1 415 555 1234. - Not URL-encoding the message — Spaces and special characters must be encoded or the message will be malformed.
- Missing aria-label on icon-only buttons — If your button has no visible text, add
aria-label="Chat on WhatsApp"so screen readers can describe it.
Conclusion
A WhatsApp button requires nothing more than a few lines of HTML and CSS. Generate your link with the tool above, wrap it in an anchor tag, add a bit of styling, and you're done — no plugin, no subscription, no third-party dependency.
Ready to create your WhatsApp link?
Use our free WhatsApp Link Generator to build your click-to-chat link in seconds — no coding required.
Generate WhatsApp Link