I need to build a web page for mobile devices. There's only one thing I still haven't figured out: how can I trigger a phone call through the click of text?
Is there a special URL I could enter like the mailto: tag for emails?
Device specific solution are not preferred.
I know iPhone automatically recognizes phone numbers and creates a link for this, but it would be great if this could be done for images too... and also for most mobile devices.
On
Clickable smartphone link code:
The following link can be used to make a clickable phone link. You can copy the code below and paste it into your webpage, then edit with your phone number. This code may not work on all phones but does work for iPhone, Droid / Android, and Blackberry.
<a href="tel:1-847-555-5555">1-847-555-5555</a>
Phone number links can be used with the dashes, as shown above, or without them as well as in the following example:
<a href="tel:18475555555">1-847-555-5555</a>
It is also possible to use any text in the link as long as the phone number is set up with the "tel:18475555555" as in this example:
<a href="tel:18475555555">Click Here To Call Support 1-847-555-5555</a>
Below is a clickable telephone hyperlink you can check out. In most non-phone browsers this link will give you a "The webpage cannot be displayed" error or nothing will happen.
NOTE: The iPhone Safari browser will automatically detect a phone number on a page and will convert the text into a call link without using any of the code on this page.
WTAI smartphone link code: The WTAI or "Wireless Telephony Application Interface" link code is shown below. This code is considered to be the correct mobile phone protocol and will work on smartphones like Droid, however, it may not work for Apple Safari on iPhone and the above code is recommended.
<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a>
Just use HTML anchor tag <a> and start the attribute href with tel:. I suggest starting the phone number with the country code. pay attention to the following example:
<a href="tel:+989123456789">NO Different What it is</a>
For this example, the country code is +98.
Hint: It is so suitable for cellphones, I know tel: prefix calls FaceTime on macOS but on Windows I'm not sure, but I guess it caused to launch Skype.
For more information: you can visit the list of URL schemes supported by browsers to know all href values prefixes.
On
Want to add an answer here for the sake of completeness.
<a href="tel:1234567">Call 123-4567</a>
Works just fine on most devices. However, on desktops this will appear as a link which does nothing when you click on it so you should consider using CSS to make it conditionally visible only on mobile devices.
Also, you should know that Skype (which is fairly popular) uses a different syntax by default (but can be parametered to use tel:).
<a href="callto:1234567">Call 123-4567</a>
However, I think in latest mobile browsers (I know for sure on Android) now the tel syntax should offer a popup of available applications that can be used to complete the calling action.
On
Essentially, use an <a> element with an href attr pointing to the phone number prefixed by tel:. Note that pluses can be used to specify country code, and hyphens can be included simply for human eyes.
MDN Web Docs
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link
The HTML
<a>element (or anchor element), along with its href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.[…]
Offering phone links is helpful for users viewing web documents and laptops connected to phones.
<a href="tel:+491570156">+49 157 0156</a>
IETF Documents
https://www.rfc-editor.org/rfc/rfc3966
The
telURI for Telephone NumbersThe "tel" URI has the following syntax:
telephone-uri="tel:"telephone-subscriber[…]
Examples
tel:+1-201-555-0123: This URI points to a phone number in the United States. The hyphens are included to make the number more human readable; they separate country, area code and subscriber number.
tel:7042;phone-context=example.com: The URI describes a local phone number valid within the context "example.com".
tel:863-1234;phone-context=+1-914-555: The URI describes a local phone number that is valid within a particular phone prefix.
Most modern devices support the tel: scheme. So use
<a href="tel:555-555-5555">555-555-5555</a>and you should be good to go.If you want to use it for an image, the
<a>tag can handle the<img/>placed in it just like other normal situations with :<a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" alt="Call 555-555-5555" /></a>