In the last blog post I wrote about how to customize a web font to add some social media icons to your website. In the project was I’ve mentioned there was the wish to add an icon to call the site’s owner.

Protocols to call from a website

In order to allow visitors to call a number, you simply have to wrap it into a link and use the tel protocol. A link would look like this:

<a href="tel:+1-555-2401">555-2401</a>

In this example, I have used the country code for the US. This is technically not necessary, but it helps when the number might be used from visitors outside of the US. You can add dashes to make the number more readable, but you can also write it like +15552401. The link text can be in any format. It could also be some text like Call us, just as with any other link.

What happens, when clicking the link?

On a mobile phone, as soon as a visitor clicks the link, it will either directly call the number or ask for the app to use, if there is more than one app (like the regular phone app and Skype installed).

And what about desktop browsers?

Even on a desktop browser you can use such links. Here is an example of Chrome, with a left click on the link:

If you have a mobile phone connected to your profile, you can send the phone number from the link to your mobile. Alternatively you can pick another app.

On a right click you can also send the phone number to your mobile, but you don’t habe the option to use a different app:

Alternative protocols

The tel protocoll works for regular phone calls on mobile and desktop. On mobile phone, you can usually also pick a different VoIP app, such as Skype. But on desktop browsers, Skype is not offered. If you want visitors to use Skype, you can use the callto protocol.

There are also the protocols sms and fax, but the browser support is still quite limited.

Conclusion

Offering a link for your visitors to call you is really easy and helps to improve the user experience of your website. You can find an overview on the different browser behaviours and tips and tricks to style such links on CSS-Tricks. So why don’t you add such a link to your website, if you don’t already have one?