How to Add Advanced Actions Like Calling, Texting, or Opening an App in a Simple Link
Tricks every web developer should know
"Hey here is the link, call me when you're free."
My mate said this to me and sent me a link on Facebook. I was unaware of what it was and opened it. To my surprise, my mobile dialer automatically opened with a number typed on it. I searched the number on Truecaller to verify to whom it belonged to - it was my friend's. I was amazed by this cool feature and decided to do some research. Hence I am sharing the knowledge I've gathered.
Introduction
HTML allows us to add links that can open the dial pad of a mobile phone directly. This only works on a mobile phone, but Google Chrome has a cool feature that allows you to click this link on a laptop and call via your cell phone. These links are called click-to-call links.
Other Tricks with HTML href URI
We have a few more cool tricks under our bag.
- Open Google Maps pointing to an address
- Open email client with a receiver and pre-written email body
- Open the SMS application with a pre-written SMS
Open Google Maps pointing to an address
You can open an address with Google Maps. These types of links are called Map URLs. These links are supported across platforms. If the native app is installed, the Google Maps app will be opened and the requested action will be performed. Otherwise, the URL launches Google Maps in a browser and performs the requested action. There are a few options:
- Open Google Maps showing the location of an address
- Open Google Maps with the directions to an address
Read the documentation in the resources section to know more about Map URLs.
Open email client with a receiver and pre-written email body
The mailto: tag allows us to open the email client of the user and create a new mail. You are allowed to add a receiver email address, subject, body, Cc email addresses, and Bcc email addresses.
Below is a code snippet with these examples.
Open SMS application with a pre-written SMS (not supported on iOS)
The sms: tag allows us to send SMS to a number with a body. Make sure the body content is in a URL encoded format to ensure symbols and spaces are sent properly. Below is a code snippet with a sample usage.
Bonus
You can include all of the above tricks in your curriculum vitae or resume. All you have to do is use a PDF editor and add links to any text you wish. Use the above-mentioned sample schemes (links) as URLs. An online PDF editor is linked below in the resources section.
I hope you gained something from this.
Resources