How to Make a Phone Number Clickable on Your Website

I never knew this was a problem when I had my Android phone. Most phone numbers were clickable from my phone by default. But when I switched over to an iPhone, I realized this was a big problem! I had to copy and paste phone numbers, trying to adjust the little select area over the number just right. Not a good solution.

Here’s how to write HTML to link your phone number on your website.

  • Start with a standard link tag
  • <a href=""></a>
  • Enter your phone number with no dashes in the quotes
  • <a href="5554280940"></a>
  • Now the important part, add tel: to the beginning of the number
  • <a href="tel:5554280940"></a>
  • 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’ll see: Call us at 555-428-0940

Common coding mistakes with your HTML tag

  • By far the most common mistake is using dashes in the number. This doesn’t always work on every device.
  • Forgetting to place a colon after “tel”
  • Forgetting quotes in the HTML

How to link phone numbers using WordPress and other content management systems

animated gif showing how to link phone numbers in WordPress so they can be clicked and called from a mobile phone

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

  • Edit your page or post in WordPress
  • Make sure you’re on the Visual tab (not the Text tab)
  • Highlight the phone number or text you want to make clickable on phones
  • Click the Hyperlink button
  • Enter tel: and then your phone number with no dashes
  • Apply the link
  • Update / publish your page or post
  • Done!

Adding Google Analytics event tracking to your HTML phone links.

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

Here’s an example of a 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:

screenshot of Google Analytics showing succeessful call events logged in the Behavior panel

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.

Need an easier click-to-call solution?

We offer a pre-built, stylish mobile call button solution if you’re looking for something to get more calls to your business right away. Check it out and feel free to contact us about custom options.



Author: Graham Onak
Graham Onak is the owner of GainTap, a Chicago based online marketing optimization company. He brings a wide array of experience to his work and writes primarily about technical optimization techniques for websites and online marketing programs.

Leave a Reply