This is the calling one (probably more useful if the clickable text is words, as the iPhone auto-detects phone numbers and does this automatically):
<a href="tel:1-408-555-5555">1-408-555-5555</a>This is the SMS one, which overrides the default calling behavior:
<a href="sms:1-408-555-1212">New SMS Message</a>Not sure what other things these links might work on… Might be a little dangerous as having non-standard links that don’t work or bring up errors is kinda bad UX. Best for mobile-only sites. If someone know if this works on Android/Blackberry/Other Mobile, comment below.
I think using “callto:” instead of “tel:” is more useful – these work with Skype on the desktop too.
skype automatically finds telephone numbers anyway, just as the iphone does… I think specifying a link via href would really only be useful for the sms option, or if you wanted to use some other text instead of the phone number:
callto:is proprietary.tel:is RFC, works on many devices and is understood by Skype.Should be combined with some device detection script, which would keep us from non-standard link on unsupported devicec.
As an alternate, you can disable auto-detection on browsers using the meta tag (More Info)[http://digitalfortress.tech/tricks/creating-direct-click-to-call-sms-links/]
will this work with android too.
if you hold-click on a phone number, android will bring up a dialing menu. I think you need a dedicated app to actually make the call, however, at least when I tried it on a 2.2 tablet
yes “tel” tag works on the anriod phone.
Yes i can verify it works on android with one exception it doesn’t auto call you have to hit call yourself…so all it does is bring the number up when trying to call but texting opens a new message.
hey team,
stumbling back onto this thread, email signatures in mind.
means by which we might optimize a phone number to play ball with a wide-range of devices/interfaces/clients when clicking from an email signature (mac mail in this case)?
e.g. i’m joe recipient in calgary, got an email from a colleague in buenos aires (yep) – skype happens to be my preferred mode of contact right about now.. any means of making it so that i can choose between ‘phone,’ ‘text,’ ‘skype,’ when i click the telephone number on my phone or desktop?
sure would be awesome – but too idealistic a query?
Reference IETF Standard RFC3966 [ http://tools.ietf.org/html/rfc3966 ]. I have verified that this works on most mobile units… Click (tap) the link, and you’re taken directly to the dialer with the phone number auto-filled. Include *meta name=”format-detection” content=”telephone=no”* in the header to force this format on all devices.
This is new to me, but let me try
Any idea how to make this work when the phone number contains the “number sign” #? I don’t know about other countries, but this is pretty common in Spain for functions such as activating or deactivating services like roaming, etc. I’ve already tried HTML-entifying it as # but phone won’t still get it. They just seem to link to the phone number without the # part…
Yes Enrique, replace the # with two zeros… It works the same on telephones.
rather than
“+ 40 012345678” you use
“00 40 012345678”
#has to be URL-encoded as%23.Hola Enrique, lograste solucionar el problema con numeral(#)?
A mi me funciona en dispositivos Android colocando %23 pero en dispositivos Apple no logra hacer la llamada.
I just used this technique on a mobile site I made for a client. Works beautifully. Thanks!!!
Thank you for this great tip! I just used it on a site and it was so easy-once someone so gracious shows you how! : )
I swear that you get the links if you implement microformat structures as well.
how do u set it up to like not just call one person like how do u make it go to like ur missed calls and contacts and stuff for iphone
Jenna, too… many… likes… like.
This honestly hurt my brain to read.
Use of “tel” results in a 404 error on desktop mac. “callto” works.
Another source touted as better incorporates use of jQuery, though I have yet to try it out.
http://zekefranco.me/mobile/ios/phone-number-conversion-for-mobile-devices/
I am redesigning my web site right now and I used this for my contact section. Thanks!
I am trying to add a call link on an image into an email. I tried both tel: and callto: using the phone # with no “-” and with them. It’s just not working. When I open the email in browser and I tap this time on the text number, it works. Any idea what else I can try?
Here are my notes for how I had success with this. I usually create two html files for my eblasts. One for sending and one for viewers to land on if they are unable to view the images in the email. The difference I found is that the email handles it differently that safari.
Hope this helps.
For the eBlast, set the link on the phone image to be
tel://1-###-###-####
But for the browswer either desktop or mobile, set the link to be
callto:1-###-###-####
On the desktop, clicking with initiate skype if available.
On mobile device within the browser, clicking will initate the phone call.
And what about big numbers in text? I you have “some text about something 000000000” in iphone this 00000000 becomes a call link automatically….
Try this and let me know if it works.
<meta name="format-detection" content="telephone=no" />Found at http://uxcellence.com/.
for linking to sms does anyone know if possible to pre-populate the body field for the text message
Hi
What if I want to ad an extra code that one dials when the call is connected? Can that be made automated?
showing W3c error ….
For those that have been asking, the “tel” link does work on Android. The “callto” link does NOT. This is per my Samsung Note II running Jelly Bean.
It’s working for me Thanks to all of you guyz :)
One thing that works really well for setting up an SMS link texting form if you don’t want to spin up a back end is Link Texting.
We built it to make this issue a thing of the past.
This article comes with great information.
I was trying to add the tag but forgot the exact spell to use.
Also the sms tip is so awesome ^_^
We use http://notifynotify.com to capture emails and store them in a database. They have a really simple editor and even a recurring reminder scheduler which is off tap.
Same Q’s Himu. Is there a way to insert DTMF after the call has been established? For instance, I want to contact 555-555-5555, when the called party picks up, I want the system to automatically press # then 2 # etc… etc…
For anyone wanting a simple means of alternating how the tele number is presented (mobile vs non-mobile) :
HTML:
CSS:
Employ whatever device size suits your particular project!
-Enjoy
Two thumbs up!
Is there a way to have a link that not only dials the number and then dials an extension? Essentially it would have to dial, pause for a bit and then dial another set of numbers.
I know back in the dark days of dial-up you could do this by inserting commas between the 2 sets of numbers, but not sure it it would work with html.
The “Reference URL” to this page https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Articles/sms.html#//apple_ref/doc/uid/TP40008054-SW1 no longer worked. Is there another page out there? Thank you.
How would you add this tag to a PDF using itextsharp with razorpdf? I need both the controller syntax and the razor html markup syntax.
Hi, is there a way to add 2 phone numbers in the same href?
No. What is your use case?
hey Dudes, I’m having trouble getting html code for website phone click to call link – it works but only if you click and hold. How could I get it so it just needs a quick click (rather than click and hold)??? (like all the others out there!)
Anyone able to get this to work in iOS 10? Seems to be broken. Anyone getting it to work?
I just added the SMS snippet to my new wordpress site and it works perfectly!! Thanks!!
http://forgeryexpertusa.com/minamaze
Today I tried a “Tel” link on a website that belongs to a website hosting service, using my smart phone, a Sony Xperia Z1 (Android).
The link had a combination of numbers and letters as “1-877-SHAWBIZ”.
I tapped the tel link and it worked, my phone translated the letters to numbers and made the call.
This style of letters instead of numbers is fine for websites where people would normally access using their mobile device, but for websites that are more “desktop access” because of what they do, as hosting services, is a very poor idea when someone wants to call their support line.
When I hover my cursor (desktop) over the number+letters TEL link, I get the same combination in the browser’s bottom status bar.
I suggest to those who use this number+letter combination, is to make the HTML “link” itself as all numbers and the visible text as number+combination. This way you create better accessibility / visibility for both mobile and desktop users.
Basically the HTML link itself should always be numbers as that provides a fall back and translates the letters to numbers on a mere cursor hover.
Also use “title=” attribute for links ALWAYS. Same reason and only use numbers in the “title” value. The link example above did not have a “title” attribute and it was a large company using skilled web designers.
Somebody asked above how to add an extension after the main number. Just add ,,,,xxx to the end of your phone number where xxx is the extension number. The four commas give the phone time to ring and pick up, or if the is an automated switchboard in use.
Okay, guys. To continue the conversation (and I have not read anyone ask this question), I am having trouble adding the code to both call and text from the same phone number on my website. Scenario is: I want people to be able to call me or text me from one link or phone number on my website. Can anyone help with that protocol? Should be easy. But then all of life should be simpler than it is.
How to do scope styling for this statement if using tel?