How to Add a Clickable Telephone Number on your Website

When building a website it’s so important to make sure that any telephone numbers you add (that you want people to call you on of course!) are clickable. Specifically if the user is looking at your site on a mobile device then you want them to be able to easily click the number and have their mobile automatically go to call you. This simple act of making your telephone number a clickable link on your site can really help increase call conversions from your website.

This method works exactly the same as though you were adding a hyperlinked email address that opens up a new blank email when clicked.

To do this using HTML is very simple and you just need to add the following basic line of code. You can just copy and paste this code into your site and simply change the sections with your own telephone number. So firstly this is the code you’ll need to use:

<a href="tel:yournumberhere">yourcontenthere</a>

Just copy and paste that piece of code into the relevant section on your site and then simply replace both sections that read ‘yournumberhere’ and ‘yourtexthere’.

The ‘yournumberhere’ section must be the telephone number that you want the mobile device to automatically call when clicked.

The ‘yourcontenthere’ section can be anything you want and is the content which will appear on the front-end of your website. For example you could write ‘Click Here to Call Us’ and that line of text will then be clickable and automatically call the number you have added in ‘yournumberhere’. This can even be an image if you want! For example if you have created an image of a button that says ‘Call Us’ then you just need to add the ‘image tag’ in this section as shown below:

<a href="tel:yournumberhere"><img src="&quot;http://yourimageurlhere" /></a>

PLEASE NOTE: Do not get rid of the ‘tel:’ section near the beginning – this piece of code is telling the system that it’s a telephone number, so if you delete ‘tel:’ then this will no longer work and look very odd on your site!

And that’s it! It’s as simple as that – I hope that helps and be sure to keep a copy of the code in a ‘.txt’ document on your computer so you can always easily access it and use the on your site by copying and pasting.

This post was written by Digital Hatch

Leave a Reply

Your email address will not be published.