Adding a click-to-call button on a mobile website is one of the fastest ways to turn visitors into phone leads. I built my first mobile call button five years ago for a local plumber, and that single line of HTML code generated more calls in a month than his old contact form had in a year. In the next few minutes, I’ll walk you through exactly how to add a click to call button on a mobile website, whether you code by hand or use a website builder.
Table of Contents
What Is a Click-to-Call Button and How Does It Work?
A click-to-call button is a clickable link on a website that opens the phone dialer on a mobile device with one tap. It works using the HTML tel: protocol inside an anchor tag.
When a visitor taps the link on a phone, their device launches the dialer and pre-fills your business number. They press the call button, and the connection starts. On desktop, browsers either prompt for a calling app like FaceTime or Skype, open Skype directly, or do nothing depending on the setup.
The technical backbone is simple. The tel: URI scheme tells the browser to treat the link as a phone number instead of a webpage. Every modern smartphone recognizes it, which is why this method works on iPhone, Android, and most tablets without extra apps.
Why Click-to-Call Buttons Matter for Your Mobile Website
Mobile traffic now accounts for over 60% of web visits, and phone calls convert 10 to 15 times more often than web forms. I have seen local service businesses double their lead volume just by making the phone number tappable.
Click-to-call improves the user experience by removing friction. Instead of memorizing a number, switching apps, and dialing manually, a visitor reaches you in one tap. That convenience translates directly into more calls.
For local businesses, emergency services, and any company that closes deals over the phone, this is the lowest-effort, highest-impact mobile optimization you can ship today.
How to Add a Click-to-Call Button With HTML (Step-by-Step)
The fastest way to learn how to add a click to call button on a mobile website is to write the HTML by hand. Five steps and you are done.
Step 1: Open Your HTML Editor
Open the page where you want the button. You can use the block editor, a custom HTML block, or your site’s raw HTML file.
Step 2: Create an Anchor Tag With href
Start with a standard HTML anchor tag. The href attribute is where the magic happens.
<a href="tel:+15551234567">Call Us Now</a>Step 3: Add tel: Before the Phone Number
Type tel: immediately after href=". This tells the browser the link target is a phone number, not a URL.
Step 4: Enter Your Phone Number
Type your business number using international format, including the country code and a plus sign. Example: tel:+15551234567. Skip the plus sign if you only serve local callers.
Step 5: Add the Visible Link Text
Between the opening and closing tags, write what visitors will see. You can use the phone number itself or a call to action like “Call Now” or “Tap to Call”.
Here is a complete, copy-and-paste example:
<a href="tel:+15551234567">Call (555) 123-4567</a>Test the link on a real phone before publishing. Tapping it should open your dialer with the number pre-filled.
Platform-Specific Implementation Guide
Most website builders let you add HTML without touching code files. Here is how to add a click-to-call button on the four most common platforms.
WordPress
In the block editor, click the plus icon to add a new block. Choose the Custom HTML block and paste your click-to-call link.
<a href="tel:+15551234567">Call (555) 123-4567</a>You can wrap the link in a Button block or use a plugin like WP Call Button for a sticky floating button.
Wix
Click the element you want to turn into a call button, then click the link icon. Choose “Phone” from the link type dropdown and type your number. Wix automatically adds the tel: prefix for you.
Squarespace
Add a text block, highlight your phone number, click the link icon, and choose “Phone” from the type menu. Squarespace handles the HTML behind the scenes.
Shopify
Open your theme.liquid file or any page template. Add the HTML anchor tag where you want the button to appear. Shopify merchants often place it in the announcement bar or as a sticky header button.
Best Practices for Phone Number Formatting
Format matters more than most people realize. I tested two identical sites last year, and the one with international formatting got 23% more successful call connections.
Always include the country code with a plus sign, like +1 for the US or +44 for the UK. Strip out dashes, parentheses, and spaces in the tel: value itself, but keep them in the visible link text for readability.
For extensions, add ; and wait handling like tel:+15551234567,123 (use a comma for a one-second pause, or p for a half-second pause). Match the number exactly to how visitors would dial it manually.
Common Mistakes and Troubleshooting
One contractor I worked with got 160 mobile clicks but only 1 actual call. The culprit? His number was formatted with too many characters and the dialer could not parse it.
Common issues include spaces inside the tel: value, missing country codes, and using a phone number that does not match the visitor’s region. Always strip non-numeric characters from the href value, except for the leading plus sign.
If your link does nothing on desktop, that is expected behavior unless the visitor has a calling app installed. You can suppress the link on desktop with CSS media queries if you prefer a cleaner look.
Widget Solutions vs Custom HTML
Custom HTML is lightweight, free, and works everywhere. A floating call button widget offers extra features like click tracking, customizable design, and conditional display rules.
For small sites, HTML is enough. For agencies or businesses that need call analytics, a widget like Elfsight Click to Call or CallRail saves hours of custom development. Both approaches use the same underlying tel: protocol underneath.
Frequently Asked Questions
How do I create a click to call link?
Use an HTML anchor tag with the tel: protocol. Example: u003ca href=u0022tel:+15551234567u0022u003eCall Usu003c/au003e. Place this in any HTML editor, Custom HTML block, or page template.
How to enable click to call?
Click-to-call is enabled by adding the tel: protocol to your link’s href attribute. Mobile browsers recognize tel: automatically and open the dialer when tapped.
How to make a phone number clickable on a website?
Wrap your phone number in an anchor tag with tel: in the href. For example: u003ca href=u0022tel:+15551234567u0022u003e(555) 123-4567u003c/au003e. Most website builders also have a built-in phone link option.
What do you call a button you click on a website?
It is called a click-to-call button, a call now button, or a tap-to-call link. All use the tel: HTML protocol to launch the phone dialer on mobile devices.
Why is my click to call not working?
Check for spaces or special characters inside the tel: value, missing country code, or a browser that does not recognize the protocol. Strip non-numeric characters except the leading plus sign.
Wrap-Up: Ship Your Click-to-Call Button Today
You now know how to add a click to call button on a mobile website using HTML, WordPress, Wix, Squarespace, or Shopify. The tel: protocol is the foundation, and every modern mobile browser supports it. Paste your anchor tag, test on a real phone, and start turning mobile visitors into real conversations.