How to Add Telephone Links to Your Website

By /

So you’ve gone through all the trouble of creating a stunning website for your business, only to leave the customer manually selecting your phone number to dial. Well, you can add telephone links to your website with a single HTML tag.

Having a clickable telephone link working on your website is super useful as it provides a 1 click action for a potential customer to call you.

How to Add Telephone Links to Your Website

Whether the potential customer is: ready to buy; has questions; or has feedback, then providing the easiest way possible for them to contact you is a sure way to show your business off as professional.

You can also read this article on Medium!

Post Contents
  1. Why Add HTML Telephone Links?
  2. How do Telephone Links Work?
  3. Add Telephone Links to Your Website
  4. Other A href Protocols in HTML
  5. Conclusion

In this guide, I’ll show you how to add telephone links to your website and also cover off the different protocols that are available. These links are often called “Click to Call” links too.

Why Add HTML Telephone Links?

Simple put, a potential customer is a lot less likely to call if they have to manually select, copy and paste your phone number from your website.

Providing a super simple, single click solutions allows customers to contact you as fast and easy as possible.

Since mobile devices account for more than half of all internet traffic worldwide, having a clickable telephone link means a single tab to call your business.

How do Telephone Links Work?

Typically, when you want to add a link to your website you’d use the <a href> tab inside your HTML.

These links often point to other pages on your website or to a different website entirely. These hyperlinks use the HTTP protocol to retrieve the content of the new webpage so that it can be viewed easily.

Besides the HTTP protocol, we also have the mailto and tel protocols. I might write a future post about the mailto protocol, but for this post we are interested in the tel protocol.

Short for telephone, the tel protocol allows a phone number to be embedded in the link. Making the phone number a clickable element that will try to start a phone call. Because this link will try to start a phone call, the link works best on mobile devices.

In most modern browsers, clicking a telephone link won’t automatically call the number. Instead, the user will have to confirm the action before the call is made. This prevents you from calling the number is you accidently click the link.

Add Telephone Links to Your Website

As mentioned above, telephone links use the same a href HTML tag as you’d use to link to other web pages or websites. The difference here, is that we don’t use a URL instead we prefix our phone number with tel:

Here’s a basic example using 12345678910 as the phone number:

<a href="tel:12345678910"></a>

This would result in a completely blank link, so instead we can include content between the >< characters to show that the link is clickable. So you could use something like this:

<a href="tel:12345678910">123-456-78910</a>
123-456-78910

You could also display a message to make the intent to call even clearer to your website visitors. Something like this:

<a href="tel:12345678910">Call Us Today</a>
Call Us Today

You can also get more fancy with these links, by including them as part of your websites content. Here’s an example on how you can include a telephone link as part of your paragraph content:

<p>If you are in need of a managed website solution that allows you to focus on your business, then 
<a href="tel:12345678910">call us today</a>.</p>

If you are in need of a managed website solution that allows you to focus on your business, then call us today.

There are some special cases as well, you can also add extensions and country codes in your telephone links.

How to Add Telephone Links With Extension to Your Website

Say you have a business phone number that also has an extension, you’ll need to include this inside the HTML tel: link also.

This is done pretty much the same, we just as the letter p after the phone number but before the extension we want to add. So it would look like this:

<a href="tel:12345678910p123">123-456-78910 Ext 123</a>
123-456-78910 Ext 123

How to Add Telephone Links With Country Codes to Your Website

Country codes can also be included inside your telephone link, this makes it super easy for international callers to use the link without having to manually adjust the number.

You can also use the same link for international and domestic customers, as both will be resolved to your number and it won’t cost extra for domestic callers. Meaning there really isn’t a downside to putting your number in this format for your entire website.

If you didn’t know, the country code uniquely identifies the geographical location of a phone call. Common country codes include +1 for the United States and +44 for England.

If you wanted to include a country code into your telephone, it’d look like this:

<a href="tel:+4412345678910">+44 123-456-78910</a>

Other A href Protocols in HTML

As part of this post, I’ve included information only on the tel: protocol but there are others you can use. I’ve mentioned the mailto: protocol, but I’ll include all of the protocols below:

  • tel: enabled phone calls to be made
  • sms: sends a text message
  • mailto: used to send an email
  • fax: sends a fax, now outdated and not used
  • geo: opens a geographical location in a map application.

Let me leave an example of each below:

<a href="tel:12345678910">Call Phone Number</a><br>
<a href="sms:12345678910">Send SMS</a><br>
<a href="mailto:example@example.com">Send Email</a><br>
<a href="fax:12345678910">Send Fax</a><br>
<a href="geo:42.4243,-44.2322">Open Location</a>
Call Phone Number
Send SMS
Send Email
Send Fax
Open Location

Conclusion

Now that you’ve seen how to add tel: links to your website, along with the caveats and extra functionality that can be added, I’d encourage anyone to try adding this functionality.

You can even incorporate the other protocols listed above, to provide amazing single-click functionality for your website users.

Enjoy! 🎉

email popup image
Mark Harwood
NEVER miss a blog post again! Subscribe for email notifications whenever a new post is live!
Subscribe
NEVER miss a blog post again! Subscribe for email notifications whenever a new post is live!
Fill Out This Form, And I Will Be In Touch Shortly
Contact form image
I'll Be In Touch Soon