Skip to content

Instantly share code, notes, and snippets.

Last active Oct 9, 2017
What would you like to do?
External Schemes

External Schemes

An external scheme is a link on a webpage that moves you to an application outside of the browser.

Most links use the http or https scheme, which is handled inside of the browser.

<a href="">Visit</a>

We use external schemes all the time, not always knowing what to call them. You’ve probably written one to draft an email.

<a href="">Email</a>

Or maybe you’ve written one to place phone calls.

<a href="tel:+17146334816">Call (714) 633-4816</a>

Maybe you’ve even written one to launch your phone’s map application.

<a href="maps:?q=112+E+Chapman+Ave+Orange,+CA+92866">Locate 112 E Chapman Ave Orange, CA 92866</a>

Without further adieu, let’s get to know common external schemes and what they do.

Common External Schemes


The mailto: scheme lets you automatically draft an email. It saves you the time and effort of copying an email address into your email application.


  • address: the comma-separated list of email addresses getting the message.


  • subject: the title or description of the message.
  • body: the content of the message.
  • cc: the comma-separated list of addresses getting a copy of the message.
  • bcc: the comma-separated list of hidden addresses getting a copy of the message.


An email.

<a href="">Email</a>

An email with a subject.

<a href="">Email me about Bears</a>

An email with CCs.

<a href=",">Email me about Bears and copy my family.</a>

An email with a subject.

<a href="">Email me something important about Bears</a>


The tel: scheme lets you automatically dial a phone number. It save you the time and effort of copying a phone number into your phone application.


  • prefix: the international telephone prefix for the country being dialed. (USA is 1, UK is 44)

  • number: the telephone number to be dialed.


  • ext / postd: the numbers to be dialed after a connection has been made.


A telephone number.

<a href="tel:+17146334816">Call (714) 633-4816</a>

A telephone number with an extension.

<a href="tel:+17146334816;ext=1">Call (714) 633-4816 ext 1</a>



You may see an alternative callto: scheme floating around the interwebs. tel: is the official scheme for telephone numbers. callto: is a proprietary scheme used by Skype and Microsoft. Since most callto: links are appropriately parsed, some developers choose to use in the hope of expanding their compatibility. On this subject, Stuart Parr’s asks:

Do you encourage standards compliance by using tel: or pander to the embrace and extend ethos of Skype and Microsoft and use callto:?

The answer is simple; use tel:.

iOS Safari

iOS Safari searches for phone numbers in regular text and automatically marks them up as tel: links. If your site contains sequences of numbers that may be misinterpreted as phone numbers, consider disabling this feature by using the format-detection meta tag.

<meta name="format-detection" content="telephone=no">


The maps: scheme lets you automatically find a location on a map. It saves you the time and effort of copying an address or location into your map application.




  • q: the address or location to find.
  • saddr: the source address to be used for driving directions.
  • daddr: the destination address to be used for driving directions.
  • near: the address or location near the address or location being found.
  • ll: the comma-separated latitude and longitude coordinates to center the map.
  • t: the type of map to display.
  • z: the level of zoom to use.


A location.

<a href="maps:?q=112+E+Chapman+Ave+Orange,+CA+92866">Find the Orange International Street Fair</a>

Driving directions.

<a href="maps:?daddr=112+E+Chapman+Ave+Orange,+CA+92866">Get directions to the Orange International Street Fair</a>

A location near another location.

<a href="maps:?q=Starbucks;near=112+E+Chapman+Ave+Orange,+CA+92866">Find a Starbucks near the Orange International Street Fair</a>

Proprietary Schemes

A proprietary scheme is an external scheme associated with specific, third-party application. Proprietary schemes are used infrequently on the web, because most computers and phones do not come with that particular third-party application installed. The best practice to launch proprietary schemes is to confirm the launch with the user.

Proprietary schemes are useful stopgaps for linking between a browser and an application, especially on mobile devices. For example, most mobile users aren’t logged into Facebook’s website because they use a proprietary Facebook app. Therefore, linking those users to your Facebook “web” page isn’t terribly useful. This is a situation when using a proprietary scheme is useful to automatically launch your Facebook page from within the Facebook app.

For an example of JavaScript appropriately launching a third-party scheme, see RECOMMENDATION.html.

For a list of hundreds of proprietary schemes, visit


The fb: scheme lets you automatically go to a page in the Facebook application. It saves you the time and effort of opening Facebook and searching or surfing for that page.




  • album/[ID]: the album with the corresponding ID.
  • chat/[ID]: the conversation with the user or group with the corresponding ID.
  • event/[ID]: the event with the corresponding ID.
  • post/[ID]: the post with the corresponding ID.
  • profile/[ID]: the user or group or page with the corresponding ID.
  • upload/checkin/[ID]: the checkin with the corresponding ID.
  • video/[ID]: the video with the corresponding ID.


A Facebook page. (use proprietary schemes with extreme caution)

<a href="fb://profile/119703784116">Orange International Street Fair on Facebook</a>


The twitter: scheme lets you automatically go to a page in the Twitter application. It saves you the time and effort of opening Twitter and searching or surfing for that page.




  • user?screen_name=[SCREENNAME]: the user with the corresponding SCREENNAME

  • user?id=[ID]: the user with the corresponding ID

  • post?message=[TEXT]: the new post page populated with TEXT

  • in_reply_to_status_id=[ID]: the status with the corresponding ID being replied to

  • status?id=[ID]: the status with the corresponding ID


A Twitter page. (use proprietary schemes with extreme caution)

<a href="twitter:/user?screen_name=oisfinc">Orange International Street Fair on Twitter</a>

<h1>Working with third-party schemes</h1>
<p>Directly linking to third-party schemes is highly discouraged. Always link to the appropriate <code>http</code> resource, and use a <code>data-external</code> attribute to link to the alternative scheme.
<p><a href="//" data-alturi="fb://profile/119703784116">Facebook</a>
<p><a href="//" data-alturi="foursquare://venues/4e4b3090fa7671a85ce77d0e">Foursquare</a>
<p><a href="//" data-alturi="twitter:/user?screen_name=oisfinc">Twitter</a>
<p><a href="//" data-alturi="yelp:/biz/orange-international-street-fair-orange">Yelp</a>
<p>Now, a simple onclick function can handle launching external uris.
window.addEventListener('click', function (event) {
var target =;
// bubble up to the nearest anchor
while (target && target.nodeName !== 'A') {
target = target.parentNode;
// if an anchor exists with an alternative uri scheme and the user would like to launch it
if (target && target.hasAttribute('data-alturi') && confirm('Launch the external application?')) {
// cancel the href
// launch it
location.href = target.getAttribute('data-alturi');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment