Loading...

Friday, December 14, 2012

Using URL Scheme for Telephone Numbers in HTML

We can use the tel: URL scheme for phone numbers in HTML. Just like the mailto: URL scheme will open the default mail application will the tel: start a telephone call. If the HTML page is viewed on a mobile phone and we select a link with the tel: scheme we can immediately call the number following the scheme. On a desktop computer a VOIP call will be initiated.

We can use hyphens in the phone number for readability, they will be ignored when the call is made. For example the imaginary phone number 123456789 in the Netherlands can be used as shown in the following HTML snippet:

<a href="tel:+31123456789">Call us</a>

More information is available at http://www.ietf.org/rfc/rfc3966.txt.

8 comments:

GregC said...

Be careful though as Skype for Windows (through automatically installed browser extensions) can break the look of your site by automatically painting the Skype icon next to callable phone numbers (pressing that icon will initiate a Skype call).

The solution is to put a meta tag into your HTML: <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Then you can mark some of your phone numbers (e.g. those that are on a white background where Skype doesn't do too much damage) with HTML comments that Skype will parse and do it thing: <!-- sphoneid telnr="+31123456789" fileas="Imaginary Dutch Number" -->Call us<!-- sphoneid -->

Hubert Klein Ikkink said...

@GregC: thank you for your comment. Very useful addition.

Unknown said...

How does the + get interpreted?

Hubert Klein Ikkink said...

@Unknown: the + is actually 00. On most phone when you press 00 you get a + sign. It is the prefix for country codes in phone numbers.

cheap nike shox said...

http://www.xoowholesale.com/
Cheap Nike Shox,
cheap Nike Air Max,

sir kodak said...

We can use the tel: URL scheme for phone numbers in HTML. Just like the mailto: URL scheme will open the default mail application will the tel: start a telephone call. If the HTML page is viewed on a mobile phone and we select a link with the tel: scheme we can immediately call the number following the scheme.pushwizard.com

Sapres Centauri said...

How do we remove the icon that shows up on Android devices? http://evmobile.evehiclesummit.com/images/screenshot_phoneicon.jpg

Hubert Klein Ikkink said...

@Sapres Centauri: I don't know how you can remove the automatically added icon. Is it possible to remove it maybe with CSS? Or you try and add this meta tag to your page:
<meta name="format-detection" content="telephone=no" />

Post a Comment