Most people who visit a small business website on a phone want one thing: to ask a quick question. If they have to scroll to the footer, copy a phone number or hunt for a contact page, many simply leave. A floating WhatsApp, call or email button fixes that by keeping your contact options one tap away on every page. This tutorial shows you how to add a floating WhatsApp button (plus call and email buttons) to WordPress without code, how to pre-fill the WhatsApp message, how to show different buttons on different pages, and how to check that the buttons are actually being used. We use our own free Floating Menu Builder plugin and its paid big brother, Floating Menu by 007AJ, but the planning steps apply to any floating button plugin.
Before you start: decide what the button should do
A floating button works best when it offers two or three actions, not ten. Before you install anything, write down:
- Your main action. For a restaurant that might be “Call to book”. For a service business it is often “WhatsApp us”. For a shop it may be “Email support”.
- Your secondary actions. Directions, a menu PDF, a booking page or back-to-top on long articles.
- Who should see it. Every visitor, only mobile visitors, only people on certain pages, or only logged-out visitors (members already have other ways to reach you).
- Your WhatsApp number in international format. Country code plus number, digits only. A Toronto number such as (416) 555-0123 becomes
14165550123. A UK mobile 07700 900123 becomes447700900123(drop the leading zero).
Getting the number format right matters, because WhatsApp click-to-chat links use the https://wa.me/<number> format and ignore spaces, brackets and plus signs only if you leave them out entirely.
Option 1: the free Floating Menu Builder (call, email, links, back to top)
If you only need a simple floating menu, start with the free plugin. It adds a small round button in a corner of your site; one tap opens a stack of buttons for links, phone calls, email and back-to-top. It is a few KB of plain JavaScript and CSS, loads only where the menu shows, uses bundled SVG icons (no icon fonts or CDN) and makes no calls home.
Step 1: Install the plugin
- Get the zip from the Floating Menu Builder download page (enter your email and the link appears straight away).
- In WordPress, go to Plugins → Add New → Upload Plugin, upload the zip and click Activate.
- The setup wizard opens on first activation. You can follow it or close it and use the settings screen.
Step 2: Add your buttons
Add one button per action. For a phone button, use a tel: link such as tel:+14165550123. For email, use mailto:hello@example.com. For WhatsApp in the free version, add a normal link button pointing to https://wa.me/14165550123. If you already have a WordPress menu with these links under Appearance → Menus, you can reuse it instead of building the buttons again.
Step 3: Choose position and style
Pick one of the four corners and set the distance from the edge. Bottom right is the most common choice because it is where right-handed thumbs land, but check that it does not sit on top of a cookie banner, a chat widget or your theme’s own back-to-top arrow. Set colours that contrast with your page background and keep the button at a comfortable tap size (at least 44 by 44 pixels).
Step 4: Labels and accessibility
Choose whether labels show as tooltips, are always visible, or are for screen readers only. Even if you hide visible labels, keep screen reader labels on: a button that only shows a phone icon is meaningless to someone using a screen reader. The free plugin uses real buttons and links, supports the keyboard, closes on Escape, shows a visible focus ring and respects reduced-motion settings.
Step 5: Preview on mobile, then save
Use the live preview to check desktop and mobile. Then open the site on your own phone and tap every button. A typo in a tel: link is the single most common reason a floating call button “doesn’t work”.
Option 2: Floating Menu by 007AJ (WhatsApp with a pre-filled message, display rules, click stats)
The free plugin is enough for a single menu with links. If you want WhatsApp buttons that open with a message already typed, different buttons on different pages, a mobile bottom bar or numbers on which buttons people actually tap, Floating Menu by 007AJ adds those for a one-time $19 rather than a monthly widget subscription.
Step 1: Create a menu and pick a position
Create a new menu and choose from seven positions: any corner, the middle of the left or right edge, or a mobile bottom bar. You can create as many menus as you like, each with its own position, style and display rules.
Step 2: Add a WhatsApp button with a pre-filled message
Choose the WhatsApp button type, enter your number in international format and write the message the chat should open with. Good pre-filled messages are short and tell you where the visitor came from, for example:
- “Hi, I’m on your website and I’d like a quote for a bathroom renovation.”
- “Hello, is there a table for two tonight?”
- “Hi, I have a question about my order.”
The visitor only has to press send, and when the message arrives you know what they want before you reply. If you serve customers in more than one language, write the pre-filled message in the language of the page it appears on.
Step 3: Add call, email, popup and share buttons
There are eight button types: link, phone, email, back to top, WhatsApp with a pre-filled message, popup, copy page link and share page. A popup button can show text or any shortcode, which is a neat way to open a short contact form (from whatever form plugin you already use) without sending visitors to another page. Share and copy-link buttons work well on recipe, event and article pages, where visitors often want to send the page to a friend.
Step 4: Set display rules
This is where a floating menu stops being clutter and starts converting. You can show a menu only on specific pages or posts, categories or post types, on the front page, to logged-in or logged-out visitors, to certain user roles, or on desktop or mobile only. Some practical setups:
- Restaurant: a “Call to book” and “Directions” menu everywhere, plus a separate catering menu that shows only on the Catering page.
- Service business: WhatsApp and call buttons on service pages, and a quieter back-to-top button on blog posts.
- Membership site: a sales menu for logged-out visitors and a support menu for logged-in members.
- Mobile-first: a bottom bar with Call, Menu, Share and Copy link on phones, and a small corner button on desktop.
Step 5: Style it to match your brand
Start from one of the seven style presets, then adjust colours, sizes, shapes and labels. Animations (slide, pop and stagger) are optional; keep them subtle so the button does not distract from your content. The 30 built-in SVG icons are bundled locally, so there is no extra request to an icon CDN.
Step 6: Check the click stats after a week
The plugin stores anonymous daily click totals per button in your own database (no cookies, no personal data, cleaned up automatically, and you can switch stats off). After a week, look at which buttons get tapped. If nobody uses “Email” but WhatsApp gets dozens of taps, remove the email button and move WhatsApp to the top. Fewer, better buttons almost always win.
WhatsApp button best practices
- Use WhatsApp Business. The free WhatsApp Business app gives you a business profile, an away message and quick replies, which makes a public WhatsApp button much easier to manage.
- Set expectations. If you only reply during office hours, say so in your WhatsApp away message or next to the button.
- Do not cover important content. On mobile, a floating button can sit on top of “Add to cart” buttons or form submit buttons. Check your key pages and use display rules or a different position if it overlaps.
- Keep it fast. Many chat widgets load large scripts from another server on every page. A floating menu that loads only a few KB, only where it is shown, has almost no effect on Core Web Vitals. If speed is a concern, our guide on speeding up WooCommerce without breaking checkout covers the bigger wins.
- Check privacy rules. Clicking a wa.me link sends the visitor to WhatsApp, which is a separate service with its own privacy policy. Mention it in your privacy policy if your region requires that.
Floating button vs live chat widget
A floating contact button and a live chat widget solve slightly different problems. A live chat widget keeps the conversation on your site and usually needs someone watching a dashboard, plus a monthly subscription. A floating WhatsApp or call button sends the conversation to the app your customer already uses every day, and you can reply from your phone. For most small businesses, restaurants, trades and local services, the floating button is cheaper, lighter and gets more replies. Larger stores with a support team may still want a full help desk.
Troubleshooting
- The WhatsApp button opens a blank chat or an error. Check the number: digits only, country code first, no leading zero, no plus sign.
- The button does not show. Check the display rules, then clear any page cache (caching plugin, host cache or Cloudflare) and look again in a private window.
- The button appears twice. Your theme or another plugin may add its own floating button. Turn one of them off.
- The call button does nothing on desktop. Desktop browsers often have no phone app. Use a display rule to show the call button on mobile only, and show email or a contact form popup on desktop.
- Emails from your contact form popup never arrive. That is usually a WordPress email problem, not a button problem. See WordPress emails not sending? How to fix it with SMTP.
Related: Selling with WooCommerce? Learn how to add product add-ons in WooCommerce for free, such as gift wrap, engraving and custom text fields.
Running a WooCommerce store? The same WhatsApp click-to-chat idea can win back abandoned carts. Compare the two main channels in email vs WhatsApp abandoned cart recovery.
Frequently asked questions
Can I add a WhatsApp button to WordPress for free?
Yes. Add a link button to https://wa.me/ followed by your number in international format with the free Floating Menu Builder. A pre-filled message, display rules and click stats are in the paid version.
Will a floating button slow down my site?
A well-built one barely registers. Look for plugins that load their files only on pages where the menu shows and that do not pull icons or scripts from other servers.
Does it work with my theme and page builder?
Floating menus sit above the page, so they work with classic themes, block themes and page builders such as Elementor. Check for overlap with your theme’s own sticky elements.
Can I show different buttons on different pages?
Yes, with display rules in Floating Menu by 007AJ: by page, post, category, post type, login status, user role or device.
Is it better to use the WhatsApp link or the WhatsApp Business API?
For a website contact button, the free click-to-chat link is all you need. The Business API is for automated messaging at scale and needs an approved provider.
More free plugins: browse all our free WordPress plugins, or see the full range in the 007AJ shop.
Leave a Reply
You must be logged in to post a comment.