Most of your visitors are on phones, and on a phone the easiest action is a tap. A click to call button lets mobile visitors ring your business with one tap instead of copying a number, switching apps, and dialing it manually. Every extra step loses potential customers, so removing those steps directly increases phone leads. This guide shows you four ways to add a click to call button in WordPress, from a simple button block to a floating call button that follows visitors on mobile.
Why Do Click to Call Buttons Matter for Your Website?
Mobile traffic now makes up the majority of visits for most small business sites. When someone finds your restaurant, clinic, repair shop, or consultancy on their phone, they are often ready to act right then. A visible call button captures that intent at its peak.
Phone leads also convert better than form submissions for many businesses. A caller is usually further along in the decision process than someone browsing casually. They have a question, an urgent need, or they want to book now. Making the call frictionless means you catch people you would otherwise lose to a competitor whose number was easier to tap.
The technical foundation is simple. Phone numbers on the web use the tel: link format, and every smartphone understands it. When a visitor taps a tel: link, the phone opens the dialer with the number already filled in. Desktop users see the number too, and many can call through apps like Skype or FaceTime. Everything in this guide builds on that one simple link.
What Is the Correct tel: Link Format?
Before adding buttons anywhere, get the link format right. A tel: link uses the international format with the country code and no spaces, dashes, or brackets. For a Pakistani number such as 0300 1234567, the link is tel:+923001234567. For a US number like (555) 123-4567, it is tel:+15551234567.
The plus sign and country code matter because visitors may be abroad or on networks that need the full international number to connect. The display text on the button can look friendly, with spaces and dashes for readability, but the link itself must stay clean. A button might show “Call: 0300 123 4567” while linking to tel:+923001234567.
To build the link, take your full number, drop the leading zero, add your country code with a plus sign, and remove every space and punctuation mark. Pakistan is +92, the United States and Canada are +1, and the United Kingdom is +44. Double check the result by tapping it on your own phone before publishing.
How Do You Add a Click to Call Button With the Button Block?
This is the fastest method and works on any page or post. Open the page in the block editor and add a Button block where you want the call action, typically near the top of the page, after the pricing section, or in the footer area.
Click the button and type your call text, for example “Call Now” or “Call for a Free Quote”. Then click the link icon on the button toolbar and enter your tel: link, such as tel:+923001234567. Press Enter to apply it. You can style the button with the block settings, choosing a bold background color like green so it stands out from the rest of the page.
Place these buttons where decisions happen. A call button at the end of a service description, beside the price, or inside the contact section catches visitors at the moment they are ready. If your contact page is built with Elementor, our guide on how to add a contact form with Elementor pairs well with this, giving visitors both a call option and a form option.
How Do You Add a Call Link to Your Navigation Menu?
Putting a call link in your navigation menu makes it visible on every page of your site. Go to Appearance, then Menus in your WordPress dashboard. If you are new to this screen, our beginner-friendly tour of the WordPress dashboard explains where everything lives.
On the Menus screen, expand the Custom Links panel. In the URL field, enter your tel: link, for example tel:+923001234567. In the Link Text field, type something clear like “Call: 0300 123 4567” or simply “Call Now”. Click Add to Menu, drag the item to the position you want, usually at the end of the menu, and click Save Menu.
The menu item will now appear in your site navigation. On mobile, most themes collapse the menu behind a hamburger icon, so the call link sits one tap inside the menu. To make the menu item look like a button, you can add a CSS class to it under Screen Options and style it with a background color, though even a plain link works fine.
How Do You Create a Floating Call Button for Mobile?
A floating call button stays fixed on the screen as visitors scroll, but only appears on mobile devices where calling makes sense. This needs a small HTML snippet plus a few lines of CSS, and it is the highest impact option on this list.
First, add a Custom HTML block in your footer area, a reusable block, or a widget that appears site wide. Paste this code, replacing the number with your own:
<a href="tel:+923001234567" class="vtg-floating-call">Call Now</a>Next, add the styling. Go to Appearance, then Customize, then Additional CSS, and paste this snippet:
.vtg-floating-call {
display: none;
}
@media (max-width: 768px) {
.vtg-floating-call {
display: inline-block;
position: fixed;
bottom: 20px;
right: 20px;
background: #22a355;
color: #ffffff;
padding: 14px 22px;
border-radius: 50px;
z-index: 9999;
text-decoration: none;
font-weight: bold;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
}The media query hides the button on desktop screens and shows it only on screens narrower than 768 pixels, which covers phones and small tablets. The fixed position pins it to the bottom right corner above all other content, and the rounded pill shape with a green background makes it instantly recognizable as a call action.
Test this on your actual phone after publishing. Tap the button and confirm your dialer opens with the correct number. Also check that it does not cover important content such as cookie notices or checkout buttons on small screens. If it overlaps something, adjust the bottom value in the CSS until it sits comfortably.
Are There Plugins for Sticky Call Buttons?
If you prefer not to touch code, several plugins add floating call buttons with visual settings. Options like Sticky Call Button, Call Now Button, and WP Call Button let you choose colors, position, and visibility rules from a settings page. They are convenient, but they add another plugin to maintain and update.
For most sites, the manual HTML and CSS method above is better. It is about ten lines of code, loads instantly, and never breaks during plugin updates. Use a plugin only if you need advanced features like showing the button on specific pages, scheduling display times, or tracking button clicks with built-in analytics.
How Do You Test and Improve Your Call Button?
Always test on a real phone, not just your desktop browser. Desktop browsers may not know what to do with a tel: link, so the real test is tapping it on iOS and Android devices. Confirm the dialer opens, the number is correct, and the country code connects properly.
Keep the display text short and readable. “Call Now” works better than a full sentence, and pairing it with your number builds trust because visitors see exactly who they are calling. Use a high contrast color so the button stands out, and give it enough padding to be an easy thumb target, at least 44 pixels tall.
Consider pairing your call button with a WhatsApp button, since many visitors prefer messaging over calling. Our tutorial on how to add a WhatsApp chat button to WordPress shows how to set that up, and the two buttons together cover both kinds of visitors.
Do not forget accessibility. Give the button a clear text label rather than a phone icon alone, so screen reader users understand what it does. If you use an icon plus text, add an aria-label such as “Call us now” to the link for extra clarity.
HeroThemes has a useful guide to click to call in WordPress with more placement ideas if you want to explore advanced setups.
What Else Should You Know About Click to Call Buttons?
Do click to call buttons work on desktop computers?
It depends on the visitor’s setup. Desktops without calling software may do nothing when the link is clicked, but many users have Skype, FaceTime, or browser calling extensions that handle tel: links. The button still has value on desktop because it displays your number prominently, and visitors can dial it manually on their phones.
Should the phone number include the country code?
Yes, always use the full international format with the country code, such as tel:+923001234567. Local visitors can still reach you, and international visitors or travelers on roaming networks will connect without problems. The display text can use the local format for familiarity, but the link itself should be international.
Will a floating call button annoy my visitors?
Not if it is done well. Keep it small, place it in a corner, and show it only on mobile where calling is natural. Problems start when the button is oversized, covers content, or appears on desktop where it serves no purpose. The media query in this guide handles the desktop part, and sensible sizing handles the rest.
Can I track how many people tap the call button?
Yes. The simplest way is to add a click event in Google Analytics or Google Tag Manager that fires when someone taps a tel: link. Some call button plugins include this tracking built in. Knowing your tap rate helps you judge whether the button placement is working or needs a more prominent spot.
Last updated: October 2026.
