WhatsApp Chat Button for Website Copy the code.
Add a floating WhatsApp button to any website. Style it, preview it and paste one snippet - no plugins, no scripts, no signup.
Live preview
Embed code
<!-- WhatsApp chat button --> <a href="https://api.whatsapp.com/send/?phone=919876543210&text&type=phone_number&app_absent=0" target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp" style="position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:12px 18px 12px 14px;border-radius:9999px;font:600 14px/1 system-ui,-apple-system,sans-serif;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25)"><svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.99c-.002 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg><span>Chat with us</span></a>
Sample code. Enter your number to create yours.
How to add a WhatsApp chat button to your website
- 1
Enter your number and message
Use the full number with country code, and optionally a message customers start the chat with.
- 2
Style the button
Pick a label, colour and screen position and check the live preview.
- 3
Copy the snippet
Paste it before the closing </body> tag of your website and publish.
Frequently asked questions
What is a WhatsApp chat button?
A WhatsApp chat button is a floating button on your website. When a visitor clicks it, WhatsApp opens a chat with your business number, optionally with a message already typed.
How do I add a WhatsApp chat button to my website?
Enter your number, choose the label, colour and position, then copy the generated snippet and paste it just before the closing </body> tag of your site. It works on WordPress, Shopify, Wix, Webflow and any custom HTML site.
Does the chat button slow down my website?
No. The snippet is a single link with an inline icon and inline styles. It loads no external scripts, fonts or images, so it adds no extra requests.
Can I customise the colour, text and position?
Yes. Choose any colour, set the button label (or leave it empty for an icon-only button), and place it at the bottom left or bottom right of the screen. The preview updates as you change the options.
Is the WhatsApp chat button free?
Yes, it is free with no signup. The snippet is generated in your browser and your number is never stored.
More free tools
Reply to every website chat from one inbox
Manage chats from your button in a shared team inbox, with AI reply suggestions and lead scoring.
Start free trial