With the rise of mobile web surfing the benefits of calling directly from a web page have become more realistic. Making a call-able link is easy with the use of HTML. HTML provides browsers with protocols such as tel which are used to add clickable phone numbers. Every browser responds differently to these protocols. Some launch the phone app with the number on the display, waiting for you to call while others directly make the call.
Approach:
- Add tel:(a number) inside href attribute of the anchor tag.
- You can even add country code for international calls as a part of the number.
- Some phone numbers have an extension. You can add p before the extension that will cause a one second delay before dialling the next phone.
Syntax:
<a href="tel:(countrycode)(NUMBER)p(extension)"> Text </a>
Example 1: This example create a call-able link using HTML.
<!DOCTYPE html> <html>
<head>
<title>
How to make a call-able
link using HTML ?
</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Make a call-able link using HTML
</h3>
<a href="tel:9876765678">
Call to GeeksforGeeks support
</a>
</body>
</html>
|
Output:
-
Before click on the link:
-
After click on the link:
Example 2: This example create a call-able link using HTML.
<!DOCTYPE html> <html>
<head>
<title>
How to make a call-able
link using HTML ?
</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Make a call-able link using HTML
</h3>
<a href="tel:9876765678p107">
📞 Help
</a>
</body>
</html>
|
Output:
-
Before click on the link:
-
After click on the link:
Article Tags :
Recommended Articles