Initially, people primarily used mobile phones to call friends and family. But those days are gone. We now use our mobile phones, for virtually everything, from surfing the web to playing video games. Despite this, voice calling still holds its special place. As a result, your emails need to come with your HTML-accessible phone number.

 

Many companies still depend on voice calls to make a living, from Thai take-out eateries to your local spa. 

 

Please keep reading to learn how to get your customers to call you from the HTML newsletters they receive on their web, desktop, or mobile device. 

How Does an HTML Clickable Phone Number Work?

Building links for easy calling has been there for a while now. And for some time, Skype URLs have been popular on the internet. Skype is an application that works on both Windows and Mac computers and Android and iOS phones. In 2017, Skype reported 300 million active users on average every month. 

 

You can also use these systems in HTML email and even personalise the URLs. This implies that you can convert a Skype username or mobile number into a compelling call to action. 

 

However, most browsers have disabled the “Call” feature, which we’ll explain later.

How Do I Make an HTML Clickable Phone Number?

It all boils down to your HTML coding abilities when creating clickable mobile numbers.

 

Coding is currently being taught in public schools, and it’s a part of the standard curriculum. However, this is just a recent development; thus, many people might find coding pretty hard.

 

Fortunately, there is a range of technologies that you can use to simplify the coding process. Websites like Wix and WordPress, for instance, can help you complete simple site designs, even if you don’t have basic coding skills.

 

The same can be said about marketing tools. For example, a firm may allow customers to access and modify email HTML to enable them to design interactive marketing emails. This strategy requires them to have HTML coding skills. But if a user lacks the needed knowledge in this field, they can use our email developer.

How Do I Make a “Click to Call” Link via HTML Code?

While there are many solutions for individuals without HTML coding skills, it’s critical to understand what the codes should look like before working on them.

 

Every email marketer should be conversant with the code to put a clickable mobile number in emails, newsletters, or other marketing content.

 

Before delving into the specific coding skills required for Skype contacts or other material, let’s look at the fundamental HTML code required to create a responsive phone number.

 

To do so, open your HTML editor and follow the steps below:

 

1. Type <a href=“”></a>
2. Note where you put the quotation marks; you’ll be inserting your business mobile number between them. Ensure you don’t use any dashes and type “tel:” before typing the business phone number—for instance, a href= “tel:+YOURNUMBERHERE”
3. Then, enter whatever text you want to link to. The text will be inserted between the ><. The text you input here is the call to action, or CTA, accompanied by your contact number. EXAMPLE: Please get in touch with us at +BUSINESSNUMBER.

 

The following is how the complete code would appear after putting it all together:

 

<a href= “tel:+BUSINESSNUMBER” Call us at +BUSINESSNUMBER</a>

Some Email Customers Cause Coding Problems 

While testing out email newsletters on Gmail and the iPhone, we discovered that both users automatically enclose business numbers with <a> marks. Look at the following example:

 

<a href=”tel:555-666-7777″>555-666-7777</a>

These marks can be a pain for most email designers because the ‘latest’ tel: links are typically bold, deep blue, and challenging to modify with CSS.

How to Beat the Problem: Linking to Telephone Numbers and Skype Usernames

There is a standard solution: add your tel: link to the code in advance. You may also use this approach to put mobile number connections at any point. This might be in your CTA or around a “call me” phrase in your content. For example:

 

<a href=”tel:545-435-7959″>call us today</a>.

 

you can use the same approach in Skype links:

 

Skype us now <a href=”skype:545-435-7959″>545-435-7959</a>. 

 

Please add <a href=”skype:xyzphone”>xyzphone</a> IN your contacts.

 

The main disadvantage of this strategy is that you can’t transform the URLs into tracking links used in summaries because they must be visible to email clients. We utilize the ‘cm_dontconvertlink’ attribute to disable tracking for certain links only:

 

To order a the phone, <a href=”tel::545-435-7959″ cm_dontconvertlink>call us today</a>.

 

Unfortunately, most email systems are equipped to handle tel: links. The recipient’s computer must have Skype installed for skype and a link to respond. Here’s how the top email clients handle support:

 

Desktop email clients	Tel: Support	Skype: Support
Outlook 2007/2010	No	Yes
Outlook 2003	No	Yes
Apple Mail	No	Yes
Windows Live Mail	No	Yes
Thunderbird	No	Yes
Webmail clients	Tel: Support	Skype: Support
Hotmail	No	No
Yahoo! Mail	No	Yes
Gmail	Yes	No
AOL	No	No
Mobile email clients	Tel: Support	Skype: Support
iPhone	Yes	Yes
Android (Gmail)	Yes	No
Android (default)	Yes	No
BlackBerry 6 OS	Yes	No
Windows Mobile 7	Yes	No

 

Although tel: support is excellent on smartphones, it’s flaky on desktops and web clients. On the other hand, Skype: support is incredibly functional on desktops but ineffective on smartphones and web clients (except if you have installed the Skype web toolbar).

Deactivating the Tel: Links in Webmail and Desktop Clients

Given the difficulties of including tel: links anywhere other than mobile email applications, the best alternative is to disable them. This can be accomplished by putting the link contained in the block-level feature (for example, a table), covering it in the tel: link, and then using the following CSS:

 

a.disable-link {

pointer-events: none;

cursor: default;

}

…

<a href=”tel:1800ABCPIZZA” class=”disable-link” cm_dontconvertlink>

   <table>

      <tr>

          <td> Call: +1800-ABC-PIZZA </td>

      </tr>

   </table>

</a>

This tel: link is disabled in Outlook, Thunderbird, Apple Mail, and most browser or webmail configurations. Even with the alternatives mentioned above, Google Voice will still pick up on the tel: links.

 

We’ll use a query to enable the link on mobile email clients:

 

@media only screen and (max-device-width: 480px) {

   a[class=”disable-link”] {

      pointer-events: auto !important;

      cursor: auto !important;

   }

}

The Template Is Available for Download and Modification

Due to the absence of tracking and limits with tel: support. If your firm relies on phone inquiries, you can create some pretty creative ads using this method.

Wrap Up

The mere thought of HTML coding can give some people headaches. Fortunately, this is not always the case with all available technology. 

 

HTML coding may be easily inserted into email marketing and other promotional materials owing to HTML editors and applications designed specifically for marketers.

 

You might use HTML coding to add the following to your emails:

 

• Consumer-friendly call-to-actions
• Clickable numbers
• Email addresses that can be clicked to open a particular email app
• Skype numbers that can be clicked
• Allow customers to send text messages to a specific number