Design Marketing Structure How-to
~ 21 min read
2 comments
128644 views
rate it
11 December 2020

8 Examples of Interactive Content in Emails

Stripo / Blog / 8 Examples of Interactive Content in Emails

Interactive emails have been among the TOP design trends in email marketing for years.

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

The good thing is you can build all those emails with Stripo or just customize our prebuilt Interactive email templates.

We've prepared 15 Interactive email templates for your convenience
Browse

Types and use of interactivity in emails

The interactive elements, that we are going to present here, render perfectly well in major email clients:

  • CSS-animated button for promo emails;

  • star rating to let users rate your services without leaving the email;

  • embedded questionnaires for surveys to let users answer your questions right in emails;

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

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

  • embedded videos to better present your new product, to congratulate customers on holidays, and to explain to newbies how to use your tool;

  • anchor links to take users directly to the part of an email they are interested in the most.

We did not mention countdown timers, personalization, and other elements that 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 create 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 with interactive content 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 November 2020, according to Litmus:

Interactive Email Marketing_Share of Email Clients 2020

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.

CSS-Animated Button_Stripo Webinar Invitation_Interactive Email Campaigns

(Source: Email from Stipo)

Previously, you needed to add a CSS-property to the button in the HTML code editor to animate buttons. Which was not easy.

Last year, we released a new feature — The interactive Button/Highlight Hovered 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 "Highlight 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

  • these settings will be applied to all the buttons in your interactive HTML email;
  • done.

In this screenshot, the “Button color” stands for the primary color, highlighted button color stands for the color your users see when they put the mouse cursor over it, and text color stands for the font color.

Time to apply a hover effect to your buttons to add some fun to emails

2. Star rating

It's not a secret that a customer’s purchase should be followed by a survey invitation email.

There are a few types of surveys. But the star rating is the easiest one for users as they don't need to go anywhere — they rate your services directly in an email.

Interactive Newsletter Ideas_Star Rating in Emails

Clients rate your product/tool/services. Of course, you and your ESP must prepare the "Thank you" landing pages. They can be really short. The main goal of those pages is to just acknowledge customers that you have received their responses. 

You may also build two "Thank you" pages. One is for those who gave you 4 or 5 stars — here you just thank users. And the other one is for those who gave you 1-3 stars — here you may add a link to Google Form where ask uses why exactly they are they did not like your tool, or tell them you are sorry they are so unsatisfied with it. Be sure to contact them shortly to find out the reason.

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

The way it's done:

This process requires three simple steps:

Step 1. Embedding the code

  • drop a 1-column structure in your template;
  • the drag an "HTML" block in the structure;
  • left-click this block in the template to open it;

Click on HTML Block in the Template to Open It_Interactive HTML Email

  • remove the content of the block and paste in it the embed code given below.
<style>
    .rating {
        display: inline-block;
    }
    .rating td {
        background: #DDDDDD;
    }
    .rating td:hover,
    .rating td:hover~td {
        background: #FFE173;
    }
    .rating td a:active,
    .rating td a:focus,
    .rating td a:visited {
        background: #FDB140;
        display: inline-block;
    }
    .rating td:active~td {
        background: #FFCF20;
    }
</style>
<table class="rating es-table-not-adapt" dir="rtl">
    <tbody>
        <tr>
            <td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
            <td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
            <td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
            <td><a href="https://esputnik.com" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt="https://secure.esputnik.com/7nqE9Vq2mes" title="https://secure.esputnik.com/7nqE9Vq2mes"></a></td>
            <td><a href="https://esputnik.com" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt="https://secure.esputnik.com/7nqE9Vq2mes" title="https://secure.esputnik.com/7nqE9Vq2mes"></a></td>
        </tr>
    </tbody>
</table>

The code was written by our Product Designer Roman Burdyga.

Step 2. Replacing the links to a "Thank you" page

Remember we previously said that you'll need to build the "Thank you" page? We now need to add links to it in our code.

Replace the underlined links in the code with the link to the "Thank you" page. 

Lines 1-2 stand for the stars 4 and 5. So here you should paste the link to the page where you just thank your customers for rating you.

Lines 3-5 stand for the stars 1, 2, and 3. Here you should paste the link to the page where you bring your apologies and let users know your customer support team will contact them shortly.

Replacing Links in the Code_Interactive Content in Emails

Step 3. Aligning the rating

To center align the rating, you need to:

  • open the code editor for the structure with the rating. To do so, left-click the "Structure" sign in the email, then click on the "Code editor" symbol above the template;

Working on the Code of Interactive HTML Email_Stripo

  • paste the code given below in the "td class="esd-block-html" line right above the code you embedded in the previous step.
align="center"

Interactive Newsletters_Center Aligning Ratings

Your email is ready to go.

Email clients that successfully passed the test:

This rating successfully passed all major email clients, including Gmail, AOL, Yahoo, Samsung Mail, and even Outlook both on desktop and mobile devices.

Utilize star ratings to find out if customers are satisfied with your services

Alternative

Even though interactive Star Rating worked perfectly well in all email clients I could find to test, still there are some chances that you might want to use another way of enabling users to rate you in emails.

Alternatives to Interactive Newsletters_Ratings

(Source: Really Good Emails)

The way it is done:

  • you insert 5 images horizontally;

  • to every image, you add respective links to the "Thank you" pages.

3. Embedded multi-question surveys

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 excessive actions — they can vote right in emails.

Embedded Questionnaires_Interactive HTML Email

The way it is done:

  • send it to your email address;

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

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 a new HTML block to your interactive newsletter template;

  • open it, and erase “Insert your HTML code in the editor” the block has in it;

  • paste the embed code in this block;

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

In my case, it says “Christmas Sales”.

Email clients that successfully passed the test:

  •  Gmail;

  • AOL;

  • Yahoo! Mail;

  • Rambler.ru 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 Mail.ru, Apple Mail). 

For the users who prefer other email clients, as a fallback, you may also add a link to Google Form in your email and specify that users need to click the link to take the survey.

Interactive Newsletter Examples_Embedded Google Forms

Please note: Currently, Stripo 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 their editor alters the embed code and the survey forms look broken even on desktop devices.

Embed forms in emails to get more feedback from customers

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

(Source: Email from Maybelline New York)

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 check if the links work correctly only when sending a test email to yourself or in the preview mode. Links never work in template editors.

4. Image rollover effect in emails

By using the 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 appropriate.

Stripo How to Make an Interactive Email

Stripo.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 image.

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;

  • Mail.ru;

  • Gmail;

  • Apple Mail;

  • Outlook 2003;

  • Outlook Web;

  • Outlook for Mac.

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

12 min read

35452 views 4.4

12 Ideas to Use Image Rollover Effect in Emails Read on

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

(Source: Really Good Emails)

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.

Email clients that successfully passed the test:

  • Apple Mail;

  • Apple iPhone;

  • Apple iPad;

  • Yahoo! Mail.

Other users see the image you’ve set first.

Still, need more Interactive newsletter ideas to utilize? Keep reading.

6. 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 newsletter 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:

Stripo-Menu-Accordion-Menu-Code

For more detailed information on both alternatives, please refer to the "How to Add Menu in Email with Stripo" blog post.

7. Videos embedded in emails

Interactive email marketing can be really beneficial: Videos in emails, for instance, can increase CTR by 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:

  • 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 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 the 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:

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:

<video poster="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" controls="controls" width="100%" height="176"><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><a href="https://www.youtube.com/watch?v=8gqqANVWdjU"><img src="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" 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;
  • Apple Mail played the 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 on MacBook 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?

Get the most out of your promo emails with embedded videos

Alternative

Add the Video block in your template and paste the link into 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. 

8. Anchor links

Unlike all other interactive newsletter examples, this interactive element is not meant to entertain your customers. It is meant to take them fast to the part of the email they are interested in the most.

Anchor Links in Interactive Emails

(Source: Email from Mercedes-Benz)

The way it's done:

  • build the menu for your email;
  • now in your interactive email, right above the section of the email a respective menu tab is supposed to take users to, drop the basic "HTML" block. Don't worry. It will not affect the design of the template;

Adding HTML Block to Email Templates_Interactive Email Campaigns

  • left-click the HTML block in the template to open the code editor;
  • remove its content and paste the code sample given below, where "yourlabel" stands for the name of the necessary email element. In my example, it is "yourlabel". No matter how many words the name of the email element has no spaces allowed here;
<a name="yourlabel"></a>
  • now go back to the menu;
  • open its code;
  • for a necessary menu tab, instead of a hyperlink enter the name of the email element you are connecting the menu tab to preceded a hashtag symbol. In my example, it will be "#yourlabel";

Connecting Menu Tabs to the Necessary Email Element

  • do the same to other menu tabs to connect them with respective email elements.

Email clients that successfully passed the test:

  • Gmail (Web);
  • Gmail on Androidl
  • Apple Mail;
  • Yahoo! Mail;
  • Outlook.com;
  • AOL.com;
  • Samsung Email on Android;
  • Windows Mail.
Help users navigate in your emails easier

Final thoughts

Interactive email campaigns are a good way to enliven your newsletters. This is why we believe you should give them a try. However, we know that creating interactive emails would normally take you longer than regular ones. So, we at Stripo built interactive templates and also did our best to provide you with necessary code samples and even tested emails to help you build engaging emails faster.

Let us remind you to:

  • make the interactive email design simple, as the focus is on interactivity;
  • 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.
Create engaging newsletters with our interactive email templates

Francisca Pheng Soto 7 months 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 7 months 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í: https://stripo.email/blog/add-video-email-stripo/#1-inserting-link-to-a-video-into-emails Le deseamos envíos exitosos y productivos.

You might be interested in

← previous next →
Earth Day Email Examples_Cover Image
2 days ago · 13 min read
Earth Day Email Examples

Today, public interest in environmental problems has only grown and we cannot but talk with you about the upcoming Earth Day. Precisely, about the email newsletter for this date: What is inappropriate in such emails, and what should be included, how to make the email unique. We will also analyze 15 interesting Earth Day email examples from different businesses. Reach out to your customers with high-quality Earth Day email that you build in no time with Stripo templates Use this...

Design Marketing Templates How-to
6 days ago · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business, and make a good impression on clients. Since this is the last element people see in emails, we should make our personal signatures creative and memorable. Let's examine the best email signature examples and their appropriate use in emails and newsletter templates for emails. It should be mentioned that all types of businesses require professional email signatures with detailed contact information. Use this template when designing email signature Use it This signature example...

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