Floating WhatsApp button for websites
Enter the number with country and area code and the message the customer will send. Adjust the look, see the preview in the corner of the screen and copy the code.
WhatsApp button for your site
Floating WhatsApp button for websites: what it is for
Enter the WhatsApp number and the message the customer will send. Choose the corner of the screen, the size, the color, the distance from the edge, the text bubble and whether the button pulses when the page opens. The preview shows in the corner of this page.
The code is just HTML and CSS, with an SVG icon and a wa.me link. The bubble hides on small screens and the animation respects people who prefer less motion.
How to use
- Enter the number and the message.
- Adjust position, color, size and bubble.
- Copy the code and paste it before your site's </body>.
When to use it
- Websites for shops and service providers.
- Campaign landing pages.
- WordPress, Wix or hand-coded sites.
Frequently asked questions
Where do I paste the code?
Before the closing </body>, on every page (or in your theme footer). On WordPress, use a plugin that inserts code in the footer or the theme editor. On builders like Wix and Webflow, use the site's custom code field.
Do I need WhatsApp Business?
No. The wa.me link works with any WhatsApp account. The number goes with the country code and area code, digits only.
Does the button slow down the site?
No. The code is just HTML and CSS with an SVG icon, with no libraries or external calls.
What if I want more than one button?
Use another position (left and right) and generate the code again with another number. Change the wa-flutuante id in the second code so it isn't repeated.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.