How to Use Interactive Email Marketing to Transform Your Campaigns

An interactive email lets the reader do something inside the message without leaving the inbox. The reader can swipe a carousel, vote in a poll or reveal an offer.

Interactive emails are built with CSS, the styling code every HTML email uses, or with AMP for Email, a format that only some inboxes run. Every interactive email needs a static fallback for the inboxes that cannot show it. For an online store, the useful ones shorten the path to a product.

What Is Interactive Email Marketing?

Interactive email marketing is more than a design trend, it’s a performance-driven strategy. By embedding dynamic elements, brands can let users engage directly within the email, reducing the friction between interest and action. Whether it’s a product carousel, a mini-game, or a quiz, these features increase user attention and improve the overall ROI of your campaigns.

Before diving into examples, here’s why top brands prioritize interactivity:

Benefit	Explanation
Increased Engagement	Users actively participate, spending more time with your content.
Higher Click-Through Rates	Click-to-action elements guide users toward conversions.
Personalized Experience	Interactive content allows customization based on user choices.
Stand Out in Inbox	Unique, playful, and immersive designs capture attention.

Types of Interactive Email Elements

The common interactive email elements are carousels, accordions, click-to-reveal and hover effects, polls, quizzes and countdown timers. Gamified offers, calendar buttons, video and in-email forms complete the list.

Many use the CSS checkbox technique: a hidden checkbox, a label the reader taps, and the :checked selector. The table shows where each element works and what readers see where it does not. Support comes from Can I Email tests of :checked, :hover, GIFs, video and forms, and from the AMP for Email component list.

Element	Where it works	Fallback
Carousels	CSS: Apple Mail, Yahoo Mail and Samsung Email. AMP: Gmail and Yahoo Mail.	The first slide
Accordions, tabs and menus	CSS: Apple Mail, Yahoo Mail and Samsung Email	Every panel open
Click-to-reveal	CSS: Apple Mail, Yahoo Mail and Samsung Email	The content shown from the start
Hover effects	Apple Mail, Gmail on the web, Yahoo Mail and Samsung Email	The normal image or button
Polls and star ratings	Every inbox, with one link per answer	Not needed
Quizzes	CSS: Apple Mail, Yahoo Mail and Samsung Email	Every result shown, or links to a quiz page
Countdown timers	Every inbox. Outlook for Windows shows the first frame.	The end date and time in text
Gamified offers	Mainly Apple Mail, Yahoo Mail and Samsung Email	The code shown straight away
Add-to-calendar buttons	Every inbox	Not needed
RSVPs, forms and carts inside the email	AMP: Gmail and Yahoo Mail	A link to a page on your site
Video	Apple Mail, and partly Samsung Email and Outlook for Mac	A thumbnail that links to the video

Image Carousels and Sliders

A carousel shows several images in the space of one, and the reader taps arrows to move between them. Gmail readers need the AMP version, because Gmail ignores the CSS one. Stores use carousels for the colors of one product.

Accordions, Tabs and Menus

Accordions, tabs and menus fold content away until the reader taps a heading, which keeps a long email short. Stores use them for size guides and delivery details.

Click-to-Reveal and Hover Effects

Click-to-reveal hides content, such as a discount code, until the reader taps it. A hover effect changes an image or button when a mouse pointer moves over it. Phones have no pointer, so never hide an offer behind a hover.

Polls, Surveys and Star Ratings

A poll asks one question and records the answer the reader clicks. Each answer is a link that saves the answer and opens a thank-you page, and star ratings work the same way. A poll that submits inside the inbox needs an AMP form. Stores use polls to ask which category a shopper prefers.

Quizzes and Product Finders

A quiz asks one or more questions and shows a product that fits the answers. Harry’s sent a one-question skin-care quiz built with CSS radio buttons, with a fallback that shows all three results. A quiz that finishes on your site works in every inbox.

Countdown Timers

A countdown timer shows the time left on an offer. It is an animated image that a timer service creates when the email opens. Klaviyo warns that Apple Mail Privacy Protection can make a timer show the wrong time, so also write the end date, time and time zone. Timers suit sale deadlines and the offer in abandoned cart email templates.

Gamified Offers: Spin-to-Win and Scratch Cards

A gamified offer turns a discount into a short game, such as a spin-to-win wheel or a scratch card that reveals a code. It uses the CSS checkbox technique, often with animation. Keep the game to one or two taps.

Add-to-Calendar and RSVP Buttons

An add-to-calendar button puts an event, such as a product launch, into the reader’s calendar. It is a plain link to Google Calendar or a calendar file (.ics). An RSVP completed inside the email needs an AMP form.

Video and Animated GIFs

Video plays inside the email in Apple Mail, but Gmail, Yahoo Mail and Outlook.com do not play it. Animated GIFs play almost everywhere except Outlook for Windows, which shows the first frame. The safe pattern is a thumbnail with a play button that links to the video. A product demo cannot run inside an email, so use a short GIF that links to the full demo.

Forms and Carts Inside the Email

A form or cart that works fully inside the inbox needs AMP for Email, whose form components submit without opening a browser. A plain HTML form opens your site instead, and Outlook.com does not send its values. Google Store’s Pixel Buds email let readers pick a color and quantity, then check out on the site.

Why Interactive Emails Work

Interactive emails work when the interaction removes a step between interest and purchase, such as browsing more products or picking a color. They fail when the interaction becomes the point.

The public results we found come from single emails, not controlled studies. Seagate’s holiday email with a color picker went to 250,000 recipients and reached a 2.1% unique click-through rate. Similar static emails reached 0.7% to 0.8%, its agency told Really Good Emails in August 2020. In Litmus’s May 2022 newsletter, flip cards drew 12.2% of all unique clicks, as Litmus reports. Test any element against a static version before you use it widely.

When an Interactive Email Is Not Worth It

An interactive email is not worth it when the build and test time buys an element most of your list cannot see. Check four costs first:

1. Build and test time. Each element needs a fallback and a test in every major inbox.
2. Support gaps. Seagate’s agency estimated that only 30% to 40% of its audience could see the interactive version.
3. Email size. Interactive code brings the email closer to Gmail’s clipping limit.
4. Accessibility. Keyboard and screen reader users must reach every offer.

Which Inboxes Support Interactive Emails?

Support depends on the inbox. Some inboxes show CSS interactivity, a few show AMP for Email, and the rest show your fallback, so design the fallback first.

The table uses Can I Email results for :checked and for AMP for Email, from tests run between 2019 and 2024.

Inbox	CSS interactivity (:checked)	AMP for Email	What readers see without support
Apple Mail on iPhone and Mac	Yes	No	The HTML version of an AMP email
Gmail on the web and in the iPhone and Android apps	No. Hover effects work on the web.	Yes, after sender registration	The static fallback of a CSS element
Outlook for Windows, 2007 to 2019	No	No	The static fallback
Outlook.com, Outlook for Mac and the Outlook phone apps	Partly: only on type selectors such as input:checked	No	Usually the static fallback
Yahoo Mail on the web, iPhone and Android	Yes	Yes, after sender registration	Not needed
Samsung Email on Android	Yes	No	The HTML version of an AMP email

Plan for Apple Mail and Gmail first. Litmus counted Apple at 76.56% and Gmail at 16.10% of over 1.5 billion opens in September 2026, per its market share report. Apple’s share includes Mail Privacy Protection opens, which Litmus does not treat as reliable.

AMP for Email or CSS: Which to Use

Use CSS for simple interactions such as carousels, tabs and reveals. Use AMP for Email only when the reader must submit something or load live data inside the inbox. Each sender address must first register with the inbox providers. Google requires SPF, DKIM and DMARC email authentication, per its registration page. In Klaviyo, support must also switch AMP on, and approval can take one to two weeks, per Klaviyo’s AMP guide.

What Readers See When Their Inbox Cannot Show It

Readers whose inbox cannot show the interaction see your fallback, so the fallback must work as a complete email. For AMP, the fallback is the HTML version sent in the same email. According to amp.dev, inboxes can also stop showing the AMP part after a set time.

How to Create an Interactive Email

Pick one goal and choose one element that serves it. Build it with a fallback, test it in every major inbox, and measure it against a static version.

Step 1: Define Your Goal

Write down the one action the email should cause before you choose an element. Common goals for a store:

• Sell more of one product line
• Learn what subscribers want
• Fill an event

The goal also decides what to measure: product clicks for a carousel, answers for a poll. The same rule applies to re-engagement email campaigns and every other targeted send.

Step 2: Select Interactive Elements

Choose the one element that moves the reader toward the goal. A carousel shows more products, a quiz recommends one, a poll learns preferences and a countdown timer adds urgency.

Step 3: Build It in Your Email Platform or in Code

Build it with your platform’s own blocks, an email builder, a specialist tool or your own code.

• Platform blocks. Omnisend’s builder has a Countdown Timer item on paid plans and an HTML item for custom code. Klaviyo takes custom code in an HTML block and sends AMP once its support team turns AMP on.
• Email builders. Mailtrap’s guide lists Stripo, Mailmodo, BEE and Dyspatch.
• Specialist tools. Zembula sells automated personalization for retail emails, and Playable sells video that plays inside the email.
• Your own code. A short CSS element with a fallback, like the example below.

This click-to-reveal shows a discount code after a tap where :checked works, and shows the code straight away everywhere else.

<!-- In the head. These rules only run where the inbox supports :checked. -->
<style>
  #cssok:checked ~ .reveal-box { display: block !important; max-height: none !important; }
  #cssok:checked ~ .reveal-fallback { display: none !important; }
  #reveal:checked ~ .reveal-code { display: block !important; }
  #reveal:checked ~ .reveal-tap { display: none !important; }
</style>

<!-- In the body. Outlook for Windows skips everything up to the endif. -->
<!--[if !mso]><!-->
<input type="checkbox" id="cssok" checked style="display:none;">
<div class="reveal-box" style="display:none; max-height:0; overflow:hidden;">
  <input type="checkbox" id="reveal" style="display:none;">
  <label for="reveal" class="reveal-tap">Tap to reveal your code</label>
  <div class="reveal-code" style="display:none;">Your code: SPRING15</div>
</div>
<!--<![endif]-->
<div class="reveal-fallback">Your code: SPRING15</div>

• Inboxes that support :checked match the pre-checked cssok box and show the tap version. Gmail and Outlook for Windows show the fallback code.
• A checkbox hidden with display:none cannot take keyboard focus, so keyboard users cannot open the reveal. Use a reveal for extras, never for the only copy of an offer.

Test the code in your platform’s preview and in the inboxes your list uses before you send it.

Step 4: Optimize for Devices

Test on real phones and desktop inboxes, not only in a preview tool. Litmus reports that mobile devices remain the main place most subscribers read email. Preview it in Litmus or Email on Acid. Then send it to an iPhone, an Android phone, Gmail and Outlook, and tap every interactive part.

Step 5: Analyze & Iterate

Send the interactive email to a random half of the list and a static version to the other half. Compare three numbers:

• Clicks on each interactive element
• Response rate: the share of recipients who answer
• Revenue per recipient

Run it as an A/B test and keep the winner. The guide to email marketing metrics explains each calculation.

Interactive Emails Examples

Each example shows one element doing one job and links to the archived email or a write-up of it.

1. Google Store, color picker and cart. The Pixel Buds launch email let readers pick one of four colors and a quantity, then check out on the site. See the archived email.
2. Harry’s, product quiz. One question about skin-care goals reveals one of three product sets, and the fallback shows all three. See the archived email.
3. Kate Spade, live poll. Subscribers voted for one of eight jewelry types, each vote opened that category on the site, and the results updated live. Read Litmus’s write-up.
4. Seagate, color picker. A holiday email showed each color of a drive, then sent shoppers to Amazon. It beat similar static emails on click-through rate. Read the case.
5. Taco Bell, holiday game. Readers picked one of three escape routes, set up as tabs, and only one route reached Taco Bell. See the archived email.
6. Wistia, video in the email. Wistia’s email announcing inline video played a video inside the message, with a thumbnail fallback, as Litmus describes. See the archived email.

How to Make Emails Interactive: Best Practices

Use one interaction per email and keep the main button outside it. Build the fallback first, and keep the email small enough that Gmail does not clip it.

1. One interaction per email. Each extra element adds build time, test time and code.
2. Main button outside the interactive part. Readers who see the fallback still need a clear next step, so follow email CTA best practices.
3. Fallback first. Design the static version as a complete email, then add the interaction.
4. Accessible to everyone. Give every image alt text, write offers and prices as real text, and test with a keyboard and a screen reader.
5. Under the clipping size. Gmail on desktop clips emails over about 102 KB of code, per Klaviyo’s help center, and phones can clip smaller emails. Image files do not count toward it.
6. Tested in every major inbox before each send.
7. A/B tested. Keep the interaction only if it beats a static version on clicks or revenue.

Use Poll and Quiz Answers to Personalize Later Emails

Poll and quiz answers are zero-party data: preferences a subscriber tells you directly. Save each answer to the subscriber’s profile, then use it to choose what the next email shows.

In Klaviyo, each answer is a link with the update_property_link tag, which writes the answer to a profile property, per Klaviyo’s help center. The latest click overwrites an earlier answer, and preview sends do not update profiles. Segments, flow splits and personalization can then use the property.

In Omnisend, add a conditional split after the email in an automation to check whether the contact clicked a specific link. Then add a Tag block on that path and build a segment on the tag.

Use the answers three ways:

• Show each group the products it chose, with email personalization blocks.
• Group subscribers by answer with the segmentation strategies you already use.
• Put the quiz in a signup form, so visitors trade an email address for their result rather than for a discount.

Get Help With Your Email Campaigns

Enflow Digital is an ecommerce email marketing agency that has worked with 100+ brands over five years. We plan, design and write campaigns and flows, build segments from poll and quiz answers, and A/B test new formats against your current emails. Use the form on this page to tell us about your store.

FAQs