Simple HTML - Click To Call (tel: schema) 🖱️📞

Make your website even more accessible when dealing with telephone numbers by allowing the user to click your number to make a call.

TL;DR

• Wrap the telephone number in an anchor tag <a></a>
• Prefix the telephone number in the href attribute with the tel: schema
• Make sure the telephone number uses the international dialling format

Note: This takes seconds to implement, so there's no excuse not to do it!

Problem

You want to talk with a real human to discuss a problem and you visit the website's "Contact Us" page to get the telephone number, you now have to copy the number from the website into your phone and then press the dial button.

Arrrrgggh, it shouldn't be this hard!

Those websites not in the know have the telephone number contained in the following HTML markup.

<span>[phone]</span>

Note: The number above is a fictitious, so it'll fail to connect. Fictitious numbers are used in movies, television programs, etc. You can find out more about fictitious numbers on Wikipedia.

Solution (tel: Schema)

What is the tel: schema, its a URI schema for telephone numbers. Browsers are able to parse these values and understand that they should be treated as a telephone number.

HTML has built-in support for Click to Call, by wrapping the telephone number in an anchor link and using the tel: schema. E.g.

<a href="tel:[phone]" title="Click to Call">[phone]</a>

Note: Be a good citizen and use the international telephone dialling format to make sure the call is always connected, irrespective of where the caller is located.

There's no excuse not to implement this 5 seconds fix, we owe it to our users.✅

What Happens

Depending on whether you visit the website with a mobile device or desktop changes the behaviour of the link.

Mobile Devices

Pressing the telephone number will now open the device's default dialler app with the telephone number already inserted, user only has to press the dial button.

Click To Call On Android Phone

Desktop

This will depend on the browser used to navigate the website, but most modern browsers will prompt the user to make a call using their phone or pick an application.

Google Chrome Make A Call Prompt

Try It Out

Below is an example of how the telephone number will appear when visiting the website. Again this is a fictitious number so the call won't be connected, but should allow you to view the UX.

[phone]

Credits

Cover Image: Photo by James Sutton on Unsplash

Comments

[Clive Da]

is there some sort of fallback to prevent

The address wasn't understood

errors on non mobile devices ?

[Carl Saunders]

Doesn't look like it has a native fallback. What browser/OS/device are you using to get the errors when using a non mobile device?

[Clive Da]

just ff on xubuntu

it's just a bit scary to get a big error screen although i have just noticed the addr bar does contain tel:[phone]

[Humberto A Sanchez II]

Will stash this in my toolbox

[Haider Ali Punjabi]

Other similar stuff include:
"mail:" for email addresses, query parameters can be used to add subject, body, etc
"fax:" for Fax Numbers
"callto:" for Skype

[Waylon Walker]

Thanks for sharing a great tip to make the web just a bit better! I will definitely use this next time I add a phone number to a site.

[Pete 🏳️‍🌈 🇨🇦]

Why is the example UK phone number formatted like a North American one? It should be, at the very least, [phone]. [phone] would be better.

[Carl Saunders]

Yep, quite right, good spot. I'll change it now.