How to Create Clickable Phone Numbers with HTML in Email – Litmus


A responsive email list is the first step to building brand awareness. Leveraging your email list to build your phone list is a good next step. 

Luckily, you can integrate the two by embedding click-to-call buttons in your email. This allows your audience to give you feedback, raise pressing concerns quicker, and communicate with you from multiple platforms. 

Keep reading to learn what types of emails benefit from click-to-call phone numbers, and a step-by-step guide on how to add them.

What is a click-to-call phone number?

A click-to-call phone number, or a clickable phone number, is a link inside an email that opens up a calling app. So if you’re opening the email on your phone, the link will open up the phone app with the phone number pre-populated.

When adding a clickable phone number to your emails, start out by testing a click-to-call button for mobile devices. If your audience engages with it, then test a desktop version.

Keep in touch with your support/call center team to see if calls increased when the email went out. Combined with a good click-through rate, a high call volume would be an indicator of success.

Why are clickable phone numbers important in email?

There a few reasons why a clickable phone number is important in an email: 

  • It builds trust with your audience
  • It requires less effort from your audience than writing an email
  • It gives customers an immediate way to connect with your company

Instant calling is an advantage when your email content encourages conversation and engagement. A clickable phone number benefits sales, customer support, and consultation emails.

1. Sales emails

Eliminate steps between prospects wanting to contact you and actually contacting you.

2. Customer support emails

Empower customers to quickly reach out for support. An already flustered customer might not want to type (and wait for)  an email reply. By using a clickable phone number, they can get in touch faster.

Source: Farfetch

3. Consultation emails

Brands with in-house consultants (like stylists, dietitians, or technicians) can benefit from an HTML clickable phone number button. Customers can use them to directly get in touch with experts —increasing connectivity and brand familiarity.

This example adds a clickable phone number for a stylist. 

02 - How to Create Clickable Phone Numbers with HTML in Email - Litmus
Source: Ajio Luxe

4. Feedback emails

Clickable phone numbers in feedback emails used post-purchase (or post-interaction) make you more accessible to your customer.

In this example, the clickable phone number is used to get feedback on the customer’s shopping experience. 

03 - How to Create Clickable Phone Numbers with HTML in Email - Litmus
Source: Ajio Customer Support

5. Return package emails

Placing return requests via request forms and shopping apps can be tedious—using a clickable phone number to place a return request is much easier for the customer.

This example uses an HTML clickable phone number for return requests as part of an eco-friendly initiative. 

04 - How to Create Clickable Phone Numbers with HTML in Email - Litmus
Source: Tata Cliq Luxury

Do not include a click to call button if you can’t support an increased call volume. You don’t want subscribers to be calling only to be put on hold. And if you have a large Apple Mail audience, keep in mind that the click-to-call feature on Mac opens FaceTime. Not sure where your unique audience engages? Find out with Litmus Email Analytics.

How to make an HTML phone link in an email

Step 1

Start creating your link as you would any other.

If you’re using a button, use a bulletproof one. Bulletproof buttons are call-to-action (CTA) buttons built with code instead of images. Because they are built with code, they work even if your customer is in a low-network area or has turned off image downloading. This makes bulletproof buttons more reliable and widely accessible.

Note: make sure to add bulletproof clickable phone numbers to emails specifically requiring subscribers to get in touch. (For example, sales emails that include a ‘book a call’ CTA.

Step 2

Instead of adding a URL in the href, add “tel:” to create a click-to-call link and then add the phone number: 

If you’re adding a ‘click to text’ link, you can also add "?&body=" after the phone number, much like you would do with a “mailto:” link. Then you’ll need to encode any message you want to include as a URL. (You can use online tools like URLEncoder to help with this). 

A click to text link would look like this:

Step 3

Next, use mobile class to hide the click-to-call links for desktop computers:

.mobile { display: none !important; }

  

Then you can use a desktop class to provide a linked version that is either a landing page with a contact form or a mailto link with an email address:

.mobile { display: none !important; }

  

Step 4

You can style click-to-call links by targeting based on html attributes:

a[href^="tel"] { color: #1F7F4C !important; }
a[href^="sms"] { color: #C54D3F !important; }

This works in many email clients, but putting the styles in-line is the best way to ensure support everywhere.

Note: Email testing these links is key! (For example, we’ve heard that click-to-text doesn’t work in Gmail, Yahoo, and Outlook.com– but they worked when we tested them for this article).

Here are two versions of click-to-call and click-to-text in Litmus Builder.

How to style an HTML telephone link in an email

You can style the HTML phone link as buttons, links, or an image wrap-around. 

The clickable phone number is styled as a ‘Get Help’ button in this example. 

05 - How to Create Clickable Phone Numbers with HTML in Email - Litmus
Source: Apple

There are two different ways to style an HTML telephone link. 

  1. Style it in the heading section of the emails. To do this, use attribute selectors like this: a[href^="tel:"] or a[href^="sms:"].
    or…
  2. Style it inline (steps detailed above). If you do this, style it with an underline. 

Carin Slater, Email Marketing Specialist at Litmus also offers this pro-tip: “For inline styles, a hover-over is a stylistic enhancement. When your reader hovers over the clickable link, the enhancement makes the underline disappear. This tells your reader that the link is an interactive element.”

Note: Gmail doesn’t support clickable phone numbers in the header section. So, if you have a large number of subscribers on Gmail, add styles inline. 

Add a click to SMS link

A clickable messaging link allows your customers to text you instead of calling. It works like a clickable phone number, but can be a more convenient option for some customers.

Clickable SMS links can also be used to get your customers to opt into SMS marketing, join exclusive SMS groups, or access instant customer support.

In this example, a click to SMS link is styled as a ‘chat with us’ CTA button.

06 - How to Create Clickable Phone Numbers with HTML in Email - Litmus
Source: Shop Rescue Spa

In this example, a click-to-SMS link encourages customers to join an exclusive SMS list for an event launch.

07 - How to Create Clickable Phone Numbers with HTML in Email - Litmus
Source: Really Good Emails

Don’t forget to test your clickable phone number!

Make sure to send yourself versions of your email and test them on multiple devices to ensure the interaction works as you intend. And don’t forget to test your HTML clickable phone numbers or SMS links for mobile and desktop devices for each version.

blog cta buttons issues - How to Create Clickable Phone Numbers with HTML in Email - Litmus

Ensure your designs come across right

Broken emails lead to less conversions. Preview your emails across 100+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time.

The post How to Create Clickable Phone Numbers with HTML in Emails appeared first on Litmus.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

We Know You Better!
Subscribe To Our Newsletter
Be the first to get latest updates and
exclusive content straight to your email inbox.
Yes, I want to receive updates
No Thanks!
close-link

Subscribe to our newsletter

Sign-up to get the latest marketing tips straight to your inbox.
SUBSCRIBE!
Give it a try, you can unsubscribe anytime.