Introduction to Click to Call/SMS/MMS

It’s a pretty simple feature but yet powerful. Click to Call allows you to make an instant call by just clicking on the numbers that are mentioned on the screen. Just tap the phone number on the screen and making the call simply known as Click to Call.

In order to make this happen let’s take two simple steps:-

  1. Wrapping the numbers in the schema represented by simple tel:
  2. It’s always advisable to keep the format separated by hyphens and also have the international format.

Process to link the phone number for Click to Call

The simple process of having the phone number linked is just using a simple hyperlink with the scheme tel:

The following code snippet works well with any phone for that sake.

Now this renders as following when hooked up with the HTML page

Call the pizza Delivery
+1 (333) 432-1223

Now when this is opened onto your mobile phone the view is as follows:-

Click To Call

Click To Call

You might have seen that direct calls are not being made, this is in order to protect the users from various scams which will auto dial a number.

The big question is what happens when you are on Desktop??

While you are on Desktop, most of the times the default app for calling is either Facetime, Skype, Google Voice or Microsoft Communicator. Any one of these should trigger for sure and when this happens you just need to confirm and talk to the person you like.

Always use International format for Phone Numbers

May it be just a simple phone number which is local in nature of an international number, Always use the (+) symbol in order to make a phone call along with the (-) for the numbers to be formatted. It plays a major role in enabling the browsers to autodetect the number. If these formats are being used you can be sure that one can place a call. At times certain browsers don’t detect the numbers if just written in plain text format.

NOTE: Most of the times browsers automatically detect the phone numbers and wrap it up in order to make it accessible. In the case of Safari the wrapping is done making it look like a hyperlink, so in order to make the browser not automatically detect the phone number just use the meta tag mentioned below:-

Bonus for the People who Dare

So as we have a bonus section, let’s check out why can’t we just send and SMS or an MMS.

Yes we can call it click to SMS and Click to MMS

SMS sms:

SMS our Pizza Guy
+1 (333) 432-1223

MMS mms:

MMS your pizza pic
+1 (333) 432-1223

Have a look at the representation below:-

Click to SMS, Click to MMS

Click to SMS, Click to MMS


Though this is a great feature to use one should be careful so that there should not be autowrapping of the phone numbers that Safari (Mobile) does. Who does not want the full control?

Leave your comments and reviews about the tutorial and let us know what else do you guys want to see.

Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This