Digital Fortress Logo
Digital Fortress

A coders paradise

Creating click to call, click to sms links

Reading Time 2 min

Almost every developer is pretty familiar with the mail-to scheme to send an email via a link. Today I would like to introduce two less used schemes – click to call and click to sms that will allow your users to call or sms using a link. These schemes are fully supported by all the modern browsers. Before diving deep into the know-how’s, lets go over the format for

1. Creating a link to email

The mailto: scheme

    <!-- Basic mailto scheme format -->
    <a href="mailto:example@email.com">Email Me!</a>
    <!-- To include a cc or bcc, you could do -->
    <a href="mailto:example@email.com?cc=example@email.com">Email Me!</a>
    <a href="mailto:example@email.com?bcc=example@email.com">Email Me!</a>
    <!-- You could even include a subject/body -->
    <a href="mailto:example@email.com?subject=Email%20Subject">Email Me!</a>
    <a href="mailto:example@email.com?body=Email%20Body">Email Me!</a>
    <!-- you can add a Bcc, Body or more elements by using &amp; (ampersand) -->
    <a href="mailto:example@email.com?bcc=example@email.com&body=Email%20Body">Email Me!</a>

In the above example, we have used %20 for " " (space) which is the URL encoded version of the space character.

click to email link

Here’s the email link in action: Send an email!

2. Creating a Click to call link

The tel:scheme

  • Wrap a number in a link with the tel: scheme
  • Use international dialing format, that is, use the country code(for example, +33 for France), the area code and then the number. The area code and the number could be separated by a hyphen(-) which will improve auto-detection by browsers as well improve readability for the user, although using it is not mandatory.
  • When the user clicks, usually there would be a confirmation pop-up and if accepted, on supported devices it would take you straight to the dialing screen where you could place the call directly.
    <!-- Basic tel scheme format -->
    <a href="tel:+1-303-499-7111">Call Me!</a>
    <!-- Dial a number with an extension (example: 55)-->
    <a href="tel:+1-303-499-7111,55">Call Me!</a>
    <!-- You can also send DTMF tones to access tone-controlled services 
         like helpdesk systems, voicemail, etc.. -->
    <a href="tel:+1-303-499-7111;postd=p123#">Call Me!</a>
    <!-- The above will dail the number and take a pause for a second,
         then dial 123#. DTMF tones compatibility is limited depending on
         every device. My recommendation is to avoid using it. -->

Try out this feature now:
Call Me!

Modern mobile browsers are able to automatically detect phone numbers and enable click to call. However, some of them like Chrome for Android can detect phone numbers but do not wrap the number in a hyperlink or apply any special styles. In such cases, you may wanna disable auto-detection by including the following meta tag in your head element
<meta name="format-detection" content="telephone=no">

Click to call, sms via html

3. Creating a Tap to Sms link

The sms:scheme

  • Wrap a number in a link with the sms: scheme
  • Use the international dialing format as used in the tel:scheme.
    <!-- Basic sms scheme format -->
    <a href="sms:+1-303-499-7111">Sms Me!</a>
    <!-- You can add sms content as follows -->
    <a href="sms:+1-303-499-7111?body=Interested%20in%20your%20product">Sms Me!</a>
    <!-- %20 is used instead of space to ensure you do not break the html -->

As of May 2018, the sms scheme is well supported by the latest browsers however some systems do not allow Sms’s to unknown numbers in order to avoid expensive charges for international messages. In this case, clicking the link will prompt an open message but without any destination number. Certain older versions of iOS have known to be incompatible to the sms scheme. Here’s a git repository which makes Sms links compatible across the older versions as well.

If you’re on a supported mobile platform, you can try clicking this link: Send a SMS!

There are many more supported click to action links that can be used besides these. Some of them are Skype skype:username, Whatsapp whatsapp://, Android Playstore market://, Google Talk gtalk:action?jid=username and so on. Find a complete list here

Note that Vanity Numbers like tel:"+1800FLOWERS" are not supported as defined in the RFC standardref and hence you should only use numbers with the tel, sms URI schemes.

References
– https://developers.google.com/web/fundamentals/native-hardware/click-to-call
– https://webdev-il.blogspot.fr/how-to-make-html-link-to-call-phone
– http://www.mobilexweb.com/click-to-call-links-mobile-browsers
– http://forums.mobirise.com/how-to-make-call-sms-from-html

Leave a Reply