WordPress
- Install the free WPCode plugin (Plugins → Add New, search “WPCode”).
- Open Code Snippets → Header & Footer.
- Paste the code into the Footer box and save.
Free tool
Free WhatsApp button for your website, with a live preview.
Make a floating WhatsApp chat button, see it on a sample site on computer and phone, and copy one small piece of code. It works on WordPress, Shopify, Wix, Squarespace, Webflow and any HTML site.
✓ Free, no sign-up
✓ Nothing saved
✓ Never expires
Add the button to your website
Copy the code, then paste it once into the part of your site that every page shares. The button then appears on every page, in the corner you chose.
Shopify
- Go to Online Store → Themes, open the … menu on your live theme and choose Edit code.
- Open
layout/theme.liquid. - Paste the code just above
</body>and save.
Wix
- Open your site’s dashboard and go to Settings → Custom code. Wix needs a Premium plan with a connected domain for this.
- Choose + Add Custom Code and paste the code.
- Pick All pages, place it in Body – end and apply.
Squarespace
- Go to Settings → Developer tools → Code injection. It is available on plans that include code injection.
- Paste the code into the Footer box.
- Save.
Webflow
- Open Site settings → Custom code. Webflow publishes custom code on paid site plans.
- Paste the code into Footer code and save.
- Publish the site.
Google Tag Manager
- Create a new tag of type Custom HTML and paste the code.
- Set the trigger to All Pages.
- Submit and publish the container.
Any other website
- Open the template or file shared by every page, usually the footer.
- Paste the code just above
</body>. - Save and upload. On a site without a shared footer, add it to each page.
Why plain code, not a plugin
- Nothing to slow your site. No script runs and nothing is downloaded from another server, so your page speed and Core Web Vitals stay as they are.
- Nothing to break. The button is ordinary HTML. It doesn’t depend on a plugin update, an account or a provider staying in business.
- No cookies, no tracking. It adds nothing to your cookie banner or privacy policy.
- Works with screen readers and keyboards. The button has an accessible name, a visible focus outline and respects reduced-motion settings.
Placement and wording that get chats
- Bottom right is where people look first for a chat button. Use bottom left when that corner already holds a chat widget, a “back to top” arrow or a cookie banner.
- On phones, keep it small. An icon-only button covers less of the screen and still reads as WhatsApp.
- Say what happens next. “Get a quote on WhatsApp”, “Ask about availability” or “Book on WhatsApp” tells visitors why to tap, which a bare “Contact” doesn’t.
- Pre-fill the first message. “Hi, I found you on your website and I’d like to know…” gets visitors past the blank chat box and tells you where they came from.
- Check it on your phone after publishing. Most visitors will see it there, next to your site’s own menus and banners.
Questions
Common questions.
Is this WhatsApp button generator free?
Yes. It is free with no sign-up, no account and no monthly fee, and the button is yours to keep. The code is made in your browser; your number and message are not sent to Serviti.
Will a WhatsApp button slow down my website?
No. The code is a small piece of plain HTML and CSS. It runs no script, sets no cookies and loads nothing from another server, so it adds almost nothing to your page and keeps working if any third-party service changes.
Do I need WhatsApp Business for the button?
No. The button opens a chat with any number registered on WhatsApp: a personal account, the WhatsApp Business app or the WhatsApp Business Platform.
Can I show the button only during business hours?
Not with plain code: it shows all the time, so people can message you whenever they visit. If out-of-hours chats are the problem, an AI agent can answer them for you.
My site already has a chat widget or cookie banner in the corner. What should I do?
Put the WhatsApp button in the other corner, or raise it with the space-below setting so the two don’t overlap. Check the phone preview, where space is tightest.
Can I track how many people click the button?
If your site uses Google Analytics 4 with enhanced measurement switched on, clicks are recorded automatically as outbound clicks to wa.me. Otherwise, use a different pre-filled message on different sites to see which one brings chats.
How do I change or remove the button later?
Make a new button here and replace the old code, or delete the code from wherever you pasted it. Colours and text can also be edited directly in the code.