Many business websites display a phone number so their customers can reach them. Back when desktop computers were the most popular way to access sites, users would take note of the phone number and call from a separate device. Of course, most users now access the website and make the phone call from the same device. This opens up an opportunity to add a call link, creating a clickable HTML phone number.
In this article, we’ll look at how to add a call link, as well as some other links in which are clickable. such as email and other calls to action.
Subscribe to our Youtube channel
How call links work
Make clickable a phone number is easily done with HTML. HTML5 includes protocols such as tel: and mailto: that browsers can use. Browsers respond differently to these protocols. Some will launch the phone app and add the number to the screen while waiting for you to click the call button. Others will make the call, while others will first ask if it’s ok.
Since it’s HTML, you can add the protocols anywhere on your site, including the header, footer, sidebars, within the content of posts and pages. and within widgets.
Adding an HTML phone number callout link to your website
Add the code as text in the location where you want the link to appear:
Href=tel: Create the call link. This tells the browser how to use the number.
“Tel: 123-456-7890” creates the HTML phone number. The number in quotes is the number you will call.
The number inside the >< tags is the visual part and can be anything you want, including the phone number, a line of text such as "Click to call" or "Call now", or any other call to action you want. It should be descriptive of what will happen when they click.
Showing a message instead of the number would look like this:
Your visitors will see the text, but when they click on it, they will see their phones dial screen with your number ready for them to click the call button.
Add an extension
Some phone numbers have an extension. You can add a code that will create a short pause before dialing the extension number. Adding P in front of the extension will add a one second pause. The code might look like this:
This dials the number, waits a second, then dials the extension.
You can make it wait for a dial tone by using w instead of p.
Adding Country Codes
Country codes can be added by including a + along with your country code before the phone number. An example might look like this:
Add microdata for local SEO
One of my favorite conveniences of carrying a smartphone is when I search for a local business and the result on Google gives me a clickable phone number. I can click the number to make the call without having to write it down or try to memorize it. This feature is now a must. Fortunately, you can add it to your website so that Google can provide your phone number in local searches.
This is done with microdata. The microdata tells search engines that the numbers are a phone number, so they are displayed as a clickable call link. You can create this by enriching the markup with some tags for local searches.
For example, the code might look like this:
WordPress Theme
Phone: 234567890
Other calls to action
With HTML5, you are not limited to phone numbers. You can add other calls to action such as email, messaging, fax, etc. HTML5 protocols include:
- tel: – make a phone call
- mailto: – open an email application
- callto: open Skype
- sms: – send a text message
- fax: – send a fax
All of these protocols are used in the same way as we saw above . Let’s look at some examples.
Adding the code to your contact page
One of the best places to add a call link is within your contact information on your Contact Us page.
Whether you are using the classic editor or the new Gutenberg editor, you should see the text version of the page. In the classic editor, click the Text tab. In Gutenberg, click the three dots at the top right and select Code Editor.
Add the code in your instead of your phone number.
Exit the Code Editor or Page Preview and you’ll see that your phone number is now a link where you can make click.
Creating code for an email link or URL
The HTML code for the email is mailto: the email address is appended to the end, like this:
[email protected] Just like the phone link, you can use the visual part to add a message, like: Click here to email me
Like the phone link, you can use the visual part to add a message, like:
< href=" mailto: [email protected]"; Click here to email me
This is an example of the contact page for the Spa Design Package. I added an ad module with an icon and the text Send an email. I selected the Text tab and added the HTML of the email. The text is now clickable and will open your email application.
Adding Code to Open URL
You can have the HTML to open any URL you want. This is good if you want to send readers to pages to subscribe to newsletters, events, etc. To link to them, your HTML code will include the URL. For example:
Added another ad with code to view events page.
Disable on Desktop and Tablet
One problem with callout links is that they are not useful for desktop or tablet computers. You can solve this with Divi by creating modules that are specific to each type of device and then disabling them on the other devices.
Here, I’ve created two modules with the phone number: one includes an HTML Phone Number and the other not. I have disabled the one with the clickable number on tablets and desktops, so they will never see the link. I also disabled the module without the link for phones, so phone users will only see the module with the link.
Add the code to your header or footer
You can add the code to your header or footer using the theme editor. Always use a child theme or your PHP code will be overwritten when you update the theme. This will require some CSS styling to look good.
In your Dashboard, go to Appearance > Editor > Theme Header (or Theme Footer). Place the code inside the part of the code. I searched for an end tag , clicked enter to add a few extra lines, and pasted my code. You can see the code here on lines 28 and 29.
This is what it looks like when I placed the call link and email link inside the header of Twenty Nineteen theme. It’s there and it works, but it’s not very pretty. This can be fixed by adding color and space in the margins so they separate from each other. Of course, this is done in CSS.
Styling the links
You’ll need to add code to the additional CSS field in the Customizer.
Your code could look like this:
a[href^=”tel:”] { color: brown; text-decoration: none; right margin: 0.em; } a[href^=”mailto:”] { color: orange; text-decoration: none; right margin: 0.8 em; }
This tells the CSS how to style the text for tel: and mailto:. Change the phone number font to brown, the email font to orange, and add a small margin to the right of each link.
CSS works wherever code is included in widgets, posts, etc. You can even use icons instead of text.
Adding Code to Divi’s Secondary Menu
Divi can include your phone number and email in the secondary menu above the header. The email button is now clickable by default, but the phone number is not. The phone number can be turned into a call link using an HTML phone number similar to the one we used in previous examples.
Go to theme customizer > Header and Navigation > Header Elements. This will give you a text box where you can add your phone number.Fortunately, you are not limited to just numbers. You can also add HTML. I’ve added the HTML from the above examples. I’ve also increased the font size of the phone number to make it easier to see the images.
You can make it obvious that it is clickable by adding a message to the part link visual You can replace the number with the message or add the message to the end of the number. It might look like this:
This example it only shows the text.
In this one, I added the phone number along with the text.
Mobile testing
I recommend testing the links with mobile devices to make sure it works. If you don’t have access to a smartphone, you can use the Google Chrome developer tools.
Right-click on your home page and select Inspect. In the upper left corner of your screen, you will see a list of devices. Select one to see how your website looks on that screen. Clicking on the HTML phone number link will open a dialog asking you to choose an app. If you see this, the link works. I still recommend trying it out on a real smartphone, but this is a good indication that the hook is doing something.
Adding Call Hooks with Plugins
You can also add a call hook to your header with a plugin. They typically include features to style, add multiple calls to action, and the ability to turn them on or off based on the visitor’s device. They are also easy to set up and use. These are great options if you don’t want to handle the code. Here are some of the best options.
Call Now Button
The Call Now button adds a click-to-call button at the bottom of the screen for your mobile visitors. It is not displayed on other devices. You can also add text if you want. The button is a phone icon, so it’s easy to understand what it’s for. All you have to do is enable the button and enter your phone number. You can change the default behavior in the advanced settings.
More info
Fixed side buttons
This plugin allows you to add buttons that stick to the side of your website and they remain on the screen when the user scrolls. You can add a clickable phone number, email address, social media icons, and store locations. Set them to the right or left, choose animation and rollover styles, customize colors, and choose where they display.
More information
Speed Touch Bar
This adds a contact bar that includes clickable links for a phone number, fax number, headline, address, email, social media, and custom URLs. Position the bar at the top or bottom and adjust the size, color, color of text and links, and how the bar reacts. You can also adjust the size. you can add more content using filter hooks.
More information
Mobile Contact Bar
This plugin adds links to your website when viewed on mobile devices. You can choose which links are displayed from 13 options including phone, email, Skype, custom URLs, and social media. It has FontAwesome integration for the icons. You can style the links and choose the size, border, opacity, etc. Set the menu at the top or bottom of the screen. The menu remains on the screen when the user scrolls. It also includes scroll up and WooCommerce cart with item counter buttons.
More information
Final thoughts
The popularity of smartphones for accessing to websites is increasing every day. . This popularity has turned call links from a mere convenience to an outright necessity. Adding clickable phone numbers can make the difference between users calling your business or your competitors. Fortunately, it’s not that difficult to create clickable links to add HTML phone numbers to your WordPress website headers, footers, widgets, pages, and posts.
We want to hear from you. Have you added call links to your website? Let us know about your experience in the comments below.
Featured Image via Jane Kelly / shutterstock.com
.