Most websites, especially those for businesses, provide a phone number so customers can call the business. In the past, users have accessed the sites through desktops and then written the number down to make the call on their phones. Nowadays, users are accessing those websites with smartphones. They can make the call from the same device that they accessed the website from. This provides an opportunity to include an extra step of convenience for the user – clickable telephone links.
You know when you search for a local business and the result in Google gives you a clickable phone number? When you click on it your phone dials the number without you having to write it down or remember it and type it in yourself. This feature is so convenient that I’ve avoided calling a business when the phone number wasn’t clickable. This is a feature that’s moving from a convenience to a necessity.
In this article, we will look at how to add callable links as well as other calls to action such as email signups and links to URLs.
How it’s Done
Making the clickable link is easily done with protocols that are built in to HTML5 code. You can add the code to your header, footer, sidebar, within posts and pages, to your contact page, and within widgets.
The clickable links work through the use of HTML5 protocols such as tel: and mailto:. Browsers react to these protocols in different ways. They will either ask you if it’s okay to open the phone app, launch the phone app and place the number within the display and wait for you to click the call button, place the call, etc.
Adding Code for Telephone Links
You add the code as text to the location you want the link to appear. You just need a single line of code like this:
The first part of this line of code tells where to point the link. Href=tel: creates a telephone link. The number of course gives it the number to link to.
The second part is the visual portion of the link. It doesn’t have to match the link. In other words, the visual portion can be numbers or letters you want displayed. You can have it say a message instead, such as “Click to Call”. For example, if you want it to display a message instead of the number, your code would look like this:
<a href="tel:123-456-7890">CLICK TO CALL</a>
Your visitors will see the message but when they click on it they are sent to the dialing screen of their phones with your number already inserted and ready for them to hit the call button.
Example: Adding the Code to Your Contact Page
One great place to add a callable link is within your contact info on your Contact Page.
Go to your contact info and select Text in your editor. You can add the code in place of your phone number.
Your phone number is now a clickable link.
Other Calls to Action
You’re not limited to just phone numbers. You can add other calls to action by using the HTML code such as email, fax, messaging, etc. Here’s a listing of the HTML protocols:
- tel: – place a phone call
- mailto: – open an email app
- callto: open Skype
- sms: – send a text message
- fax: – send a fax
Example: Creating Code for an Email Link or URL
The HTML code for email is mailto:
You would add the email address to the end. It could look like this:
<a href="mailto:firstname.lastname@example.org"> email@example.com </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: firstname.lastname@example.org"> Click here to send me an email </a>
Other options include newsletter signups, events, etc. In order to link to them your HTML code will include the URL.
<a href=" http://MySampleSite.com/Newsletter/"> Sign up to our newsletter </a>
They will take on the default styling of the location you place them.
Example: Adding the Code to your Header
You can add the code to your header using the editor. This will require some CSS styling to look good. I recommend using a child theme.
In your Dashboard, go to Appearance > Editor > Header.
Place the code within the body portion of HTML. I looked for an ending tag </a>, hit enter a few times to give myself some room to type, and pasted in my code.
Here’s what it looks like placed within the header of the Twenty Sixteen theme. It’s functional, but not very pretty. To give them some more styling you could add color and some margin space to make them stand apart from each other.
Styling the Links
You’ll need to add code to the CSS file. In the Editor, scroll down and look for Styles in the right column. Select Stylesheet and scroll through the code until you find the code for the header and place the code at the end just before the next section.
Your code might look like this:
This tells the CSS how to style the text for tel: and mailto:. It makes the telephone number font blue, the email font red, and adds a small margin to the right of each. I’m leaving the newsletter link the default.
Using CSS, we could change the fonts, colors, underline, etc. The CSS will find the code anywhere you place it and add the styling, so you could use the same methods to add the code to widgets, posts, etc. Another option is to use icons rather than text.
Dialing a Number with an Extension
If your phone number has an extension then you should add some code that will add a brief pause before dialing the extension number. A 1 second pause is added by using P. The code might look like this:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
This dials the number, waits one second and then dials extension 123. If you want it to wait for the dial tone then use w in place of p.
You don’t have to use country codes, but when you consider that websites are international, you might want to consider it. Country codes are added by placing a + with your country’s code before the phone number. An example might look like this:
Microdata informs search engines that the numbers are a phone number. You do this by enriching the markup. This adds a few tags for local searches so when your local visitors find your business in a search engine it will show them a clickable telephone link.
For example, the code might look like this:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
Adding the Code to the Divi Contact Bar
Divi already has a contact bar that places your phone number and email above the header. The email button is already clickable but the phone number isn’t by default. With a snippet of HTML code the phone number can be clickable too.
To activate the contact bar, go to the Theme Customizer, select Header & Navigation, and then select Header Elements. This will give you a textbox where you can add your phone number. However, you’re not limited to just adding a number to this textbox – you can also add code. Adding the very same HTML code as above will give you a clickable link.
If you want to make it more obvious that it’s clickable you can add a message to the visual portion of the link. For example, you could replace the number with the message to click to call, or you could add the message to the end of the number like this:
<a href="tel:123.456.7890">123.456.7890 CLICK TO CALL</a>
Your visitors will see this:
You can adjust the colors and fonts under Header & Navigation and then select Secondary Menu Bar.
Test the Site on Mobile Devices
I recommend checking it on mobile screens to see how it looks and reacts. If you don’t have access to a mobile device and you’re using Google Chrome, right click on your homepage and select Inspect. At the top left corner of your screen you should see a list of devices. Select the one you want and you’ll see how your website looks on that screen. You will need to reload the page in order to load the mobile version of the website.
Disable on Desktop and Tablet
One problem with links with a click-to-call feature is they’re not useful for desktops or tablets (unless the user actually makes calls from those devices). Divi gives you a way around this by allowing you to create modules that are specific to each type of device.
As an example I went back to my Contact Page where I made the phone number clickable.
First, I want to clone the text module where I placed the clickable link.
Then, I will remove the link in one of the modules, leaving only the phone number. Next, scroll down and select to disable this module on Phone. This module will only be viewable on tablets and desktops. In the module with the link I will disable that module on Tablet and Desktop. Now it will show the link on mobile devices but not on tablets or desktops.
Another way to place a callable button in your header is by using a plugin. They include features for styling, adding additional calls to action, and can be turned on or off depending on the device used by the visitor. Here are a few plugins to consider. They have the advantage of being easy to set up and use and you won’t have to modify your code if you change themes.
Speed Contact Bar
Speed Contact Bar is a free plugin that adds a contact bar that includes clickable links for phone numbers, email, custom URLs, and URLs for social networks. You can set it to the top or bottom of your website and adjust its size, color, color of the text and links, and how it reacts. The color adjustments let you style it to match your color scheme so it doesn’t look out of place. You can also adjust the sizes to make them more or less prominent.
Mobile Contact Bar
Mobile Contact Bar is a free plugin that will add links to your website when viewed on mobile devices. You can choose which links are shown from 13 different options that include phone, email, Skype, custom URLs, and social networks. You can style the links to match your website and choose the size, border, opacity, and more. The menu can be placed at the top or bottom of the screen. The menu remains on the screen in its location independently of the website, so when users scroll the button remains on the screen.
WP-TopBar is a free plugin that places a message bar in your header that can include clickable messages such as phone numbers, email, URLs, etc. You can place HTML code and style it with CSS. You can also choose which types of devices that can display the bar, so you can turn it off for desktops and tablets, and have it display for phones. If you want to have a specific call to action that’s based on a schedule you can set it to display a specific message bar for those times.
As more users are accessing websites from smartphones, callable links are moving from being a convenience to a necessity. This one extra step of convenience might be enough to get customers to call you over your competitors. Fortunately, it’s easy to add the links for both phone numbers and other calls to action using HTML5 protocols or a plugin.
Your turn. Have you added a callable link to your website? Did you use one of the methods I mentioned here? Do you have something to add? Let us know in the comments below.
Article thumbnail image by Apatsara / shutterstock.com