5 Examples of Interactive Content in Emails

Hanna Kuznietsova
5 Examples of Interactive Content in Emails
4.7 (93.85%) 13 votes
5 Examples of Interactive Content in Emails
November 8, 2018 | 4,579 views

Interactivity is the number 1 email design trend for 2018 and 2019.

But what is an interactive email? When I started working on this article, I was sure that GIFs, buttons, and hyperlinks are types of email interactivity. After having conducted some serious research, I was astonished to find out how wrong I had been. Well, links can be called interactive, as recipients have to click them. But they take us to a website or a Google Form, however, nothing happens within emails.

Interactive elements are the elements embedded in newsletter templates for emails which require a subscriber’s action right within the email, without going to the website. In other words, by clicking those elements, readers trigger an action and immediately see a result.

Types and use of interactivity in emails

    ➢ survey forms for event-triggered emails and questionnaires;

    ➢ image slider/carousel/rollover effect to display products’ cards;

    ➢ hamburger/accordion menu;

    ➢ search;

    ➢ videos.

We did not mention countdown timers, personalization and other elements which help us update our latest news from Instagram and integrated graphics as they are the context elements in emails. The content is dynamic, but the changes are done automatically, with no interaction from customers required.

Currently, email clients display only some interactive elements. Which is why it is strongly recommended to apply a fallback.

We will tell you how to make interactive emails, then test them and will provide you with alternative options. Stripo offers its totally websafe alternatives to 4 out of 5 elements mentioned below.

Important: we all know that Litmus and Email on Acid are the best tools to test our emails. But here they won’t help us. As these tools provide us with screenshots only. Anyway, they will show whether the blocks have been removed.

The only solution to see if a, let’s say, slider works is to test your interactive email by sending it out to all email clients you and your friends/colleagues have accounts with, desktop and mobile devices. The more the better.

This is the list of the most used email clients in October 2018, according to Litmus.

Stripo-Interactive-Elements-Email-Clients

Note: you should also consider the combination of the devices and email clients.

1. Survey forms and questionnaires

In previous posts, we have said the customer’s purchase should be followed by a survey invitation.

Types of survey invitations:

     a) A single-question survey — it’s not interactive, but is totally web safe

Stripo-Short-Embedded-Questionnaire

For a single-question survey in newsletters, the best solution is to place the very quiz right in the body of the email.

The way it is done:

    ➢ the company inserted 5 images horizontally;

    ➢ added 5 individual links to every image.

Clients clicked the image which matched their opinion.

A good ESP must provide you with a detailed report on how many times each image has been clicked.

Stripo-Short-Quiz

The way it is done:

    ➢ the company inserted 4 images vertically;

    ➢ added 4 proper links to every image.

Once again, clients clicked the image which matched their opinion.

     b) a multi-question survey — embedded in an interactive email template

If you need to ask a number of questions, you should create a quiz form and embed it in your interactive email newsletter, so that your customers do not need to do any superfluous actions — they can vote right within the emails.

The way it is done:

    ➢ you need to create a quiz form

I prefer Google Forms;

    ➢ send it to your email address

when sending the Google Form your way, make sure choose “send via email”, then enter your email address, alter the subject and the message if needed, as all recipients will see it and tick the “include form in email”;

Stripo-Interactive-Emails-Sending-Google-Form

➢ copy the embed code

open the form in your inbox, click-right on the form and select “inspect”. Search for the table align=”center” cellpadding line. Once it is highlighted, hit “CTRL+C” (not right-click and then copy);

Stripo-Interactive-Elements-Search-for-Embed-Code

    ➢ add new HTML block to your interactive newsletter template;

    ➢ insert the embed code into the code editor

you will see “Insert your HTML code in the editor”, click on it and the code editor will be opened. Instead of “Insert your…” between the tags <p> and </p>, you are to put your embed code;

    ➢ done.

Please, watch the GIF to see the entire “embed survey” process.

Stripo-Interactive-Emails-Survey-Code-GIF

Note: the survey forms embedded in our interactive newsletter templates are correctly displayed on all kinds of devices. BUT! The checkboxes are clickable on the desktops only, while on mobile they are not clickable.

Therefore, when opening survey emails on mobiles and tablets, your users will have the link to the Google Form itself (remember, the subject of the form you specified? This is the name of the link. — It is added automatically. Recipients may fearlessly click the link to submit their answers).

Stripo-Interactive-Emails-Link-to-the-Quiz

In my case, it says “Christmas Sales”.

Email clients which successfully passed the test:

All 🙂

This way of embedding survey forms is a totally web safe one.

Note: you can embed it this way with Stripo.email only.

Some email template builders won’t allow you to work with open HTML code, others will allow you to do it, but the embed code alters in their editor and the survey forms look broken even on desktop devices.

The way some ESPs transfer embedded Google Forms:

1. eSputnik — checkboxes are clickable on the desktop devices, on mobiles recipients have the link;

2. MailChimp — does not show the checkboxes at all;

3. Campaign Monitor offers its own basic “survey” block.

The alternative

If for some reason, the survey form, embedded into an interactive email newsletter does not work in your ESP or your email builder does not allow inserting Google Forms, then you may try this method:

Insert a CTA button with the link that takes your customers to your website’s landing page when you have previously placed a survey form.

Stripo-Survey-Maybelline

The way it is done:

    ➢ create a quiz page or embed a Google Form on your website;

    ➢ add a CTA button in your email;

    ➢ wrap the link in the button.

Note: you can test if the links work correctly only when sending a test email to yourself. Links never work in template editors.

2. Image slider and carousel in emails

This is a very interesting way to display a few photos (product items, or items close-up) on one screen. You can choose either an image slider, or a carousel, or an image rollover. The latter is my favorite.

You want to promote the items with prices and descriptions? Then  prepare them beforehand with any photo editor (Stripo offers its built-in one) — place this information right on the images. Thus, all your product snippets in the carousels/image slider/rollover will be informative and unique. This way you definitely can attract inactive users and at least persuade them to click the buttons if not to say convert them into customers.

No matter what tool you’ll use to create image carousels or sliders, you’ll need to make sure they provide you with a fallback.

I used two different tools but their sliders did not work in Gmail, Outlook, etc.

Email clients which successfully passed the test:

    ➢ Apple Mail;

    ➢ Yahoo! Mail.

Stripo-Carousel-Image

The way it is done:

You create an image slider/carousel, then get the embed code, insert in into your interactive email newsletter (via HTML code editor, if your email builder provides its users with this option) or buy a template from the tool that codes carousels.

So, if you decide to create an interactive email with image carousel, you will need a third party tool to create this interactive content, then find out if your ESP supports this code.

For example, in some cases, MailChimp does not support interactivity in emails. Same concerns image carousels and image sliders.

Alternative

Stripo.email offers a totally web safe image rollover effect that is correctly displayed in all email clients and our unique code is supported by all ESPs, including MailChimp.

This is a great way to showcase a few product items in one screen, demonstrate products’ close-ups, hide detailed descriptions or GIFs behind the images.

Stripo-Rollover-Sneakers

3. Hamburger/accordion menu

This type of interactivity in emails is just becoming popular among marketers. Why do we already love it? Because they are meant to hide the long menu behind a single button, i.e. to save precious room in your email. Of course, it is suitable to use the hamburger menu when you offer more than 4 optional tabs. And their second advantage is providing easier navigation along the menu.

You can hardly find such interactive email examples because only a few companies are brave enough to use (read, their email editor is technically ready to provide) hamburger/accordion menus.

The way it should be done:

    ➢ create a hamburger/accordion menu with an appropriate tool;

    ➢ copy the embed code;

    ➢ insert it into the HTML code.

I decided to create the interactive menu with a third-party tool. This is the way this tool promised I would see the menu on my smartphone:

Stripo-Interactive-Elements-Menu

But this is what I actually saw:

Stripo-Hamburger-Menu

I did not even bother to embed this code into my template to try it on other devices as this code is not supported by MailChimp as the tool says on its website.

Beg your HTML designers and developers for help — they may write the code and embed this kind of menu into your templates.

Alternative

You can create an alternative to the hamburger menu easily — place the necessary number of images which reflect the menu tabs with the proper links and alternate names. Thus, when clicking the images, your customers will be sent directly to your website to the appropriate pages.

This Stripo template has accordion menu embedded in it. All you have to do is just replace the links, alter the tabs’ names and work on the interactive email design.

Stripo-Menu-Accordion-Menu-Code

For more detailed information on both alternatives, please, read the blog post.

4. Search in emails

I have not seen one in my inbox yet — either marketers do not embed it into the emails I receive or due to my regular email client.

Currently, you can create this interactive element with two tools only, but the search buttons did not work in Gmail and MailChimp does not support this code.

So, let’s get to alternative then.

Alternative

As an alternative, you can apply a GIF of a search button with a blinking cursor in it. Your customers will think that this is where they should write in the information they are looking for. But the link, embedded in the GIF, will take them to the search page on your website.

This trick is absolutely websafe, consequently the “search button” will be displayed properly in all email clients and on all devices.

Stripo-Interactive-Elements-Search-in-Emails

Creating such GIFs requires a designer’s assistance.

5. Videos embedded in emails

Videos in emails can increase CTR up to 85%. And 65% of recipients are more likely to buy from you when once they have an opportunity to watch a video about the products you promote in emails.

There are four ways to add video in emails:

    1) using a video from Youtube/Video

Email client shows just the thumbnail image — in Stripo, you can replace it with any image you like;

    2) uploading your video in mp4 format

By doing this, you create an interactive email, consequently, the video is played directly in recipients’ inboxes;

    3) using our code combination

If an email client supports interactivity, then users watch the video in the inbox. If the interactivity is not supported by the email client, then customers will be taken to Youtube to see the video;

    4) using a third-party tool

Tools like Viwomail.com or Liveclicker provide you with the embed code.

They, in fact, allow embedding real-time videos.

Note: to avoid copyright violating, we strongly recommend using only those videos you have rights to share.

Uploading MP4 video

I uploaded an MP4 video to a third-party website, then inserted this link into HTML block. This is what I planned to see:

Stripo-Embedded-Video

Our own video in mp4 format was displayed and even played in Outlook 2011 and 2016.

Gmail and Apple emails did not show it. Boo…

Not the best solution to engage your customers.

Using our code combination

Our coder helped me, and wrote the following code combination:

The first two links are the primary links. And the last two ones, they start with <a href>, are the Alternative links. Here we used two videos — one from youtube and the other one was uploaded to another site because we needed an extra link — and one image, as the primary one and as the Alternative one. Just take a screenshot of your video on youtube.

When the primary links do not work, our customers will see the fallback.

For the purity of the experiment, we on purpose used two different images so that we could distinguish which link and image worked.

Email clients which successfully passed the test:

    ➢ iPhone 7 played our videos;

    ➢ Gmail showed the preview image. Only when I clicked on it, the email client showed the link which took me to youtube;

    ➢ Outlook 2011 played my video.

Stripo-Code-Combination

Note: when adding a fallback preview image, make sure you place the play button over it. Otherwise, how would your readers be supposed to know there is an embedded video and that they should click the image?

Alternative

     a) You may use this safe code as an alternative

     b) Modify our template that already contains this code. You will only have to replace the links:

Stripo-Interactive-Elements-Optimization-video

     c) Or add the Video block in your template and inserting the link in it. The system will automatically add the alt name, the play button, and the preview image. In Stripo, you may even replace the thumbnail image with a custom one — and we still do locate the play button over it. Why do we recommend doing this when the link takes to Youtube or Vimeo? Because all email clients display it correctly, absolutely no bans and no surprises.

Summary

Interactive email newsletters do depend on email clients. Most of the customers still see the interactive elements as static images or do not see them at all.

We, at Stripo, do our best to provide our loyal users with the web safe alternatives to interactive elements due to our unique layout method — now interactive emails work in their recipients’ inboxes.

Brief tips and tricks      

     ➢ Interactive email design should be simple, as the focus is on the interactive element.

     ➢ Always! send a test email to all your email addresses and devices as this is the only way to check whether the interactive elements really work or are just static images.

I sincerely wish you create only selling and effective newsletters with our interactive email templates.

If you have any questions, please feel free to ask via Facebook or email.

Be always wide awake in recent email marketing news, guides, articles and how-to’s