Digital Marketing Strategies | Company Consultant Services Agency

Digital Strategies

How to Make a Clickable Phone Number With HTML

1. Start with a standard link tag:

<a href=""></a>

2. Enter your phone number with no dashes in the quotes:

<a href="5554280940"></a>

3. Now the important part, add tel: to the beginning of the number:

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

4. Then finish it up with some text for the link

<a href="tel:5554280940">Call us at 555-428-0940</a>

Here’s what you should see: Call us at 555-428-0940 Click the link to make sure it works. If the call goes through, you’re done.

Common HTML Phone Number Link Mistakes

• Using dashes, which is by far the most common mistake. The number won’t always work on every device
• Forgetting to place a colon after “tel”
• Forgetting quotes in the HTML

How to Make a Phone Number Clickable in WordPress

More comfortable with the visual tab/WYSIWYG/TinyMCE editor? Here’s how you add phone links in WordPress:

1. Edit your page or post in WordPress.
2. Make sure you’re on the Visual tab – not the Text tab.
3. Highlight the phone number or text you want to make clickable on phones.
4. Click the “Hyperlink” button.
5. Enter tel: followed by your phone number with no dashes.
6. Apply the link.
7. Update/publish your page or post.

That’s it. You’re done.

Adding Google Analytics Event Tracking to HTML Phone Number Links

Here’s an easy call tracking solution: combine the above steps with Google Analytics to track click events.

Example Click to Call Link with Google Analytics Event Tracking:

<a href="tel:5558920234" onclick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'Call', eventLabel: 'Mobile Button'});"><p class="call-button">Click to Call</p></a>

• Copy and paste that link code.
• Swap out the phone number and text.
• Check Google Analytics under Behavior -> Events -> Overview or Top Events.

Here’s what those clicks look like in Google Analytics:

If you’re on WordPress, you may run into issues with Google Analytics and event tracking. I recommend using Google Tag Manager for all tags on WordPress. You’ll need to have some HTML skills, but it simplifies everything.

……………………………………………………………………………………………………………………………..

Adding an HTML Phone Number Call Link to your Website

Add the code as text to the location you want the link to appear:

Href=tel: creates the call link. This tells the browser how to use the number.

“Tel: 123-456-7890 “creates the HTML phone number. The number within the quotes is the number it will call.

The number within the >< tags is the visual portion and it can be anything you want it to be 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’s going to happen when they click.

Displaying a message instead of the number would look like this:

Your visitors will see the text but when they click on it they see the dialing screen of their phones with your number ready for them to click the call button.

Adding an Extension

Some phone numbers have an extension. You can add code that will create a brief 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 one second, and then dials extension.

You can have it to 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’s code before the phone number. An example might look like this:

Adding Microdata for Local SEO

One of my favorite conveniences of carrying around a smartphone is when I search for a local business and the result in 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 necessity. Fortunately, you can add it to your website so Google can provide your phone number in local searches.

This is done with microdata. Microdata informs search engines that the numbers are a phone number so they are shown as a clickable call link. You can create this by enriching the markup with a few tags for local searches.

For example, the code might look like this:

Other Calls to Action

With HTML5, you’re not limited to phone numbers. You can add other calls to action such as email, messaging, fax, etc. HTML5 protocols include:

• tel: – place a phone call
• mailto: – open an email app
• 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 a few examples.

Adding the Code to Your Contact Page

One of the best places to add a call link is within your contact info on your Contact Us page.

Whether you’re using the Classic Editor or the new Gutenberg editor, you’ll need to view the Text version of the page. In the Classic editor click the Text tab. In Gutenberg, click the three dots in the upper right and select Code Editor.

Add the code in place of your phone number.

Exit the Code Editor or Preview the page and you’ll see that your phone number is now a clickable link.

Creating Code for an Email Link or URL

The HTML code for email is mailto: The email address is added to the end, like this:

Just like the phone link, you can use the visual portion to add a message, such as:

Here’s an example from the Spa layout pack’s contact page. I’ve added a blurb module with an icon and the text Send an Email. I selected the Text tab and added the email HTML. The text is now clickable and will open your email app.

Adding Code to Open URLs

You can have the HTML to open any URL you want. This is good if you want to send readers to pages for newsletter signups, events, etc. In order to link to them, your HTML code will include the URL. For example:

I’ve added another blurb with code to see the events page.

Disable on Desktop and Tablet

One problem with call links is they’re not useful for desktops or tablets. 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 doesn’t. I’ve disabled the one with the clickable number on tablets and desktops, so they’ll never see the link. I’ve also disabled the module without the link for phones, so phone users will only see the module with the link.

Adding 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 within the <body> portion of code. I looked for an ending tag </a>, clicked enter to add a few extra lines, and pasted in my code. You can see the code here on lines 28 and 29.

Here’s what it looks like when I placed the call link and email link within the header of the Twenty Nineteen theme. It’s there and it works, but it’s not very pretty. This is fixable by adding color and margin space so they’ll stand apart 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 might look like this:

This tells the CSS how to style the text for tel: and mailto:. It changes the telephone number font to brown, the email font orange, and adds a small margin to the right of each link.

The CSS works wherever the code is including within widgets, posts, etc. You can even use icons instead of text.

Adding the Code to the Divi Secondary Menu

Divi can include your phone number and email in the Secondary Menu above the header. The email button is already clickable by default, but the phone number isn’t. The phone number can be turned into a call link by using a similar HTML phone number that we’ve used in previous examples.

Go to the Theme Customizer > Header & Navigation > Header Elements. This will give you a textbox where you can add your phone number. Fortunately, you’re not limited to just numbers. You can also add HTML. I’ve added the HTML from the previous examples. I also increased the phone number’s font size to make it easier to see for the images.

You can make obvious that it’s clickable by adding a message to the visual portion of the link. You could replace the number with the message, or add the message to the end of the number. It could look like this:

This example just shows the text.

In this one, I’ve added the phone number along with the text.

Testing on Mobile

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 Google Chrome’s Developer Tools.

Right click on your homepage and select Inspect. At the top left corner of your screen, you’ll see a list of devices. Select the one to see how your website looks on that screen. Clicking the HTML phone number link should open a dialog box asking you to choose an app. If you see this, the link works. I still recommend trying it on an actual smartphone, but this is a good indication that the link it doing something.

Adding Call Links with Plugins

You can also add a call link to your header with a plugin. They typically include features for styling, adding multiple calls to action, and the ability to be turned on or off based on the device of the visitor. They’re also easy to set up and use. These are great choices if you don’t want to handle code. Here are a few of the best options.

Call Now Button

Call Now Button adds a click-to-call button to the bottom of the screen for your mobile visitors. It doesn’t show 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 Information

Sticky Side Buttons

This plugin lets you add buttons that stick to the side of your website and remain on screen when the user scrolls. You can add a clickable phone number, email address, social media icons, and store locations. Set them on the right or left, choose animation and rollover styles, customize the colors, and choose where they show.

More Information

Speed Contact Bar

This one adds a contact bar that includes clickable links for a phone number, fax number, a headline, address, email, social networks, and custom URLs. Set the bar to the top or bottom and adjust the size, color, color of the 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 shown from 13 options including phone, email, Skype, custom URLs, and social networks. 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 to top and WooCommerce cart with item counter buttons.

More Information

Final Thoughts

The popularity of smartphones to access websites is increasing every day. This popularity takes call links from being a simple convenience to a complete necessity. Adding clickable phone numbers can make the difference between users calling your business or your competitors. Fortunately, it isn’t that difficult to create clickable links to add HTML phone numbers to your headers, footers, widgets, pages, and posts of your WordPress website.

We want to hear from you. Have you added a call links to your website? Let us know about your experience in the comments below.

Featured Image via Jane Kelly / shutterstock.com

……………………………………………………………………………………………………………………………………………………………………………………………………………………

To format a link to initiate SMS is very simple:

<a href="sms://+1800605xxxx">Send a SMS</a>
<a href="sms://27126">Send a SMS</a>


On most mobile phones, clicking this link will open a new message screen pre-populated with the shortcode or your business Texting number.

And When a visitor taps on the following link with a body on a smartphone, a new text message will open with a pre-filled recipient and message content.

<a href="sms://+1800605xxxx?&body=I%27m%20interested%20in%20your%20product.%20Please%20contact%20me.">Send a SMS</a>

If you noticed, we have “?&” after the texting number, which is required, since “?” works for Andriod devices and “&” works for iOS, but having both you don’t need to know the device type and it works for both.

*Make sure to add Msg& Data rates may apply and texting T&C on your website.

You can link any of the following HTML elements:

• Text
• Your site’s navigation
• Images
• Buttons

The support can vary on a different platform; we tested with Android and iOS 8+ devices and it worked fine.