How To Trigger A Phone Call When Clicking A Link In A Web Page On ...

    1. Home
    2. Questions
    3. Tags
    4. Users
    5. Companies
    6. Labs
    7. Jobs
    8. Discussions
    9. Collectives
    10. Communities for your favorite technologies. Explore all Collectives

  1. Teams

    Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

    Try Teams for free Explore Teams
  2. Teams
  3. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs How to trigger a phone call when clicking a link in a web page on mobile phone Ask Question Asked 15 years, 2 months ago Modified 2 years, 5 months ago Viewed 1.2m times 589

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.

Share Improve this question Follow edited Jul 6, 2016 at 20:47 Hutch Moore's user avatar Hutch Moore 1241 silver badge12 bronze badges asked Oct 22, 2009 at 16:52 Frederic Morin's user avatar Frederic MorinFrederic Morin 8,9235 gold badges29 silver badges27 bronze badges 0 Add a comment |

7 Answers 7

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1044

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>

Share Improve this answer Follow edited Jul 12, 2022 at 18:32 Andy's user avatar Andy 6,0142 gold badges31 silver badges53 bronze badges answered Oct 22, 2009 at 21:26 meme's user avatar memememe 12.2k2 gold badges21 silver badges20 bronze badges 9
  • 13 How does this downgrade for desktop? You obviously don't want this to carry the link to desktops right? Or do I have to browser sniff and kill the enclosing tag? – 3Dom Commented Oct 12, 2013 at 14:39
  • 13 @3Dom Try it. It launches or asks for your phone program. – Cees Timmerman Commented Feb 6, 2014 at 13:07
  • 1 @3Dom No problem in desktop Aurora 29.0a2 (2014-02-07). You could use an image link to call (see Andrew's answer), and have the number next to it in plain text. – Cees Timmerman Commented Feb 10, 2014 at 8:50
  • 2 For future reference: on OS X Yosemite and up, this will launch the Facetime app and, if the user has an iPhone, lets them actually call with their desktop/laptop. – Jeff Huijsmans Commented Jun 10, 2015 at 10:50
  • 9 Hello, do not forget to put the plus sign and the country code like this: +1-555-555-5555 if you use Skype, this is a must for instant dialing. – Samuel Ramzan Commented Jul 17, 2016 at 20:31
| Show 4 more comments 84

The proper URL scheme is [number] so you would do

<a href="tel:5551234567"><img src="callme.jpg" alt="Call 5551234567" /></a>

Share Improve this answer Follow edited Jul 12, 2022 at 18:33 Andy's user avatar Andy 6,0142 gold badges31 silver badges53 bronze badges answered Oct 22, 2009 at 17:00 Jess's user avatar JessJess 42.9k6 gold badges38 silver badges52 bronze badges 0 Add a comment | 49

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.

Share Improve this answer Follow edited Oct 12, 2016 at 15:00 salcoin's user avatar salcoin 1071 silver badge10 bronze badges answered May 6, 2014 at 5:38 vvohra87's user avatar vvohra87vvohra87 5,6544 gold badges23 silver badges34 bronze badges 1
  • 4 Does the "tel" protocol work with Skype, or only their "callto" protocol? – Hutch Moore Commented Jul 6, 2016 at 20:15
Add a comment | 27

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> Share Improve this answer Follow edited Jun 7, 2020 at 0:14 Abhishek kumar's user avatar Abhishek kumar 1398 bronze badges answered Nov 12, 2014 at 7:22 GIPSSTAR's user avatar GIPSSTARGIPSSTAR 2,1001 gold badge25 silver badges20 bronze badges Add a comment | 7

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 tel URI for Telephone Numbers

The "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.

Share Improve this answer Follow edited Oct 7, 2021 at 8:46 Community's user avatar CommunityBot 11 silver badge answered Jun 22, 2019 at 0:43 5260452's user avatar 52604525260452 11.6k8 gold badges54 silver badges64 bronze badges Add a comment | 2

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.

Share Improve this answer Follow answered Feb 20, 2020 at 1:52 AmerllicA's user avatar AmerllicAAmerllicA 32.3k17 gold badges143 silver badges166 bronze badges Add a comment | 0

At this time (2021) to work in PC or Tablet and Android (dont tested in IOS but should works) you need add data-rel="external" to the "a" tag, example:

<a href="tel:+576015000000" data-rel="external">Call Me...</a> Share Improve this answer Follow answered Nov 17, 2021 at 22:16 Javier Cañon's user avatar Javier CañonJavier Cañon 1627 bronze badges Add a comment | Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged or ask your own question.

  • The Overflow Blog
  • Why do developers love clean code but hate writing documentation?
  • This developer tool is 40 years old: can it be improved?
  • Featured on Meta
  • The December 2024 Community Asks Sprint has been moved to March 2025 (and...
  • Stack Overflow Jobs is expanding to more countries

Linked

-1 show telephone number as a link in php? 2 Click to call phone number? 3 Call phonenumber on button click on mobile devices 0 How do I create href for mobile dialing screen? 0 Call Now button 0 Is possible to trigger Text Message using Html only? 1 Codeigniter base_url() added for every <a> tag 1 Making http link clickable from JSON file 0 How to set mysql output phone number as clickable call link -5 Quick Call button for responsive site on mobile phone See more linked questions 2 How do I make a link on my mobile site that causes Blackberry to make a call? 10 Automatically dial a phone number 0 How can I link to a phone call link from within an embedded web page in Android? 242 How to create hyperlink to call phone number on mobile devices? 1 Making phone call from mobile web browser 0 How to directly call in mobile by pressing link 0 How to create a link that rings a telephone number on a mobile? 3 Call phonenumber on button click on mobile devices 3 click to call phone extension smartphone 2 Click to call phone number?

Hot Network Questions

  • Why do many PhD application sites for US universities prevent recommenders from updating recommendation letters, even before the application deadline?
  • How can I secure a magnetic door catch with a stripped screw?
  • Short story about a city enclosed in an electromagnetic field
  • Dative in front of accusative
  • Physically/fundamentally/literally, why does a significant voltage not develop across a diode in forward bias?
  • What are "rent and waistline parties"?
  • What explains the definition of true and false in untyped lambda calculus?
  • Help in identifying this dot-sized insect crawling on my bed
  • Optimize rsync when large files move around on the source
  • Grounding isolated electrical circuit from a floating source (EV V2L)
  • why would a search warrant say that the items to search for were the following: hair, fibers, clothing, rope wire, and binding material?
  • Determine dropout spacing for vintage bike frame online
  • What does negative or minus symbol denote in a component datasheet?
  • Unable to declare a function to reset the syntax
  • Do I need to get a visa (Schengen) for transit?
  • How is the associator defined in the Eilenberg-Moore category of a monoidal monad?
  • Factorization of maps between locally compact Hausdorff space
  • Shakespeare and his syntax: "we hunt not, we"
  • Writing rhythm/slash notation on a single line staff?
  • What's an Unethical Drug to Limit Anger in a Dystopic Setting
  • How was fraud by false representation charged in this case?
  • Is it possible to symbolically solve this polynomial system of equations and inequalities with Mathematica?
  • Is it important that my dishwasher's cabinet seals make contact with the opening?
  • When shouldn't I use possessive s?
more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html

Từ khóa » Html Mobile Tel Link