Adding HTML Telephone Links and Iphone Text Number

Article By Digamber Rawat on

HTML Telephone Link

In this tutorial, I am going to teach you how you can add HTML telephone link which is excellent and must have feature for all the websites. When you try to add a phone number to your website page, it just appears as a static text which doesn’t offer zero interaction with your visitors. You can solve this problem by implementing a telephone link using HTML. As we all know, most people access the internet via their smartphones these days. So having telephone HTML link can be quite useful.

It’s time for you to feature your phone number in clickable areas. Also, you need to make sure that they can directly call the number with a single click, instead of copying and pasting the phone number in static text form into your dialer. It’s inconvenient.

Just as in the case of a one-click email feature, you can feature your phone number in a manner which makes it easier for your visitors to use. As for making one-click email possible, we use mailto: in the href.

<a href="mailto:dummy@gmail.com">Test Email</a>
With just one click, you will be able to launch your default mail client. The email address present in the mailto: inside href will be populated in the To field. We intend to achieve the same with the HTML telephone link feature. Here we will be using the tel: attribute to implement HTML for telephone link. Here you specify the number you wish to dial.

Let’s take a look at an example of HTML telephone link below:

<p>Call now <a href="tel:0987654321">0987 654 321</a></p>
 
<p>Order now <a href="tel:0987654321">0987 654 321</a></p>

How to Set up HTML Telephone Link for Skype?

In case if you wish to make the call from Skype using HTML, then you need to use callto: attribute in place of tel: This way you can implement telephone link in Skype.

<p>Call now, <a href="callto:0987654321">0987 654 321</a></p>

Implementing HTML Text Telephone Link for iPhone

When it comes to the iPhone, you need to keep something in mind. iPhone automatically detects phone numbers in HTML layout. Therefore, it would be ideal to present the number as a text by adding hyphens.

Let’s see the example for iPhone telephone text link below:

<a href="tel:1-234-555-6789">1-234-555-6789</a>

In case if you want to send an SMS to the number using iPhone, you should use the following code:

<a href="sms:1-234-555-6789">Send Some Cool Messages!</a>
Digamber Rawat

Feel free to contact me, If you are looking for a freelance full stack Developer, with the following skills: Mongo DB, Express JS, Angualr 2+, Node JS, Loopback JS, Firebase, Ionic Framework and WordPress. I also offer remote contracting service to the clients across the globe. Hire Me