Use-Cases of this Tutorial
- Know how to implement the feature of calling to a phone number in an HTML page.
Click to Call functionality in HTML pages can be implemented using the tel: schema inside a hyperlink.
A website giving an option for "Click to call" is very useful for end users. Users can just tap on it and call directly, instead of copying the phone number first and then using it to call.
In web pages such a "Click to Call" feature can be implemented using the tel: naming schema along with the phone number in a hyperlink tag. Clicking on it will launch the Dialer App in the supported device from where the user can initiate a call.
Dial <a href="tel:+1-578-649-1542">1-578-649-1542</a> for supportNote that the call won't be placed directly. It will just open the Dialer app with the phone number. The user can then choose to call.
Phone Number Format
It is advisable use the international dialing format i.e. start with plus (+) followed by the country code. One cannot be sure from which part of the globe the user will arrive at the website and tries calling.
Visual separators, such as - . ( and ) should also be used to separate segments of number for easy detection and better readability.
It is also advised that link text should contain the phone number so that it becomes clear to be user that a call to the specific number would be made on clicking the link.
Styling Telephone Links with CSS
Links that represent a phone number can be specially styled to give a different look and feel.
a[href^="tel:"] {
color: blue;
}
Preventing Auto Detection of Phone Numbers
Some browsers convert numbers matching the format to click to call links. Mobile Safari automatically adds an hyperlink to matching phone numbers formats. Chrome for Android does not add hyperlinks to matching phone numbers, but click to call is allowed.
This feature can be disabled in Mobile Safari by adding the following meta tag to the <head> of the page :
<meta name="format-detection" content="telephone=no">In general it is a good idea to use the tel: schema rather than leaving the browser to automatically detect phone numbers.