Interactive Email Newsletters

Hanna Kuznietsova
Interactive Email Newsletters
4.6 (92%) 10 votes
Interactive Email Newsletters
March 3, 2018 | 2,945 views

Interactive emails are the number 1 design trend in 2018. According to Litmus recent survey, 43.8% of marketers are going to implement interaction in their newsletters this year.

What is an interactive email? When I decided to write an article about it, I was sure that GIFs, buttons, and hyperlinks are a kind of email interactions. After having done some serious research, I was astonished to find out how wrong I had been. Well, links can be called interactive, as the customers click them. But they take us to website or google form, and nothing happens within emails.

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

Types and use of interaction in emails

     ➢ survey forms for event-triggered emails and questionnaires;
     ➢ image slider and carousel to display products’ cards usually without detailed description;
     ➢ hamburger menu;
     ➢ search;
     ➢ videos.

We did not mention the 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, without customers’ interaction.

We will say more about these elements in one of the upcoming articles.

Currently, only some email clients display the interactive elements. Which is why it is strongly recommended applying the fallback.
Today we are going to tell you how to make interactive emails and test them and will provide you with the alternative options.

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


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

We tested our interactive messages in all the email clients and devices above.

In our tests, we paid close attention to only them.

Important: we all know that Litmus is the best tool to test our emails. But here it won’t help us. As Litmus provides only screenshots of the way your email will look like on any device.

The only solution here is to test interactive emails by sending them to all your email clients, desktop and mobile devices, friends, and colleagues.

Survey forms and questionnaires

We have previously said the customer’s purchase should be followed by the survey invitations. As a rule, they are embedded into the emails. And the customer chooses simply if he or she is satisfied with the service or the product.


For a one-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 on the example:
     ➢ they inserted 5 images;
     ➢ added 5 links to every image.

Clients clicked the image which corresponded their opinion.

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


But if you need to ask a number of questions, you should create a quiz form and embed it in your newsletters, 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;
     ➢ copy the embed code;
     ➢ in the template, add a new HTML block;
     ➢ insert the code into code editor;
     ➢ done.

Useful tools:
     ➢ Google Forms;
     ➢ SurveyMonkeys.

Must confess that embedded into our templates Google Forms are opened correctly in the desktop devices only. But with mobile devices the situation is worse:
Either I could not click the buttons on iPhone or the questionnaire was not responsive on Android. I had to horizontally scroll.

But our template builder honestly warned me about it. This is mobile preview:


Email clients which successfully passed the test:
     ➢ iPhone 7 (it did not work on iPhone 5 and 6);
     ➢ Apple mail (native mail);
     ➢ Apple iPad;
     ➢ Outlook 2011;
     ➢ Yahoo! Mail.

When it comes to long questionnaires, the alternative, and also the most popular way is to insert a CTA button with the link that takes your customers to your website’s landing page. Of course, buttons and links are not an interaction, but this is way better than long questionnaires in an email body or just an absence of the form.


The way it is done:
     ➢ create a quiz page on your website or a google-form;
     ➢ add a CTA button in your email;
     ➢ insert the link into the button.

Note: you can test if the links work properly only when you send a test email to yourself. Links never work in template editors.
Important: when creating a google-form, you should permit access to it to all clients, otherwise they will not have a chance to fill out the form. Some other tools can set limits for answers.

Image slider and carousel in emails

This is a very interesting way to display some of your items. You can choose either image slider or a carousel. My favorite one here is a hover effect. But, to my great despair, it cannot be displayed on mobile devices. As we do not have a mouse for our phones, we are unable to simply put the cursor of the mouse on the image but we can only click. Those who open the emails in mobile devices, and this number equals at least 53% of the recipients, will not even notice this option. Which is why here we can choose only between image slider and carousel.

You want to promote the items with prices and description? Get prepared beforehand with any photo editor — place this information right on the images. Thus, all your images in the carousels will be informative and unique. Of course, this way you can attract the customers.

Useful tools:
     ➢ Freshinbox;
     ➢ Emailmonks.

The perfect thing about Emailmonks is that they provide you with a fallback. But it also doesn’t work for mobile devices.

So, here is what I created with Freshinbox:


Email clients which successfully passed the test:
     ➢ Apple Mail;
     ➢ Yahoo! Mail.

As long as most of the email clients and mobile devices block this feature, you can place all these 3 images in a row, and Stripo.editor will place images one below another when displaying on any mobile device.

Add buttons, description, and links which take directly to the appropriate webpage.

Hamburger menu

This type of interaction in emails is just becoming popular amongst marketers. It is supposed to be implemented for mobile devices. Why do we already love it? Because they are meant to hide the long menu behind a single button, i.e. to save precious space 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 easier navigation along the menu.

Unfortunately, not all companies have implemented this option and only a few will do in 2018.

The way it should be done:
     ➢ create a hamburger menu with an appropriate tool;
     ➢ copy embed code;
     ➢ insert it into the CSS code.

Useful tools:
     ➢ Email Monks.

I decided to create the menu with their help. This is the way Emailmonks promised me I would see this on my smartphone:


But when I sent a test message right from their website to my email, something went wrong:


I did not even bother to embed this code into my template to try it on other devices.
Beg your HTML designers and developers for help — they may write the code and embed this kind of menu into your templates.

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.

Search in emails

This is the most useless option in emails, I suppose. But still, its popularity is growing higher and higher every day.

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

But I created one with Emailmonks. This is the test Search Button I was supposed to see in my inbox:


They said that all desktop devices will see this feature in Apple and Gmail. But in fact, in my Gmail account I saw this:


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 into 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.

Embedded videos in emails

According to ConstantContact, service that has tested 200 mln emails with videos, state that CTR of emails with video is 28%. Of course, the clients click to watch the video. Who knows maybe this will help you boost your conversion rate. At least, it will entertain your customers.

There are four ways to use video into the template:
     1) use a video from youtube;
     2) upload your video in mp4 format;
     3) use our code combination;
     4) use a special tool, and they will offer you the code.

Useful tools:
     ➢ Liveclicker.

The last tool allows embedding even real-time videos.

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

Same as with all elements above, you have to work with HTML or CSS code.

We tested two different emails: with our video from youtube and with the video we had uploaded to our website.

This is what I planned to see:


The first test was recognized as a screenshot on all Apple devices. Gmail and Outlook did not display them at all. Boo…

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

Gmail and Apple emails did not show it.

But our HTML designer helped me here, 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 Alternative.

For the purity of the experiment, we purposely used two different images so that we can distinguish what image was used.

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.


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

You may use this safe code as an alternative. Why did I say “safe”? Because most of the codes for interactive features have “I-frame” at the beginning. But email clients tend to consider them as spam. They let us send these messages not more than 3 times. When you do it for the 4th time, email clients just block your account.

So the best idea might be to try to insert your videos the usual way:

add the HTML block to your template and insert the link in it. The system will automatically add the alt name, the play button, and the preview image. Why do we recommend doing this when the link takes to Youtube or Vimeo? Because all email clients display it correctly, no bans.


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.

It is up to our email clients to deliver featured emails without any loss. Maybe, someday soon they will learn to do, as Google has already announced.

For justice’s sake, we should admit that Yahoo! Mail passed all of our tests, except the one with the video. But should we create interactive emails for one single domain?

If you are brave and enthusiastic enough, here are some tips for you:
     ➢ Stripo designer has added the opportunity to embed interactive elements in your emails.
     ➢ To make your interactive messages responsive, change their width to 100%. In your HTML/CSS code it should look this way:


     ➢ Interactive email design should be simple, as the focus is on the interactive element.
     ➢ Send a test email to yourself to all your emails and devices as this is the only way to check if the interactive elements are really working or just being static.

I sincerely wish you create only selling and effective newsletters.

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