Not every conversion starts with a click. Some start with a call.
A click-to-call phone number is a simple link inside your email that, when tapped on a mobile device, opens the user’s phone app with the number already filled in.
It’s a small addition with big potential.
Start by testing a mobile-friendly click-to-call button. If your audience bites, explore adding one for desktop too. And don’t stop at click-through rates—loop in your support or call center team to track whether call volume actually goes up when the email goes out. If it does, congrats, you’ve just built a bridge from inbox to conversation.
In this guide, we’ll show you exactly how to do it, what to test, and how to measure real success, including how to link a phone number in HTML, how to include a phone number in email, and even when not to use tel links in email. So let’s get started.
How to Link Phone Numbers Using HTML
The process is simple and involves using a specific HTML tag. Here’s a step-by-step guide on how to link a phone number in HTML:
The Basic HTML Tag
The core of this technique is the <a> (anchor) tag, which is used to create hyperlinks. For phone numbers, you’ll use a special protocol called tel:. The basic format looks like this:
<a href="tel:+1-555-555-5555">Call Us Now</a>Let’s look at a few practical examples as well to learn how to make phone number(s) clickable in email.
1. Basic Clickable Number
If you want the number itself to be the clickable text, here’s the code for it:
<a href="tel:+1-800-123-4567">+1-800-123-4567</a>2. Clickable Text with A CTA
This is great for buttons or clear instructions. Here’s the code.
<style>
.call-button {
background-color: #007bff;
color: #ffffff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
</style>
<a href="tel:+1-800-123-4567" class="call-button">Call Now</a>3. Clickable “Call Now” Button
For a more prominent call to action, you can style the anchor tag to look like a button using CSS. Like this:
<style>
.call-button {
background-color: #007bff;
color: #ffffff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
</style>
<a href="tel:+1-800-123-4567" class="call-button">Call Now</a>This is a common use case of click to call HTML code that helps businesses make their support accessible. And it also illustrates exactly how to link a phone number in HTML for mobile-first experiences.
NOTE: CSS support in email clients can be inconsistent.
While many modern clients support it, it’s always a good idea to test your email across various platforms to ensure it renders as expected. For critical calls to action, consider using simple, inline CSS or a reliable email-building service.
When Not to Use Tel Links?
While tel: links are a great feature for mobile, it’s important to consider their limitations and UX issues on desktop.
Cases of the HTML phone link not working on desktop are too common.
If your content is exclusively for desktop users, a tel: link is not necessary and might even be confusing. Clicking the link on a desktop without a configured VoIP application (like Skype or Microsoft Teams) might lead to an error message or simply do nothing, frustrating the user.
If a user doesn’t have a default application set, clicking the link may result in a browser error, a generic pop-up asking the user to choose an application, or no response. Since this scenario highlights when not to use tel links in email, it’s best to display the number in plain text as a fallback.
Best Practices for Adding HTML Phone Link in Email
A few small mistakes can break the experience, especially on mobile devices. To make sure your click-to-call links are reliable, user-friendly, and effective, keep these best practices in mind, whether you want to hyperlink phone number in email or explore click-to-chat options:
- Always include the country code. Omitting it might cause the call to fail or route incorrectly, especially if your audience is spread across different regions.
- Use the + sign. Including a plus sign before the country code (like +1 for the U.S. or +44 for the U.K.) follows international dialing standards. Most mobile devices recognize this format and automatically process the number correctly.
- Keep the number clean. Stick to a simple format that works across devices. Hyphens and spaces are usually fine, but avoid using parentheses, slashes, or other special characters.
- Provide a clear call to action. Instead of just linking a number, give a reason to tap, especially when you hyperlink a phone number in email.
- Test on different devices. Clickable phone numbers may behave differently on iPhones and Android phones. Always send test emails and verify the link opens the phone app with the number pre-filled.
How to Add WhatsApp Link in Emails
Another way to encourage engagement is to add a WhatsApp link in email using WhatsApp’s click-to-chat feature. This lets users start a conversation without saving your number.
The basic format for a WhatsApp link uses the wa.me domain, followed by your phone number in international format.
Basic Link Structure:
https://wa.me/[YourPhoneNumber]For a U.S. number like (123) 456-7890, the link would be:
https://wa.me/11234567890Include a clear CTA like “Chat with us on WhatsApp” when you add a WhatsApp link in email. This will encourage action and keep the transition from email to chat smooth.
Where to Place Phone Numbers for Max Visibility in Emails
When adding an HTML phone link in email, placement matters just as much as the link itself.
If you’re wondering how to include a phone number in email in a user-friendly way, start with the most visible areas.
The most common location is the email signature, as this is a standard place for contact information.
Source: Gimmio
For a more direct call to action, consider placing the number in the header or at the top of the email, especially for promotional or customer service messages. This ensures the number is one of the first things a recipient sees.
You can also embed a phone number within the body of the email when it’s relevant to the content. This is useful for providing a direct solution or next step within your message, such as “If you still need help, please call our support team.”
In all cases, use a hyperlink phone number in email format (via tel: links) to ensure it’s tap-friendly.
And if you’re not sure how to include a phone number in email elegantly, anchor it with a solid CTA like “Call Now” or “Talk to a Rep Today.”
Wrapping Up!
Clickable numbers may seem like a minor detail, but they pack a serious punch in terms of UX. With a simple line of click to call HTML code, you reduce friction and make it easier for subscribers to reach you quickly.
Whether you’re learning how to link a phone number in HTML or want to improve engagement with a phone number in email, a few lines of code can drive real results.
Need help crafting better emails? Reach out to our design and dev team today, and let’s get started! We’ll help you hyperlink phone numbers in email the right way.
Susmit Panda - Content writer
