Dial Up Your Website‘s User Experience With HTML Telephone Links
In today‘s mobile-first digital landscape, making it easy for website visitors to contact your business is more important than ever. One simple yet highly effective way to do this is by adding clickable HTML telephone links to your site.
Also known as "tel links" or "click-to-call" links, HTML telephone links allow mobile users to instantly call your business with a single tap, without having to manually dial your number. This can greatly improve the user experience, reduce friction, and help drive more leads and sales.
In this comprehensive guide, we‘ll walk you through everything you need to know about HTML telephone links, including:
- Why they are beneficial
- How to create them step-by-step
- Where to place them on your site for maximum impact
- How to style them for better visibility and usability
- Other effective click-to-contact options to consider
By the end, you‘ll be equipped with the knowledge and code snippets to start implementing telephone links on your own website. Let‘s dive in!
The Benefits of Making Your Phone Number Clickable
Here are some of the top reasons to use HTML telephone links on your website:
Improved user experience: Clickable phone numbers create a seamless experience for mobile visitors to call you directly from your site. No more fumbling to write down or copy/paste the number.
Increased call volume: Making it easier for people to call you can lead to a boost in phone inquiries. More calls mean more opportunities to build relationships and convert leads into customers.
Better tracking: Using trackable tel links, you can measure how many calls are being generated from your website and even the specific pages driving the most calls. This data can inform your digital marketing strategies.
Competitive advantage: If your competitors aren‘t using tel links, you‘ll stand out by providing a more user-friendly mobile experience. Even a small conversion rate boost can give you an edge.
Enhanced legitimacy: Displaying a clickable phone number shows you‘re a real business that values communication and customer service. This can build trust and credibility with potential customers.
How to Create a Basic HTML Telephone Link
Creating a tel link is quite simple. Here‘s the step-by-step process:
-
Start with a standard HTML anchor link:
<a href=""></a> -
Inside the quotes of the href attribute, type
tel:followed by the phone number you want to link. For example:
<a href="tel:5551234567"></a> -
Finally, place the text you want to display for the link between the opening and closing <a> tags:
<a href="tel:5551234567">(555) 123-4567</a> -
You can also use a vanity number or other text related to the purpose of the call:
<a href="tel:5551234567">Call to schedule your free consultation</a>
That‘s it! When a user clicks/taps on the linked text, it will automatically open their device‘s phone app and pre-fill your number, so all they have to do is hit the call button.
Handling Special Cases: Linking Phone Numbers With Extensions and Country Codes
In some cases, you may want to link a phone number that includes an extension. To dial an extension after connecting, simply add a p after the main number, followed by the extension number.
For example:
<a href="tel:5551234567p123">(555) 123-4567 Ext. 123</a>
The p stands for "pause" and will automatically enter a brief delay before dialing the extension.
If you need to link an international phone number that includes a country code, just add a plus sign (+) before the country code.
For example:
<a href="tel:+15551234567">+1 (555) 123-4567</a>
Where to Place Telephone Links on Your Website for Maximum Impact
Now that you know how to create telephone links, where should you add them? Here are some prime spots:
Header/navigation: Place a tel link in your top nav or header so it appears on every page. Use a prominent button or contrasting color to make it stand out.
Contact page: This is the most logical place people will look for your phone number. Include a prominent tel link above the fold.
Footer: The footer is another common location people check for contact info. Add a tel link near your business address and other contact details.
CTAs: Use a tel link in calls-to-action where you want to drive more phone leads, such as "Call now for a free quote!" or "Speak to a representative."
Mobile popups: Try a sticky bottom bar or popup that appears only for mobile visitors, featuring a tap-to-call button.
Of course, you don‘t want to overdo it by placing tel links everywhere. Focus on the most intuitive spots and use clear, compelling link text to entice clicks.
Styling Telephone Links With CSS for Better Visibility and Usability
By default, tel links will inherit the styles of your standard text links. However, there are some ways you can spruce them up with a bit of CSS to improve visibility and usability:
Use a contrasting color for the link text and/or button background to make it pop. For example:
.tel-link {
color: #ffffff; / white text /
background-color: #ff5000; / vibrant orange button /
border-radius: 5px;
padding: 10px;
text-decoration: none;
}
You can also style tel links differently than other links, such as removing the underline, using a phone icon, or changing the color on hover:
.tel-link {
color: #000000;
text-decoration: none;
}
.tel-link:before {
content: "\260e"; / phone icon /
margin-right: 5px;
}
.tel-link:hover {
color: #ff5000;
text-decoration: underline;
}
Get creative, but be sure to keep accessibility best practices in mind, such as using adequate color contrast and descriptive link text for screen readers.
Beyond Tel Links: Other Ways to Inspire Customer Connection
While telephone links are highly effective, here are a few other click-to-contact options worth considering:
Floating/sticky click-to-call buttons: Make calling you as easy as possible for mobile users by including a floating call button that remains visible even as they scroll down the page.
Callback request forms: Let visitors request a callback at their convenience. Offer an online form where they submit their name, number, and preferred call time.
Live chat: Integrate live chat software on your site to give visitors an instant way to connect with a real person via text chat. Some tools also offer voice and video chat options.
In-browser calling: Newer browser-based calling APIs like WebRTC allow visitors to place a voice or video call directly through their web browser, with no additional software needed.
Ultimately, the right mix will depend on your specific business needs and the communication preferences of your target audience. You may want to experiment with different options and placements to see what generates the best response rate.
HTML Telephone Link Best Practices & Examples From the Wild
To round things out, here are a few tips and best practices to keep in mind when implementing tel links:
- Use local or toll-free numbers whenever possible to avoid long-distance charges
- Consider using a call tracking number to measure performance
- Place tel links in a prominent, intuitive location (e.g. top right of header or a sticky bar)
- Use a mobile-friendly design with thumb-friendly button sizes
- Choose eye-catching colors that align with your brand
- Use action-oriented link text like "Call now" or "Speak to a representative"
- Be sure to test all telephone links regularly to ensure they work as intended
Here are a few examples of businesses creatively using tel links and click-to-call buttons:
[Example 1 screenshot] This barber shop features a click-to-call button with fun, on-brand text: "A cut above the rest is just a call away." [Example 2 screenshot] This home services company places its tel link inside an attention-grabbing sticky header bar for easy access from any page. [Example 3 screenshot] This restaurant uses a subtle yet effective phone icon and transforms the tel link into a tappable button on mobile screens.Ready to Add Tel Links to Your Site?
Adding clickable HTML telephone links to your website is a simple yet powerful way to make it easier for potential customers to reach you. Whether you opt for a basic tel link, a fancy click-to-call button, or a combination of contact options, always strive to provide an intuitive, user-friendly experience for your mobile visitors.
We hope this guide has equipped you with the code snippets, best practices, and inspiration you need to start implementing tel links on your own site.
To learn more about using HTML to create a high-converting website, check out our guide to HTML landing pages and our roundup of the top HTML hacks.
