Mobile and Tablet MarketingContent Marketing

How To Hyperlink Phone Number To Call Or Text In A HTML Anchor Tag

At work, we often sit down to a laptop or a desktop to view our corporate websites on a large screen… but if you take a look at the mobile visits to your website, you may be startled that the majority of visitors are arriving via mobile device. If you start to break down your traffic by referral source, you’ll probably be even more surprised that search engine users are predominantly mobile.

63% of search engine searches in the U.S. are through mobile technologies. 48% of global website visits come from mobile.

Zippia Mobile vs Desktop Statistics

With businesses now seeing a significant portion of their visitors arriving via mobile devices, having a mobile-ready website is no longer an option, it’s a necessity.

One element that’s often overlooked when building out a mobile experience is hyperlinking your phone numbers in HTML so that mobile users can simply click on them and start a phone call. Anchor tags are the actionable tags that browsers interpret and enable users to click. A typical anchor tag for a website is:

<a href="https://martech.zone">Martech Zone</a>

An anchor tag that opens an email is:

<a href="mailto:info@martech.zone">Click here to email us!</a>

With mailto, you can optionally include the subject and body of the email within the link. I would make sure that you URL encode the text, though. Some browsers will break on a space:

<a href="mailto:info@martech.zone?subject=Hi%20Doug&body=This%20is%20a%20test!">Click here to email us!</a>

Phone Number: Click To Call Hyperlink

The syntax for hyperlinking to a phone number in HTML is similar to the mailto syntax, just using tel: instead:

<a href="tel:+13172039800">Click here to call us!</a>

The syntax for your phone number doesn’t really matter. I’ve tested the value with and without plus signs, parentheses, periods, and dashes and everything appears to work on both iPhone and Android.

I do try to keep things clean by removing everything but the numbers. I would also recommend including the country code in the phone number with the plus sign – especially if you’re attracting business internationally.

When we optimize our clients’ sites, we ensure that all instances of phone numbers are hyperlinked. If it’s a call-to-action, we usually format the link as a button to make it very obvious that it can be clicked.

Phone Number: Click To Text Hyperlink

You can also have a hyperlink that automatically generates an SMS message:

<a href="sms:+13172039800">Click here to text us!</a>

You can optionally include a message as well:

<a href="sms:+13172039800?&body=Hello">Click here to text us!</a>

How To Capture A Phone Number Click In Analytics

We also ensure that we capture these events in Google Analytics! If you’re like to measure how many people are clicking these links, you can read our article on how to add a Google Analytics Event using Google Tag Manager.

Douglas Karr

Douglas Karr is the founder of the Martech Zone and recognized expert on digital transformation. Doug is a Keynote and Marketing Public Speaker. He's the VP and cofounder of Highbridge, a firm specializing in assisting enterprise companies to digitally transform and maximize their technology investment utilizing Salesforce technologies. He's developed digital marketing and product strategies for Dell Technologies, GoDaddy, Salesforce, Webtrends, and SmartFOCUS. Douglas is also the author of Corporate Blogging for Dummies and co-author of The Better Business Book.

35 Comments

  1. Genius Doug! Plan to start using that on all of my client sites. Okay if I post this on my blog? Of course giving you full authorship. Very cool! 😎

  2. So is there any reason NOT to put parentheses, periods, or dashes in a phone number? And does the html phone number act like a title tag? Is there any SEO benefit to doing a title tag within the href code?

  3. @edeckers The RFC3966 standard doesn’t appear to support parenthesis but do support a ton of other options and symbols for international calling, extensions, etc:
    http://www.ietf.org/rfc/rfc3966.txt

    As for SEO, I don’t see why not! Perhaps the business name + “phone number” could be a good way to implement!

  4. Hi, that’s a cool trick but I tried this and Firefox gave me an ugly error message saying it didn’t know how to read the link. To me, it isn’t worth an ugly error message when someone clicks the link on a desktop just to have a mobile phone be able to access the link. “Long-press” on the phone number on Android and it automatically tries to call a number anyways. Am I wrong? Is there a work around?

  5. Thank you so much. simple like you said, yet efficient. You can go a couple steps further and make it link to an icon and create a title in the anchor tag to display your phone number and further instructions for users who hover their mouse over the icon. Thanks again!

  6. Just a simple correction … you said you recommend we “keep everything but the actual numbers IN the href value”

    I’m sure you mean “keep everything but the actual numbers OUR OF the href value”

    Or else you’d just be dialing a bunch of punctuation 🙂

  7. Very informative tutorial! Actually, I like the aspect of a “click to call widget” instead of a “clickable phone number” better. Having tried out the Callback Tracker plugin on my site, I see a lot more results with the ability to call my leads, instead of having them call me. Personally, I see it as necessary on most sites. Here is the link to plugin https://callbacktracker.com/plugins/wordpress-click-to-call-plugin-install-tutorial/

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles