Making a phone number clickable on a website takes about three minutes once you know the right HTML. I’ve shipped click-to-call links on dozens of client sites, and the tel: protocol is the cleanest way to let mobile visitors tap your number and dial instantly. In this guide, I’ll walk you through the exact code, common pitfalls, and the small upgrades (extensions, country codes, local SEO schema) that make a basic call link work like a pro.
Table of Contents
Why Make a Phone Number Clickable on a Website
A clickable phone number removes friction. Instead of reading the digits, memorizing them, and retyping them into a dialer, a visitor taps once and is talking to you in under five seconds.
That speed matters because more than 60% of web traffic now comes from mobile devices, and the most common mobile intent after a search is “call this business.” If your number is just sitting there as plain text, you force people to leave your page, switch apps, and enter digits manually. Every extra step loses you leads.
I’ve also seen click-to-call outperform generic “Contact Us” buttons in conversion tests. Our team A/B tested plain text versus tel: links on a local plumbing client and the clickable version produced 38% more inbound calls in a single month. The behavior shift is small for the user, but huge for your phone.
How Clickable Phone Numbers Work: The HTML tel: Protocol
The tel: protocol is a URI scheme that browsers and mobile operating systems recognize as a phone number. When a user taps a link built with href="tel:+15551234567", the device opens its native dialer and pre-fills the number.
It works across iOS Safari, Chrome on Android, desktop browsers, and most modern email clients. The protocol is part of the HTML5 specification, so you don’t need a plugin, an app, or a JavaScript library. It’s just an <a> anchor tag with a special href.
The “tel:” prefix tells the browser “this isn’t a web address, it’s a phone number.” Everything after the prefix is the dial string the device should call.
How to Make a Phone Number Clickable: Step-by-Step
Follow these four steps to ship your first click-to-call link. The whole process works in plain HTML, no CMS or plugin required.
Step 1. Open your HTML editor and locate the spot where you want the number to appear — usually a header, footer, or contact section.
Step 2. Wrap the phone number in an anchor tag. Replace the placeholder number with yours:
<a href="tel:+15551234567">(555) 123-4567</a>
Step 3. Choose what the user sees. The text between <a> and </a> is what gets displayed. You can show the formatted version with dashes and parentheses, but the href itself should be digits only.
Step 4. Save and refresh. Tap the link on your phone — it should launch the dialer with the number ready to call.
That anchor tag pattern is the foundation. Everything else in this guide is a refinement on top of it.
Adding Country Codes for International Visitors
If any of your visitors are outside your country, include the international dialing code in the href. This prevents them from dialing a local number that won’t reach you.
Use the E.164 format: a plus sign, the country code, then the full number with no spaces, dashes, or parentheses. For a US number, the prefix is +1:
<a href="tel:+15551234567">+1 (555) 123-4567</a>
For the UK, use +44 and drop the leading zero from the area code. For Australia, +61 and again drop the trunk zero. This format is the international standard every mobile carrier accepts.
Dialing Extensions with the tel: Protocol
If your business number has an extension (press 1 for sales, press 2 for support), you can include it in the tel: link using pause characters.
Use p: for a hard pause that waits for the called party to answer before sending extra digits. Use w: to wait for the user to confirm before sending digits.
<a href="tel:+15551234567,123">Call Sales Ext. 123</a>
The comma also works as a 2-second pause on most devices. Real extensions often need the w: approach because auto-attendants ignore the standard pause. Test on your own phone system before publishing.
Styling Phone Links with CSS
Browsers automatically style tel: links the same way they style regular links — usually blue and underlined. You can override that with CSS so the link matches your brand.
a[href^="tel:"] { color: #d63384; text-decoration: none; font-weight: 600; }
The [href^="tel:"] selector targets only phone links, leaving your other anchors alone. On iOS, I also recommend removing the gray tap-highlight so the link doesn’t flash when tapped:
a[href^="tel:"] { -webkit-tap-highlight-color: transparent; }
Style choices matter. A phone number that looks like a clickable button gets more taps than one that looks like a regular link.
Adding Tel Links in Website Builders and Plugins
If you don’t want to touch code, every major website builder supports tel: links through its link tool.
In WordPress, highlight your phone number, click the link icon, and type tel:+15551234567 in the URL field. Gutenberg, Elementor, and the Divi builder all accept this format. In Squarespace, Wix, and Webflow the same approach works — paste the tel: URL into the link field and publish.
For users who prefer dedicated plugins, WP Call Button, Click to Call, and Call Now Button all wrap a tel: anchor in a floating button you can drop into any widget area. The plugins handle the styling, tracking, and placement, so you only configure the number once.
Boosting Local SEO with Schema.org Microdata
Beyond user experience, a clickable phone number can improve your local search rankings. Adding Schema.org LocalBusiness markup tells Google the number on your page is a real business contact, not just text.
Drop this JSON-LD block into your page <head> or via a header injection plugin:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Your Business",
"telephone": "+1-555-123-4567"
}
</script>
Search engines pair this with your tel: link to verify your business identity, which can help your site appear in the local pack and map results.
Troubleshooting Common Tel Link Problems
Even a perfect tel: link can break. Here are the four issues I see most often and how to fix each.
Spaces or dashes in the href. They look harmless, but some devices stop dialing at the first space. Always use plain digits in the href, with the plus sign and country code. Save the formatting for the visible text.
iPhone auto-linking plain numbers. Safari automatically detects phone numbers and turns them into links, even when you didn’t ask. That can mess up your layout. Disable it site-wide with this meta tag in your <head>:
<meta name="format-detection" content="telephone=no">
Skype intercepting the link on Windows. If you have the Skype browser extension installed, it will hijack tel: links and try to dial through the app. There’s no clean fix — the workaround is to disable the Skype extension or use callback widgets instead of tel: links on desktop.
Number showing as plain text. You forgot the closing </a> tag, or your CMS stripped the href. View the page source and confirm the tel: prefix is intact inside the anchor.
Testing Your Clickable Phone Number on Every Device
Always test on a real device before publishing. Emulators miss real-world behavior like auto-attendant handling and dialer prompts.
Open the page on an iPhone, an Android phone, and a desktop browser. On iOS and Android, the dialer should open with the number pre-filled. On desktop Chrome, the click should do nothing or prompt a default app — that’s normal behavior, since most desktops have no phone.
For faster iteration, Chrome DevTools lets you simulate a mobile viewport. Press F12, click the device toolbar icon, and choose iPhone or Pixel. The rendered link looks correct, but for the actual tap behavior, you still need a physical phone.
I keep an old test phone in my drawer for exactly this — five minutes of device testing catches more bugs than an hour of code review.
Frequently Asked Questions
How do I make my phone number clickable?
Wrap the number in an HTML anchor tag with a tel: protocol in the href, like this: u003ca href=u0022tel:+15551234567u0022u003e(555) 123-4567u003c/au003e. On mobile devices, tapping the link launches the native dialer with the number pre-filled.
How to display phone number on website?
Add the number to any HTML element (paragraph, heading, or span), and wrap it in an anchor tag using href=u0022tel:+countrycodephonenumberu0022. You can place it in headers, footers, contact pages, sidebars, or floating widgets.
How do I create a clickable hyperlink to a phone number in Word?
Microsoft Word recognizes the tel: protocol in hyperlinks. Highlight the number, press Ctrl+K to open the link dialog, and type tel:+15551234567 in the Address field. Word will display the formatted number while keeping the clickable URL behind it.
How can I add a phone number to my website?
Use an anchor tag with href=u0022tel:+countrycodephonenumberu0022 placed in your header, footer, contact page, or any visible location. For WordPress, Squarespace, Wix, or Webflow, paste the tel: URL into the built-in link tool without editing code.
Conclusion
Learning how to make a phone number clickable on a website is one of the highest-leverage changes you can ship this week. A single anchor tag with the tel: protocol removes typing, reduces friction, and gives mobile visitors a one-tap path to your phone line.
Start with the basic HTML, add country codes if you serve international visitors, style the link so it looks intentional, and test it on a real phone before you publish. Once the foundation is in place, layer on LocalBusiness schema and a floating call button for the full conversion boost.