How To Create Interactive Emails With Examples

Nupur Mittal
ByNupur Mittal

11 mins read

What if instead of directing users to your landing page to fill out a survey, you bring a survey directly in the email? Or what if users can browse products in the email as they do on a website? Such functionality is possible with interactive emails.

Interactive emails are gaining popularity, as 32% of marketers believe it to be a significant email trend. But, many questions might arise, like what interactive elements to add, which email clients support such emails, etc. In that case, this article will provide answers to such questions.

What is an interactive email?

Interactive emails allow users to engage and interact with the email content by tapping, swiping, and hovering over the different interactive elements in the email.

For example, they can fill out a survey, respond to a poll, solve puzzles, etc., within the email. Such interactivity in the email enhances the user experience by providing them with valuable content in one place.

Why should you send interactive emails?

Interactive emails provide the following benefits:

• Provide behavioral analysis for better targeting

With interactive email, you can track every click that happens inside the email. So, with every interaction a user makes, you get an in-depth analysis of their behavior. For example, you can get insights into users’ interests by including a poll in an email. Such insights will help in better targeting and delivering more relevant content.

• Higher engagements and conversions

Interactive elements allow users to actively participate in the email rather than reading or viewing the email content. For example, they can respond to a poll, browse product images, or solve a puzzle to reveal an exciting offer. All this functionality drives them to take action, thus, boosting your email conversions over time.

• Better user experience

With interactive elements, you can make users’ journeys effortless, valuable, and less time-consuming. Moreover, a better user experience will make users return to your brand again, becoming repeat customers.

• Visually appealing

Carousels, accordions, sliders, puzzles, etc., helps in giving users a visually rich experience. For instance, with a carousel, they can browse images as they do on a website. Such visuals help users provide a more appealing grasp of the email content.

• Reduces friction in the funnel

If users have to go through many steps click after click, they might drop off at some stage. Interactive emails remove such drops off by letting users complete the action in their inbox itself. Hence, the friction in the conversion funnel gets reduced.

Interactive vs. non-interactive emails

Interactive emails Non-interactive emails
Interactive emails contain elements with which users can engage and take action within the inbox. To complete the action, such emails do not have interactive features and redirect users to your landing page, the home page, etc.
Less accessibility as very few email clients render interactive emails well. Higher accessibility since every email clients support them.
Reduces the friction in the funnel as users can complete the action within the inbox. Since users must complete the step outside the inbox, therefore, chances of friction increase.
Better insights into users' behavior due to tracking of their interaction with elements in the email. Behavioral analysis is limited since there aren't any interactive elements in the email.

Create and send AMP emails without coding in minutes

cta-img

How to create interactive email

Creating an interactive code is slightly different from coding a non-interactive email. There are two ways to make interactive emails - HTML emails and AMP for emails. Let's discuss them in detail.

HTML emails

Interactive emails can be coded using HTML. You can code interactive elements like radio buttons, dropdowns, forms, and other elements. This is mainly done through custom development by businesses that need to include such interactivity inside emails. ESP support for such emails is not available at present.

Let’s understand this with an example of show/hide content HTML code:


<style>

input,

.hide,

.content,

input:checked ~ .show{

display:none;

}

input:checked ~ .hide,

input:checked ~ .content{

display:block;

}

</style>

<label>

<input type=”checkbox”>

<div class=”show”>show</div>

<div class=”hide”>hide</div>

<label class=”content”>…</label>

</label>

When the input is checked, the ‘show’ button is hidden, and the ‘hide’ button and content are displayed. Notice the content is wrapped in its label. This overrides the function of the parent label, so clicking in this area won’t alter the checkbox. This technique is also often used for expanding hamburger menus in email.

Email compatibility for HTML-based interactive emails

Before sending bulk interactive emails, you must know which email clients support the interactive emails, as you do not want all your hard work to go in vain if an email doesn’t render well. The table below summarizes the email client support for HTML interactive emails:

Interactive elements Email client support
Accordions
  • Desktop: Will only work with systems supporting external CSS - Apple mail, Outlook 2011 for Mac, AOC; for all other email clients, a fallback will be provided.
  • Mobile: All IOS devices, Android 2.3 onwards
  • Carousels Apple Mail and Thunderbird. For all other email clients, a fallback will be provided.
    Sliders
  • Desktop: Apple Mail and Thunderbird. For all other email clients, a fallback will be provided.
  • Mobile: All IOS devices, Android 4.4 onwards.
  • Integrated forms and search
  • Gmail, Yahoo, AOL, and Outlook on Mac. For all other email clients, a fallback will be provided.
  • Thunderbird doesn’t support the search function in the email.
  • AMP for emails

    AMP for emails is a new format to create interactive emails that offer Javascript-like functionality and is embedded into the email as a new MIME part, in addition to the HTML and plaintext, ensuring compatibility across all email clients.

    AMP for email is different from classic HTML tags in the following manner:

    • AMP for emails must include '4email', or 'amp4email', in the HTML tag.

    • The <head> tag must also contain a <script> tag that loads the AMP runtime. <script> async src="https://cdn.ampproject.org/v0.js"></script>

    • A CSS boilerplate to initially hide the content until AMP is loaded. <styleamp4email-boilerplate>body{visibility:hidden}</style>

    Creating interactive AMP emails requires custom development, just like HTML interactive emails. However, Mailmodo allows you to create interactive AMP emails without any coding.

    To add an interactive component using AMP for mail format, you need to use the following code:

    Elements Description Guides
    <amp-form> For adding forms in the email AMP-form
    <amp-img> For embedding images AMP-img
    <amp-anim> Embeds GIF files. AMP-anim
    <amp-accordion> For accordions AMP-accordion
    <amp-sidebar> A sidebar for navigational purposes. AMP-sidebar
    <amp-carousel> For carousels AMP-carousel
    <amp-timeago> Provides a convenient way of rendering timestamps. AMP-timeago

    Email compatibility for AMP-based interactive emails

    At the time, AMP for emails is supported by three email clients - Gmail, Mail.ru, and Yahoo Mail. In other email clients, users see an HTML version of the AMP emails.

    Now, let’s look at interactive email elements that you can create using these two formats.

    Interactive email examples and interactive elements

    Following are the interactive email examples with elements that you can add to the email design.

    1. Forms and surveys

    You can create AMP forms with Mailmodo such as event feedback surveys, NPS surveys, registration forms, etc. In each of these forms, you can add the following interactive elements:

    • Dropdown menus

    A drop-down menu allows users to select an option from various options. In Mailmodo, a zoom feedback form with dropdown works like this👇

    Dropdown box in an interactive email

    • Meeting booking calendar in an email

    For webinar or event bookings, you can add calendar and time menus in the email. It will help users to book an event on the spot without much hassle. For instance, users can book a meeting with their preferred date and time with Mailmodo emails like this👇

    Date and time in interactive emails

    • Add to calendar widget in email

    When did you last register for an event via an email invitation?

    You clicked the signup button and got redirected to the browser to complete the registration. Afterward, you got a confirmation email asking you to add it to your calendar. We found this journey tedious, leading to higher drop-offs.

    But we eventually found a solution.

    Our one-click event registration widget. Adding this widget inside the email lets the recipient register and add the event to their calendar with a single click.

    Mailmodo's Add to Calendar widget in action

    💡Related guide: Why we Built Add to Calendar

    • Shopping cart

    With Mailmodo, you can add a product cart to the email allowing users to place their order in the email itself. Such ease of access can help boost your email conversions since users are not redirected to your landing page.

    An example of a product cart email by Mailmodo looks like this👇

    Product cart within an interactive email

    • Radio button

    A radio or option button is a graphical control element that allows users to choose only one predefined set from many options.

    For instance, Litmus uses radio buttons to change the email theme to dark mode when the user clicks on the “lights off” button.

    Using radio button in an interactive email

    2. Gamification

    Email gamification means adding fun and exciting activities, such as quizzes, puzzles, polls, etc., in the emails. For example, you can use gamification in promotional events to reveal coupon codes or send festive greetings.

    • Spin the wheel inside the email

    Create a fun and engaging experience for your audience by embedding a spin the wheel inside the email. Whether you want to run a flash sale discount during holidays or plan to run a jackpot offer, this widget is best in every use case.

    Our spin the wheel widget is easy to embed in your no-code email template editor. You only need to configure your promotional offers and pick the win ratio of different offers.

    Playing Spin the Wheel in email

    • Quiz in email

    Interactive quiz widgets in the email are great to boost engagement as they're fun, and everyone likes a little challenge from time to time.

    This email deliverability quiz template by Mailmodo is a great example showing how you can use trivia or assessment quizzes to boost engagement.

    Email deliverability quiz email template by Mailmodo

    Check out this email deliverability quiz template

    • Interactive polls within the email

    I saw polls inside the email but always got redirected to another page to see the results. But, our polls inside email widget eliminates that step by showing results inside the email as soon as the recipient selects an option.

    This leads to higher poll submission and email engagement as the recipient doesn't need to wait for the browser page to load.

    Interactive polls within email by Mailmodo

    Check out more suchholiday email template

    • Puzzles

    Puzzles create curiosity among users and compel them to interact with the email.

    For instance, Penguin Random House creates a fun experience for users by hiding book titles using emojis. And when users click on the emojis, they reveal the book’s name.

    Using puzzles for gamification in interactive emails

    3. Interactive displays

    Interactive displays include accordions, carousels, sliders, etc.

    • Accordion

    Accordion is an interactive element that allows email marketers to stack up the content by making the email layout non-ambiguous and straightforward. It tracks users’ behaviors by checking which category they click the most. It also allows smart categorization, which creates a better user experience.

    For instance, this email by BBC shows five categories in a simple layout. Users can see the extra information when they click on the + icon.

    Accordion in an interactive email

    • Image carousels

    Carousels allow you to display different images of an event and products, allowing users to learn more about the images provided.

    The email by Design+ethics shows different photos of a single event, and when users click on an image, they can view the expanded version.

    Carousels in an interactive email

    • Sliders

    Sliders create a mini-presentation view allowing users to see different versions of a particular image. They help reduce the email length, thus, facilitating interactive browsing.

    Bakley's interactive email shows four sunglasses versions that users can see as they click on the slide button.

    Use of sliders within an interactive email

    Interactive email best practices

    You should follow these best practices to get the most out of interactive emails:

    • Always create a fallback version so viewers can see the HTML if the email client can't render the interactive email.

    • Do not add many interactive elements in a single email, as doing so can create confusion and distract users.

    • Always test the interactive emails before sending them.

    Get a sample AMP email in your inbox

    Experience the power of interactivity right now

    How does Mailmodo help you create interactive emails?

    One of our clients, Bluestone, conducted an NPS survey to improve its jewelry and lifestyle segment recreation. But they were not getting a good number of survey submissions.

    What was the problem?

    The email redirected the users to an external webpage to access the NPS survey. Unfortunately, due to many redirections, most users dropped midway and didn’t complete the survey.

    How did Mailmodo provide the solution?

    We provided an AMP email for conducting the NPS survey. With these AMP surveys, users could fill out the survey via email. Hence, they didn’t need to go to the external web page, reducing the chances of drop-off. As a result, BlueStone recorded a remarkable increase of 883% in NPS response rates with interactive email campaign compared to HTML emails.

    Survey within an interactive email

    What should you do next?

    You made it till the end! Here's what you can do next to grow your business:

    2_1_27027d2b7d
    Get smarter with email resources

    Free guides, ebooks, and other resources to master email marketing.

    1_2_69505430ad
    Do interactive email marketing with Mailmodo

    Send forms, carts, calendars, games and more within your emails to boost ROI.

    3_1_3e1f82b05a
    Consult an email expert

    30-min free email consultation with an expert to fix your email marketing.

    Table of contents

    chevron-down
    What is an interactive email?
    Why should you send interactive emails?
    Interactive vs. non-interactive emails
    How to create interactive email
    Interactive email examples and interactive elements
    Interactive email best practices
    How does Mailmodo help you create interactive emails?

    Fresh Marketing Ideas, Every Week.

    Get the latest marketing roundup & news

    Get 3X conversions
    with interactive emails

    Check.svg

    Create & send interactive emails without coding

    Check.svg

    Put revenue on auto-pilot with pre-built journeys

    Check.svg

    Save time with AI-powered email content creation

    1000+ businesses grew with Mailmodo, including

    Frame_1110165681_3_b26b1a7573
    Group_1110165532_1_bf39ce18b3
    Ellipse_Gradientbottom_Bg
    Ellipse_Gradientbottom_Top
    gradient_Right