Elegant Themes Blog

Stay up to date with our most recent news and updates

Telephone Links: How to Add “Call-able” Links & CTA’s to Your Website

Posted on March 8, 2016 by in Tips & Tricks | 36 comments

Telephone Links: How to Add “Call-able” Links & CTA’s to Your Website

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:

<a href="tel:123-456-7890">123-456-7890</a>

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.

adding code

Go to your contact info and select Text in your editor. You can add the code in place of your phone number.

contact form

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:email@me.com"> email@me.com </a>

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

<a href="mailto: email@me.com"> 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.

Editor

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.

sample header without styling

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:

a[href^="tel:"] {
color: blue;
text-decoration: none;
margin-right: 0.5em;
}
a[href^="mailto:"] {
color: red;
text-decoration: none;
margin-right: 0.5em;
}

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.

sample header with styling

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.

Country Codes

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:

<a href="tel:+1123-456-7890">123-456-7890</a>

Microdata

microdata

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">
234567890</a></span>
</div>

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:

Divi header elements

You can adjust the colors and fonts under Header & Navigation and then select Secondary Menu Bar.

Divi theme customizer

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.

viewing on mobile

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.

Divi modules

First, I want to clone the text module where I placed the clickable link.

Divi module settings

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.

Plugins

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

Download

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

Download

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

WP-TopBar

Download

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.

Final Thoughts

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 

download divi

36 Comments

  1. Very timely article, just when i need the info about click to callable buttons. Perfect !!!! And Thanks a lot

  2. Nice tips. Next level, please? Skype and other (free or not?) internet phone links? More challenge…

  3. Useful article Randy.
    I see lots of folks on the various Facebook Divi groups asking how to make the telephone number clickable… and now we know.

    • Nathan B. Weller

      Feel free to share it there when the question comes up in the future 🙂

  4. EXCELLENT reminders … (I especially appreciate your clarifying the Country Code inclusion)

  5. Thanks for a really great tip! It took about one minute to do!

  6. Great! Thank you!

  7. Great article, I was just looking to get that in the Divi contact bar.

    But, since this is a blog post from Elegant and you refer to the Divi contact bar, I wonder why you don’t add this click to call option by default. You did provide details on how to get that, but it isn’t possible to only make it clickable on mobile.


    PS: how do I get an e-mail notification if someone reply’s to this comment?

    • Nathan B. Weller

      If you select the check box “participate in this conversation via email” you’ll be notified and be able to respond from your inbox.

      • Which plugin do you use for that?

      • Thanks Nathan, did I miss that checkbox the past few months or is it just added?

  8. Thank you! This came at a perfect time! 🙂

  9. Perfect timing. My client just asked for this on their Divi theme. One question though… the email changes color on hover but using your code in Divi the phone and icon is indeed clickable but it doesn’t chance color on hover

    • Nathan B. Weller

      This link should inherit styles from your “hover on link” setting in the customizer. You can find this under General > Typography.

  10. Frankly I prefer to use the plugin, since I was very little programming knowledge.
    Thank you also for sharing plugin that we use.

  11. Thank you.
    I will implement in my contact page.
    Good tutorial without plugin.

  12. Nice post with very good practical advice !!

  13. I might add that if you want to track telephone call clicks ( mailto: or whatever) you can use an affiliate link plugin and instead of a typical link you put in “tel:+49123456789”. Not sure if this works with pretty link, but then you can just have a standard link for your telephone number.

    You could theoretically put the link on your youtube channel or email it and get diect calls from places other than your site.

    And if your number changes you just have to change the rediect in your affiliate link plugin or cloaking plugin.

  14. I already had a stylish call me button but this thought never struck me that I should make it clickable until I saw this post. I added “tel:my-number” in the custom link field of my button and it worked great!!! Thank you so much!!!

    Between I use “Buttons X” plugin for my call to action buttons. It is an amazing little plugin.
    https://wordpress.org/plugins/buttons-x/

  15. Great information. Thank you. I’ve added it already to several sites. There is one problem though. Clicking a phone number from a desktop gives an error message.

    Is there a way to add a safe fallback for devices without telephony?

    Sorry, I’m not using Divi, although it may be my theme on my next WP project.

  16. I was wandering for this from many days and finally got it here. Thanks a lot.

  17. Hi Randy,

    Many thanks for an article! Really usable.

    On many smartphones any links with a country code are by default “click to call” links.

    Regards,
    Igor

  18. Interesting. Now-a-days these feature is used across local listing sites where they allows visitors to call through a one tap button from a website. Including such feature enhance user experience and thus it has been an effective CTA for website. Best thing about this is the action can be triggered using HTML code and thus it can be used over any website developed using enterprise web content management solutions. We are alreadily providing such feature to our ecommerce customers where websites are developed on Sitefinity CMS or Magento.

  19. Useful information for people who don’t know how to do this.

    Two remarks:
    1) To suggest to beginners to use the WordPress Editor to add these clickable links is not a great idea I think. People can seriously mess up their site by mucking about in the header.php file as per your suggestion.
    2) Maybe omitting the country code works for US telephone numbers, but for the rest of the world it doesn’t work. It would be nice if you would take your non-US audience into consideration when writing instructive articles like these.

    Cheers,
    Piet

  20. Hello,

    A superb guide
    Thanks for the post..

  21. Hi, I’ve tried to add the code to Divi, but the actual code is displayed not the clickable link, I’ve just copy and pasted exactly what’s in the article to test it and still code is displayed. I realise I probably need to raise as a suport ticket, but thought I would add it here in case anyone else was having the same issue.

    • Ok, my fault. I had a header.php file in the child theme for some customisation on an older divi theme, removed that and the link works fine

  22. Nick, thank you for this article. You made it easy for a novice like me to follow. I’ve installed now and feel quite “chuffed” with myself.
    I wonder if it’s possible to add some code to an image.
    For instance if I upload an image of a phone and say “click here to call” and it’s clickable……just wondering.

  23. I’m trying to use this for a clickable phone number on Button 2 of my Full Width Header, but it is not working.

  24. is there a possibility to add in the same href 2 numbers and when the phone pops up the number choose the one I want to call? thanks!

  25. Remember to always obfuscate email addresses you post on your web site, as these can be scraped/harvested by spammers. A plugin like https://wordpress.org/plugins/obfuscate-email/ can do this for you or there are other methods you can employ yourself.

    But I’m very thankful for the article, good information, we just need to make sure we are mitigating potential issues and not creating new ones as designers/devs.

Join 341,592 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This