Design Marketing Structure How-to
~ 15 min read
rate it
20 April 2019

6 Examples of Interactive Content in Emails

Stripo / Blog / 6 Examples of Interactive Content in Emails

Interactive emails are the number 1 design trend in email marketing for 2019.

Now that Google AMP 4 Emails is widely discussed, we all almost forgot that this is not the only way to build interactive emails.

In this guide, we’ll show how to embed the most popular interactive elements in emails with Stripo.

Types and use of interactivity in emails

The interactive elements, that we are going to present here, render perfectly well in all email clients — if the interactivity is not supported by an email client, it gets replaced by a totally web safe fallback.

  • CSS-animated button for promo emails;

  • survey forms for event-triggered emails and questionnaires;

  • image carousel to display a few product items in one screen in promo emails;

  • rollover effect to display product items from different angles and their features in promo emails;

  • accordion for all types of campaigns to make interactive email newsletters more compact;

  • videos to better present our new product, to congratulate customers on holidays and to explain to newbies how to use our tool.

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

We will show how to make an interactive email and then will test each of them.

Important to note:

It’s commonly known that Email on Acid and Litmus are the best tools for testing emails. But they won’t help us now, as they provide screenshots only. However, it’s still reasonable to use them as they show whether the blocks have been removed or not.

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

Here is the list of the most used email clients in March 2019, according to Litmus.

Stripo Interactive Email Design Market Share by Litmus

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

1. CSS-animated button

CSS-animated buttons. We all use CTA buttons in emails, why not animate one when recipients mouse over or click it? It draws their attention, adds a shade of gamification, and helps you comply with your brand design if the buttons on your website are CSS-animated.

Stripo Inteactivity in Emails CSS-Button

Previously, our users needed to add an element of the CSS-code via the HTML code editor to animate buttons. Which was not easy.

On April 15th, we released a new feature — Interactive button, which changes its colors once you put a mouse cursor over it.

The way it’s done:

  • go to the "Appearance" tab;

  • then open the "General settings" tab;

  • enter the "Button" tab;

  • toggle the "Highlighted hovered buttons" button;

CSS-animated button_Interactive Emails

  • set text style, such as font, its type, and font size;

  • set button color, font color;

How to Build Email with Stripo Setting Colors for the Button

In this screenshot, the “button color” stands for the primary color, highlighted button color stands for the color your users see when you move the mouse over it, and text color stands for the font color. If you do not want the hover effect in your emails, just apply to the highlighted button color the same color which you set as the primary one;

  • these settings will be applied to all the buttons in your template;
  • done.

2. Survey forms and questionnaires

On our blog, we have already mentioned a 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 websafe

Despite the fact that it’s not an interactive email design, I put it here, as it still requires some actions from recipients.

Stripo Interactive Emails Web-Safe Surveys in Emails

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 Interactive Emails 4-questions Survey

The way it is done:

  • the company inserted 4 images vertically;

  • added 4 URL 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 in 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”;


  • 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);


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


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 Interactiv Emails Embedded Questionnaire on Mobile

In my case, it says “Christmas Sales”.

Email clients that successfully passed the test:

  •  Gmail, AOL, Yahoo! Mail, and in Google Chrome, Mozilla Firefox, Safari, Opera. It works on desktops only.

Mobile users and those recipients who use other email clients will see the link. They might also be directed to the Google Form once they click the "Submit" button (in, Apple Mail).

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

Note: currently, is the only email template builder that allows embedding Google Forms this way.

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 How to Make an Interactive Email Alternative to Embedded Questionnaire

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.

3. Image rollover effect in emails

By using image rollover effect, you can provide recipients with a close-up of some products, you can showcase them from different angles, hide details of the product behind its snippet, and play some games with recipients when it’s reasonable.

Stripo How to Make an Interactive Email offers a totally websafe image rollover effect that is correctly displayed in most email clients and our unique code is supported by all ESPs, including MailChimp.

Important to note:

The image rollover effect is meant for desktop devices only. On mobiles, recipients will only see the first frame.

The way it’s done:

  • add an image in your template;

  • in the settings panel, toggle the “rollover effect” button;

Stripo Interactive Email Design Button for Rollover Effect

  • add the second image;

  • done!

Email clients that successfully passed the test:

  • Yahoo! Mail;

  • AOL;

  • Thunderbird;


  • Gmail;

  • Apple Mail;

  • Outlook 2003;

  • Outlook Web;

  • Outlook for Mac.

Please, find new ideas, recommendations, and requirements for the images in this blog post.

4. Image carousel in emails

Image carousel is a very interesting way to display a few photos of product items on one screen.

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 convert them into customers.


Stripo Inteactivity in Emaila

The way it is done:

  • build a carousel with a proper tool. I used Freshinbox;

  • copy the embed code;

  • in Stripo, drag the HTML basic block and drop it in your email template;

  • double-click it to activate the settings panel;

  • insert the embed code.

So, if you decide to create an interactive email with an image carousel, you will need a third-party tool to create this interactive content, or use our prepared interactive newsletter templates with an image carousel that’s already built — you’ll only have to replace the images and paste your URLs.

Unfortunately, only some ESPs support this type of interactivity in emails: for instance, MailChimp does not support interactivity in emails.

Email clients that successfully passed the test:

  • Apple Mail;

  • Apple iPhone;

  • Apple iPad;

  • Yahoo! Mail.

Other users see the image you’ve set first.

5. Accordion

This type of interactivity in emails is just becoming popular among marketers. Why do we already love it? Because they are meant to hide long texts behind bullets, i.e. to save precious space in your emails on mobiles.

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) accordions in emails.

I have not found the embed code online that would fit in our editor well but this Stripo email template already has accordion embedded in it. All you have to do is just replace the links, alter the tabs’ names and work on the interactive email design.

The way it’s done:

  • Open this interactive email template in the editor;

  • Double-click any item in the accordion you need to edit;

  • You can make all the changes to the text, font, font size, etc. either in the settings panel, or in the code, as shown below:


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

6. Videos embedded in emails

Videos in emails can increase CTR by 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:

  • using a video from Youtube/Vimeo

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

  • uploading your video in mp4 format

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

  • 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;

  • using a third-party tool

Tools like 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 an HTML block. This is what I planned to see:


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:

<video poster="" controls="controls" width="100%" height="176"><source src="" type="video/mp4"><a href=""><img src="" width="320" height="176"></a></video>

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 that 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 would your readers be supposed to know there is an embedded video and that they should click the image?


  • you may use this safe code as an alternative;
  • modify our template that already contains this code. You will only have to replace the links:


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


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 websafe 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 them via Facebook or email.

Francisca Pheng Soto 1 month ago

Una consulta, recién estoy conociendo estos tipos de emails. ¿Es posible poner un video interactivo? Por ejemplo, donde el usuario pueda desplazarse por algún lugar como en los tour virtuales.

Hanna Kuznietsova commented to Francisca Pheng Soto 3 weeks ago

Buen día. Lo siento por la respuesta tardía. Desafortunadamente, esto no es posible en esta etapa. Dado que la mayoría de las veces, estos videos se crean sobre la base de un iframe, y los clientes de correo electrónico no admiten este elemento en la actualidad. Pero puede proporcionar a los usuarios un enlace a la versión web de sus Tours virtuales (que se carga en su sitio web) en un correo electrónico. Puede obtener más información sobre cómo compartir un enlace a un video aquí: Le deseamos envíos exitosos y productivos.

Paula Navarro 5 months ago

Muy buen post! En la actualidad Viwom es Viewed, la empresa ha evolucionado incorporando numerosas mejoras. Yo lo utilizo habitualmente y me parece que es la mejor herramienta del mercado para insertar vídeos en los correos electrónicos. Además es compatible con todos los formatos. En este enlace se puede obtener más información:

You might be interested in

← previous next →
2 days ago · 11 min read
Halloween Email Design & Subject Lines Examples

The “spookiest” and the funniest holiday is coming and our duty is to get ready for it. How can you make your Halloween email successful? There are three ingredients: performing subject line; eye-catching design; value offer. Save time on email production with this customizable Halloween email template Use it An interesting fact about Halloween — according to the NRF investigations, in 2019 Americans spent $8.8 billion on Halloween. This year, during the COVID-19 times, everyone is looking for new ways to celebrate Halloween....

Design Marketing Templates
Use-Data-from-Google_Featured Image
6 days ago · 9 min read
How to Pull Data from Google Sheets into Emails

Ever thought of pulling data from Google Sheets into emails to automate the email production/email update process?  Well, it is possible. It is possible even without your interference. We want to remind you what real-time content is: Real-time, aka dynamic, content allows updating your email content after the email has been sent. This means that users always see only fresh content, actual prices, and descriptions, they will not see announcements of sales after the sales ended. How does it work?...

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