WhatsApp chat button generator
Copy-paste HTML and CSS for a floating WhatsApp button on your site.
FreeRuns in your browserNo signupUpdated 2026-10-29
Number
919876543210
7 to 15 digits, international format
Snippet size
1.2 KB
HTML and CSS together
Preview
<a href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question%20about%20your%20services." class="wa-chat" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 2a8 8 0 1 1-4.1 14.9l-.4-.2-2.6.7.7-2.5-.2-.4A8 8 0 0 1 12 4Zm-3 4.3c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.6s1.1 3 1.3 3.2c.2.2 2.2 3.4 5.4 4.6 2.6 1 3.2.8 3.7.8.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.4l-2.1-1c-.3-.1-.5-.2-.7.2l-1 1.2c-.2.2-.4.2-.7.1a8 8 0 0 1-2.4-1.5 9 9 0 0 1-1.6-2c-.2-.3 0-.5.1-.6l.5-.6.3-.5V11l-.9-2.3c-.3-.6-.5-.5-.7-.5h-.6Z"/></svg>
<span>Chat on WhatsApp</span>
</a>
<style>
.wa-chat{position:fixed;bottom:24px;right:24px;z-index:9999;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:#25d366;color:#fff;font:600 15px/1 system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform .15s}
.wa-chat:hover{transform:translateY(-2px)}
.wa-chat svg{width:26px;height:26px;fill:currentColor;flex:none}
@media (max-width:640px){.wa-chat span{display:none}.wa-chat{padding:14px}}
</style>Paste the snippet once, just before the closing body tag, or add the HTML to a footer widget and the CSS to your theme's stylesheet.
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
A WhatsApp chat button for website visitors gives them a one-tap way to message you instead of filling in a form. The generator produces the complete snippet: a link to your wa.me address, a WhatsApp icon drawn as inline SVG, and the CSS that pins it to a corner of the screen. There is no script and no account to create. You see a live preview while you adjust the colour, label, position and spacing, then copy one block of code.
How to use it
- Enter your WhatsApp number with the country code and, if you like, an opening message.
- Set the button text. "Chat on WhatsApp" or "Message us" are the clear choices.
- Choose the corner, the colour and the distance from the edge. The default green matches the WhatsApp brand.
- Copy the snippet and paste it before the closing body tag on your site.
How to read the result
The preview shows the button as it will appear on desktop. On phones the CSS hides the text and leaves a 54px round icon, so check the preview with the label turned off as well.
The number stat confirms what will be dialled. If the badge says "Check the number", the digits are outside the 7 to 15 range that international numbers use, usually because the country code is missing.
The snippet size is shown so you know what you are adding. The default snippet is about 1.2 KB, which has no measurable effect on load time. Hosted chat widgets often load hundreds of kilobytes of JavaScript before a visitor has tapped anything.
One thing to watch: a bottom-right button can overlap cookie banners and "back to top" buttons. If that happens, switch to bottom left or increase the edge distance so the two sit apart.
If you only need the link without the button, the WhatsApp link generator does that and adds a QR code. We add buttons like this on every website we design and build where WhatsApp is the main enquiry channel.
Questions
Frequently asked.
Where do I paste the code?
Just before the closing body tag of your template, so it appears on every page. In WordPress, a footer code widget or the theme's footer.php works. In Shopify, theme.liquid. On a Next.js or React site, drop the HTML into the root layout and the CSS into the global stylesheet.
Will it slow the page down?
No. The snippet is a link, a small inline SVG and a few lines of CSS, under 2 KB in total. There is no JavaScript, no external script and no tracking. It is far lighter than the chat widgets that load a third-party bundle.
Does it work on mobile?
Yes, and that is where most taps happen. The CSS hides the text label on screens under 640px so only the round icon shows, which keeps it from covering content. Tapping it opens the WhatsApp app with your number and message already in place.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide