Creating email links that send SMS messages

 If you’ve spent much time doing email marketing, you’ve likely seen the confusing behavior of excessive opens and mismatched cookies caused by a subscriber forwarding an email (without using that ‘forward to a friend’ link that no one actually uses). Email marketers love seeing their emails getting forwarded.

Referrals are an incredible boost to growth – but for many B2C brands, how many subscribers really have their friends’ email addresses readily available? Not many.

One thing we do have though is our friends’ phone numbers. But how do you share something from an email with a friend via text? A screenshot? Trying to copy a link and write up a text saying ‘hey this is something you should check out’? These methods are full of friction.

With a bit of experimentation, we piloted a solution for our client, Lunchbox. It works a bit like this:

Instead of requiring a user to copy a link, a link is embedded directly into a CTA button or text link in the original recipients’ email. When the recipient then clicks that CTA – they’re re-routed to open their phones’ default messaging app, with a pre-drafted text ready to send as soon as they determine who they want to send it to. Here are screenshots of our example:

How to implement sharing an email CTA via text:

Step 1 – The link in the email itself

If you’ve done a bit of digging, you might’ve found that much like a mail-to links in email: “href=”mailto:xyz@example.com”, there also exists a way to hyperlink a send sms to: href=”sms:+18888675309” embedded within buttons and text links on web pages. However, the drawback to this is that many email clients and many email sending platforms don’t support these SMS link attributes in emails themselves.

So what do we do?

We leverage an email link, to a webpage, then a little bit of magic to automatically open the SMS link itself – here’s how.

Step 2 – Creating the web page

The web page creation process doesn’t need to be difficult, and with an audience of marketers we’ll assume you have the ability to create a page using a CMS like wordpress, squarespace, or shopify. You can name it whatever you’d like, but for click tracking purposes in the email, you probably want it to be easily identifiable (our client used itsmylunchbox.com/pages/share-to-the-fam)

Because we’re eventually routing the user to open their messaging app, the page itself can simply be a duplicate of a landing page that already exists, or your website’s homepage. This page will actually open and then the user will be immediately re-routed to the message, so you may want this page to be relevant to that recipient in case they go back to their phones browser to check out your website further.

Step 3 – A little javascript magic

If you’ve made it this far, don’t let the javascript scare you. Its no more complicated than any tracking code or pixel you’ve placed on web pages for the other marketing tools you already use.

The next step is to add a piece of javascript to the page that looks like this:

<script>
window.onload = function() {
let elem = document.getElementById("loadSMS");
elem && elem.click();
}
</script>

All this script does is tell your web page to automatically click the element with the ID of ‘loadSMS’ when it loads. (Developers are currently shaking their head at this imperfect explanation)

What’s loadSMS? It’s our SMS text link, and we’ll set that up next.

Here’s the link you’ll need to embed somewhere on the page, but because of the display:none styling, this won’t actually be visible on the page. It does get auto-clicked immediately thanks to our javascript:

<a href="sms:?&amp;body=your encoded, pre-drafted message here." style="display:none" id="loadSMS">

Within this link you’ll see:

 your encoded, pre-drafted message here

We need to turn the message you want into a format that is html friendly for the SMS link to work properly.

Step 4 – drafting the SMS message

This part is quite simple. Once you write your pre-drafted message, simply copy the text to something like this free URL encoder.

As you can see, the message:

“MH Digital Group created an awesome process to share email referrals via text message, check it out on their blog: https://mhdigitalgroup.com/blog”

Gets encoded in this way:

MH%20Digital%20Group%20created%20an%20awesome%20process%20to%20share%20email%20referrals%20via%20text%20message%2C%20check%20it%20out%20on%20their%20blog%3A%20https%3A%2F%2Fmhdigitalgroup.com%2Fblog

You then replace it with the placeholder text in the html link resulting in:

<a href="sms:?&amp;body=MH%20Digital%20Group%20created%20an%20awesome%20process%20to%20share%20email%20referrals%20via%20text%20message%2C%20check%20it%20out%20on%20their%20blog%3A%20https%3A%2F%2Fmhdigitalgroup.com%2Fblog" style="display:none" id="loadSMS">

And the result here if you’re on mobile (if you’re on desktop, it’ll ask you to open another app, we address this in step 5):

Try it here

Step 5 – optimizing for mobile only

Now that we’ve got our link working, we need to go back to our actual email. Because we are triggering the native SMS app on our email recipients phone to trigger the message, we want to actually only show this ‘Share via SMS’ link on mobile devices only, rather than via desktop.

This can be done using media queries or more simply toggling the show/hide on mobile/desktop on most drag and drop email builders like Klaviyo.

Step 6 – launch

And that’s it! Now, you can have your email recipients share content or calls to action from your emails without having to rely on the ‘forward to a friend’ or pesky copy/paste which can be annoying on mobile devices. By sharing through SMS, we increase the likely engagement from the recipient of the SMS share on the other end.

Here’s what it looks like from end to end:

Want help implementing this? Let’s chat.