Email, Phone Home: Initiating Voice Calls from HTML Email Newsletters

Article first published on October 2011, updated in March
2019

At one point in time, mobile devices were primarily used for
calling friends and family. However, those days are long gone, and
we’ve since graduated to using our iPhones and Androids to do
everything from playing Angry Birds to surfing the web.
Nonetheless, voice calling still has its place in the world.

There are plenty of businesses that still rely on phone calls to
make their living—from Thai take-out restaurants to your local
salon. Perhaps even you and your clients fit into this category
too.

Read on to discover how you can get your subscribers to place
calls from an HTML email newsletter received in their desktop,
web, or mobile email client. Featured is an example HTML email
newsletter (pictured) that you can download, adapt, and use to
learn more about this technique.

What is click to call?

If you check email on a mobile device, you may have noticed how
some models parse phone numbers in messages and turn them into
clickable links. These links allow you to conveniently place calls
by automatically switching from the email app to the phone
interface on your device.

As of recently, Gmail has started doing the same thing,
similarly launching Google
Voice
in a manner to make it easy to place calls via their
telephone service.

How Does click to call work?

Creating links for convenient calling is nothing new. Before
either of the above were utilizing these links, Skype
URLs
 were commonplace on the web. Skype is a program that can
be installed on Windows and Mac machines, as well as on iOS and
Android phones. As of 2017, Skype hit an average of 300
million
monthly active users.

These methods are adaptable for use in HTML email. The resulting
links can be customized, meaning that you can turn a phone number
or Skype username into a bold call to action. To demonstrate, look
at the example template (click to view):

Phone numbers in email demo

The “Call:” button has been disabled in most browsers, and
this will be discussed later in this article.

How do I make a phone number clickable in 2019?

When learning how to make phone numbers clickable in 2019, it
all comes down to how skilled you are in HTML coding.

Coding is something that is now taught in schools as a part of
their regular curriculum. However, that wasn’t always the case,
so, coding can seem quite complicated for many.

However, there are quite a few tools available to help simplify
the process. For example, websites such as Wix and WordPress allow
for simple website setups, with no prior coding knowledge
necessary.

The same is available for marketing tools as well. Here at
Campaign Monitor, for example, we allow clients to access
and edit email HTML
to help them create interactive email
campaigns. This option does require HTML coding knowledge. However,
clients can always make use of our if they don’t have experience
in this area.

How do I make a “Click to Call” link via HTML code?

Although there are other options for those who are inexperienced
with HTML coding, it is essential to have a basic idea of what your
codes should look like before you start working on it.

One of the most basic HTML codes that email marketers will want
to be familiar with is how to make a clickable
phone number
in their email, newsletter, and other promotional
materials.

Before covering the detailed coding knowledge needed for things
such as Skype numbers and other content, we will look at the basic
HTML code needed to make a clickable phone number.

To do this, open your HTML editor and then follow these steps in
order:

  1. Start your code with <a href=“”></a>
  2. Make a note of where the quotation marks are, because you’ll
    now enter your business phone number between the quotes. Make sure
    to enter it without dashes and enter “tel:” before you start
    typing your number. For example: <a href=
    “tel:+YOURNUMBERHERE”
  3. Next, you’ll add any text you wish to link. This text will go
    between the ><. The text that gets entered here will be your
    call to action (CTA) followed by your phone number again. EX:
    >Call Us at +YOURPHONENUMBERHERE<

Below is how the entire code looks once you’ve put it all
together:


Some email clients cause coding headaches

When testing email newsletters on the iPhone and in Gmail, we
found that both email clients automatically wrap phone numbers
with <a> tags like in the following example:

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

These tags can be a massive annoyance
for email designers
, as these ‘new’ tel: links tend to be
bold, bright blue, and often difficult to style with CSS.

Beating the headache: linking to telephone numbers and Skype
usernames

There is a universal fix for this issue: preemptively adding
your own tel: links to the HTML code. Using this method, you can
also add phone number links wherever you see fit. For example, this
can be in your call to action or surrounding a “call us now”
line in your copy:

To order a pizza, <a href="tel:555-666-7777">call us now</a>.

The same can be done with Skype links:

Skype us on <a href="skype:555-666-7777">555-666-7777</a>. 
Don't forget to add <a href="skype:abcpizza">abcpizza</a> to your contacts!

The downside of this method is that, for the links to be
detectable within email clients, we can’t convert them into
tracking links for use in Campaign Monitor campaign reports. To
turn off tracking specifically for these links, we use
the cm_dontconvertlink attribute:

To order a pizza, <a href="tel:555-666-7777" cm_dontconvertlink>call us now</a>.

However, not all email clients know how to deal with tel:
links. Skype has to be on the recipient’s machine for skype:
links to work. With this in mind, here’s what support looks like
across the major email clients:

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

While tel: support is great across mobile clients, it can be
unreliable on the desktop and in webmail clients. Conversely,
skype:  support is extremely successful on desktop clients, but
ineffectual on mobile and webmail clients (unless you have the
Skype web toolbar installed).

Disabling tel: links in desktop and webmail clients

Given the inherent troubles in featuring tel: links in anything
but mobile email clients, the best option is to turn them off. This
can be done by nesting
the link text in a block-level element
 (e.g., a table),
wrapping this with the tel: link, then applying the following
CSS:

a.disable-link {
        pointer-events: none;
        cursor: default;
}
...
<a href="tel:1800ABCPIZZA"  cm_dontconvertlink>
   <table>
      <tr>
          <td> Call: +1800-ABC-PIZZA </td>
      </tr>
   </table>
</a>

The tel: link above is inactive in Outlook, Apple Mail,
Thunderbird, and most browser/webmail combinations. However, Google
Voice still picks up on tel: links, even with the workarounds
above.

In mobile email clients, we’ll activate the link by using a
query:

@media only screen and (max-device-width: 480px) {
   a[class="disable-link"] {
      pointer-events: auto !important;
      cursor: auto !important;
   }
}

Nicely done, if I say so myself.

<!–

The template, yours to download and tweak

This isn’t a perfect solution due to the lack of tracking and
limitations with tel: support. However, if your business relies on
phone inquiries, then you can build very innovative campaigns
around this technique.

Much appreciation is due to vlanzoiz, for the inspiration and
early testing, and Panic, for allowing me to use
their design again
. If you have any questions or comments on
initiating phone calls from email newsletters, we’d love to hear
them in the comments below.

Again, following is the HTML code to create a clickable phone
number for you to use and tweak as you see fit.


Wrap up

The thought of HTML coding alone can cause some to experience
instant headaches. However, with all the technology that is
available in 2019, it doesn’t have to be this way.

Thanks to HTML editors and programs built with marketers in
mind, inserting HTML coding into your emails, newsletters, and
other marketing materials can be simple.

HTML coding could help you insert the following into your email
campaigns:

  • Simple-to-follow CTAs for consumers
  • Clickable Phone Numbers
  • Clickable email addresses that open right into a given email
    app
  • Clickable Skype numbers
  • Enable consumers to send a text message to a given number

Want to take your email campaigns to the next level?
With Campaign
Monitor’s
Email Builder and HTML editor adding clickable
phone numbers and other CTAs is a breeze!

The post appeared first on Campaign Monitor.

Source: FS – Email Marketing Blogs!
Email, Phone Home: Initiating Voice Calls from HTML Email Newsletters