Floating WhatsApp button: how to build one without a plugin

What is a floating WhatsApp button and when should you use it?

It is a fixed button, usually round and green, that sits in the lower corner of the screen. Even when the person scrolls the page, it stays there. This keeps contact always within reach, with no need to go back to the top to look for it.

It makes sense on sites with a lot of scrolling, such as blogs, service pages and stores. On very short pages, a regular button inside the content may be enough.

Why build the floating button without a plugin?

Plugins are handy, but each one adds files and scripts to your site, and not all of them let you choose the destination link. A hand-made button is light, you control the color, the size and the address, and it works on any kind of site that accepts a piece of code.

The main point is the address. If the button points to wa.me, it only opens the chat. If it points to the WhatsClicks link, it also records every click.

Another advantage is maintenance. With a plugin, you depend on updates to keep it working. With your own snippet, you only touch it when you want to change the look.

How to build the floating WhatsApp button with HTML and CSS

First, create your free WhatsClicks account and copy your link, which looks like https://whatsclicks.com/w/code. Then paste the snippet below in the place on your site that accepts code, such as a custom HTML block or the theme footer. The name of that place varies depending on the platform.

After pasting, save and open the site on your phone. Confirm that the button shows up in the corner, that it does not cover important text and that, when tapped, it opens WhatsApp with the message saved in the dashboard. If something looks out of place, adjust the bottom and right distances until you find a comfortable position.

If your site uses a theme that already has a built-in floating button, turn the old one off before adding the new one. Two identical buttons in the same corner confuse the visitor and mess up the count, because the clicks get split between different links.

• HTML: create a regular link with the text WhatsApp, whose address is your WhatsClicks link (for example, https://whatsclicks.com/w/abc123?src=floating), and give it a class name, such as zap.
• CSS: fixed position (position: fixed), a distance of 20px from the bottom and from the right (bottom and right), green background, white text color, rounded corners (border-radius), inner spacing (padding) and a high z-index so it stays above everything else.

If you are not sure where to paste the code, ask whoever takes care of your site. The name of the place varies depending on the platform.

The button address before and after

If you already use a ready-made floating button, or code with wa.me, you only need to swap the link address:

• Before: https://wa.me/15551234567?text=Hi
• After: https://whatsclicks.com/w/abc123?src=floating

The ?src=floating part tells the dashboard that the click came from the floating button. If the site has several pages and you want to separate them, also add &p= with the page.

How do I know if the floating button works better than the others?

A good practice is to tag each button with a different name in src. Imagine a site with a floating button, a button at the top and a button at the end of the text. Using ?src=floating, ?src=top and ?src=end, the By button table in the dashboard shows how many clicks each one got.

After a few weeks, compare. If the floating one leads, it deserves prominence. If almost nobody clicks, maybe it is behind another element or too small on phones. The dashboard also shows the device used, and that helps you decide the button size.

Care to take so the floating button does not get in the way

A fixed button can be annoying when it covers part of the content. A few simple precautions avoid the problem:

Finally, remember that the floating button shows up on every page where the code is pasted. So if you only tag src, the dashboard shows the total for the button. To see it per page, also add ?p= when the code is specific to one page, such as the contact page or the pricing page.

• Pick a size that is comfortable for a finger on a phone, but does not take over the screen.
• Do not place it on top of other fixed elements, such as cookie bars or buy bars.
• Test on phone and computer before publishing.
• Prefer text or an icon that makes it clear the button opens WhatsApp.

Your own clicks also count in the dashboard. Search engine crawlers and known bots are not included in the count.