Much of the modern technology we use daily was created to make tasks easier or more efficient of both. The way the website user experience is designed is no different. Considering your customer’s path-to-purchase is a great way to identify areas that could be improved when it comes to navigating your website and getting in touch with your business.
In this article, we will show you how to set up a clickable contact number (also referred to as ‘click to call’) so that customers can call you easily when they’re browsing your website or even an email on a mobile device.
Why should you have a clickable contact number on your website?
Many industries still rely on phone calls as the primary means of contact from the customer to the business. Even if this is not your primary source of communication with your customers, offering it as an option among others (such as email, live chat and online booking platforms) is essential to ensure that customers are able to get in touch with you in the way that is easiest for them.
If a customer is trying to reach a business because they have an urgent enquiry, they are far more likely to get on the blower than they are to type out an email. This is especially true if they’re on the move and using their mobile.
Clickable contact numbers make this task just that little bit easier. And every time you can make your customers path-to-purchase a smoother ride, you should do it!
How to create a clickable contact number
There are two options to create a clickable contact number. You can either use some simple code in your HTML editor, or you can enter some code into a link editor. We’ll walk you through both.
Option A – HTML editor
Step 1: Open your HTML editor.
If you’re editing your website on a platform such as WordPress, each text box will likely have both a WYSIWYG (what you see is what you get) editor and a HTML editor which shows the code that formats the text in the way you want it to appear.
Step 2: Enter the code with <a href=“tel:+”></a>
Step 3: Enter your number without spaces in the area between the + and the “.
E.g. <a href=“tel:+61731037994”></a>
Step 4: Now enter the text you want to link in between the > and <. This could be your number as you want it to appear, or a short message like “Call us”.
E.g. <a href=“tel:+61731037994”>Call us on 07 3103 7994</a>
Step 5: Save your changes and test it immediately on your mobile phone to ensure that it works as intended. If something doesn’t work, review the steps above to ensure there were no errors in the spelling and formatting of the code.
Option B – Hyperlink
If you’re nervous about using HTML code, or if you want to make an image or icon clickable,
there is another workaround you can use to achieve the same result.
Step 1: In the text editor, simply enter the text you want to make clickable.
E.g. Call us on 07 3103 7994.
Step 2: Then highlight that text, select the button for hyperlink (the shortcut is usually command/control + K) then enter tel: followed by your number including the are code.
E.g. tel:+61731037994
This does the same thing as the HTML code method outlined in Option A.
Step 3: Save your changes and test it immediately on your mobile phone to ensure that it works as intended. If something doesn’t work, review the steps above to ensure there were no errors in the spelling and formatting of the code.
To make an image or icon clickable, select the image/icon, then select the hyperlink button (or use the shortcut command/control + K) and follow the same process as above.
Your Turn
Now it’s time to test this out on your own website. Your challenge is to edit your phone number on your website and make it clickable. Once you’ve done this, make sure to test that your changes have worked by viewing your website on your phone’s web browser.
Let us know in our Facebook support group how you went with this challenge! And if you’re after any more website tips, don’t forget to check out our short course on improving your website.
