The topic of this article is simple and nice. We just summarize the options of creating telephone links, or if you prefer “clickable phone numbers”. Today, some of the mobile applications are implemented not as native, but as web apps, and there is often a need to create a link to a phone call (call the user), or send SMS, or call via Skype.

HTML5: make clickable phone number simply

Also on “regular” websites, where we show contact data, it is good (from the user and UX points of view) to make phone number clickable. The user can very easy call the number then (no copy-paste and so on). A phone call needed, or maybe SMS, or Skype call? No problem. HTML5 brings an easy way to create links to phone calls, sms, e-mail…

How to?

Very easy. Simply use the ‘href’ attribute of the link, but with the tel: string, after which put a valid phone number (or skype user name). A few examples below.

A basic clickable phone number:

<a href="tel://+1234567890">Call Me</a>

or:

<a href="tel:123-456-7890">123-456-7890</a>

Skype (a number or username):

<a href="skype:+1234567890?call">Call Me</a>

<a href="skype:user_name?call">Call Me </a>

More universal (callto):

<a href="callto://+1234567890">Call Me</a>

Clickable image (like telephone icon etc) is also very simple to do:

<a href="skype:user_name?call"><img src="/images/call.png"></a>

So the href parameter can deal with following options:

tel: (phone)

callto: (Skype)

sms: (text message)

fax:

Resources

https://davidwalsh.name/phone-link-protocol

http://www.wpbeginner.com/wp-tutorials/how-to-add-clickable-phone-numbers-for-smartphones-in-wordpress

https://www.elegantthemes.com/blog/tips-tricks/telephone-links-how-to-add-call-able-links-ctas-to-your-website

https://developers.google.com/web/fundamentals/native-hardware/click-to-call

Books (PL/EN)

Ruby on Rails

If you are RoR programmer, maybe you’ll need a simple helper, that creates clickable links. An example below.

# Renders telephone number as click-able link.
# Types:
# tel:, callto:, sms:, fax:
#
# Samples:
# <a href="tel:123-456-7890">123-456-7890</a>
# <a href="tel://+1234567890">Call</a>
# <a href="skype:+1234567890?call">Call</a>
# <a href="callto://+1234567890">Call</a>
# <a href="skype:username?call">Call</a>
def clickable_phone_number(phone_number)
  # ret = link_to phone_number, "skype:#{phone_number}"
  ret = link_to phone_number, "tel:#{phone_number}"
  ret
end

More examples for Rails:

https://stackoverflow.com/questions/38821059/what-is-the-rails-way-equivalent-of-mailto-and-tel

http://tammersaleh.com/posts/easy-iphone-telephone-links-in-rails

https://github.com/swordray/tel_to_helper

Summary

Thus, we have in one place quite a complete list of options, that we need when we want to create clickable phone numbers, open telephony or text messages, Skype, or simply e-mail. Have fun!