To create a truly memorable subscriber experience, you have to make your email stand out in the inbox. One way to do that is by adding interactivity to your email campaigns.
But as desirable as interactivity in email may be, building it can seem intimidating (or frivolous). However, interactive emails don’t have to be scary.
Here’s how to create an interactive email, with seven interactive elements to help email developers get started.
As defined by interactive email expert Mark Robbins (on Humans of Email), email interactivity is “an action taken in an email that triggers an event, without leaving that email.”
Interactive email elements can take on many forms, including:
Why should you send interactive features in an email?
Email continues to be the most effective marketing channel, with an ROI of 36:1. That’s why it’s important to constantly improve your subscribers’ experience—and interactive email is the opportunity to do just that.
According to Martech Advisor, interactive email has the power to increase the rate of click-to-open by 73%. Subscribers want it, too.
Here’s how adding interactive features to your emails can benefit your campaigns:
Boost your conversion rate
Higher click-through rates
Gather more data
Differentiate yourself
Create a better user experience
Let’s dive into each.
Boost your conversion rate
Interactivity allows more to happen inside an email and reduces barriers to engagement—making clickers have even higher intent.
As such, adding interactivity to your emails can help your brand or business collect more qualified leads, and in return, help you increase the number of conversions.
Higher click-through rates
Dyspatch reports 60% of email recipients are likely to engage with an interactive email, and over 50% of email recipients said they want to interact with content inside their email. In short: subscribers want to have interactive experiences.
Interactivity invites audience participation. It entices more subscribers to click-through—increasing the number of visitors to your website and/or landing page.
Gather more data
With interactive email, more clickable elements are added and as result, more data is collected.
Click-data
By including UTM codes to track the performance of your links, you help identify and differentiate where subscribers are actually clicking in your email. This data can help inform your campaigns, from a design perspective.
Subscriber preferences
Interactivity can also help collect data on your subscriber preferences.
With live polls, subscribers can cast their votes within an email. (Keep reading—we’ll cover this in more detail later in the post!) The results can be used as feedback in many ways, from informing your email campaigns, to influencing product strategy.
Differentiate yourself
While coding an interactive email may be intimidating, it can help deliver a memorable subscriber experience—and differentiate your emails.
When we asked our audience on LinkedIn whether or not they’re using it in their emails, a majority of 60% respondents answered “no.” That’s an opportunity for email marketers to use interactive email to stand out from the crowd.
By allowing subscribers to activate content within an email (vs. taking them to a website or app), interactivity helps reduce friction, creating an overall better user experience.
Getting started with interactive email marketing
The secret to experimenting with interactive emails? Start small. Adding simple interactive elements to your email designs can have a major impact, make your emails more engaging, and uplevel your subscribers’ experience.
7 interactive elements for email marketers to add to emails
Interactive emails don’t have to be out of reach for your team. Here are 7 interactive elements you can add to your emails today.
Hover effects
One of the simplest ways to introduce interactivity to your emails is with a hover effect.
Hover effects are most popular when it comes to highlighting text (for example, highlighting a text link in your email copy). But they’re also a simple but powerful tool to make other elements—including images, background images, or calls-to-action (CTAs)—interactive and more engaging.
1. Hover effects: Text
With hover effects, you can change nearly any aspect of your text on hover. For example, you can change its color, add a drop shadow, or add an underline.
Here’s an example of how you can change a link’s color from blue to red on hover:
Fading effects on hover are another simple but powerful element you can add to your templates. By controlling the opacity of any element—text, images, or tables, for example—and combining that effect with transitions, you can create smooth, gradual hover effects that can make your emails stand out.
In the example above, we use a hover effect to change the opacity of a text link to 50%. But rather than applying the change immediately, the transition effect set to 0.3 seconds helps smooth out the change in opacity.
When using a transition effect, remember to not only set it on the class that defines the hover state, but also apply the transition to the original state. With that, the text fades smoothly on hover, and also smoothly returns to being solid when removing the mouse from the element.
The email clients that support this effect include:
AOL
Apple Mail
Gmail
3. Hover effects: Background colors
Using a hover effect to change background colors comes in handy when you’d like to give your bulletproof buttons a bit of a special treatment.
Use the below embedded CSS to add a simple color change on hover to your CTA buttons—like in this case, to make it change from red to grey on hover. Simply add the class .bg-rollover to the HTML element your bulletproof button is in where the background color is defined.
You can also swap out background images on hover, as we do in this example:
In the CSS, you’re simply changing the background image URL on hover. You can combine it with a transition to achieve a fading effect (just as we saw in the examples above). Plus, since it’s a background image rather than a regular image, you can layer elements on top of your image, including links, text, or floating image elements.
Take it up a notch: This is how we create the faux video effect to add a more interactive feel to any video images we use in our emails.
You can also add a motion effect to your email, which can be useful in cases like highlighting a CTA. Here are two ways to do it:
Tab pops up & changes color
Here is a main CTA with a little pop-up tab on top of it that moves up on hover:
The pop-up tab is a bottom aligned tab that lives inside a taller container. Hovering over the tab changes its color and increases its height. Since the tab itself is anchored to the bottom, this makes the tab pop up. Add a transition to it and you have the pop-up that grows slowly on hover.
Here’s the code for the pop-up. Add it above any CTA or content you want to highlight with this pop-up.
The CTA button is designed with a box shadow. Once the cursor hovers over the button, the box shadow disappears and the button is translated using the transform CSS property, emulating a depression effect.
This effect is supported on Apple Mail. We made the button appear the same in Gmail and Outlook using some background images (Gmail) and VML (Outlook), but neither client supports the transform property, so the motion didn’t appear there.
6. Flip cards
Looking to add a unique bit of interactivity to your emails? Try flip cards, like we did in our May 2022 newsletter, where the theme was all about magic.
Want to stay in touch with the tinkerings of our email team? Subscribe to our newsletters for more “surprise and delight” subscriber experiences like this →
Powered by advanced CSS animation, this interactive flip card content accounted for 12.2% of all unique clicks in the email.
Get the full tutorial (and code) in this blog post by Litmus’ email developer, Carin Slater—fallbacks included.
7. Live polls
Live polls are an engaging and tactful way to collect real-time interest in email. They encourage initial and repeat interaction, when subscribers reopen emails as votes update.
Poll results are updated based on click interaction. Images in the emails are then updated at open, surfacing the live vote percentage for each category.
Example: Kate Spade
Kate Spade uses live polls as an engaging way to gather feedback from subscribers.
This email encourage subscribers to click and helps Kate Spade collect valuable data on their subscribers (in this case, jewelry preferences). This insight can then be used to create more personalized experiences in the future.
In our monthly newsletter, we use sentiment polls at the end of our newsletters to collect subscriber feedback, inviting audience participation and engagement.
This encouraged engagement and served as data to help inform our email content strategy, helping us deliver more relevant subscriber experiences in the future.
Interactive email may seem intimidating, but it doesn’t have to be! Start small with any of the above elements—and remember to test your email to ensure your designs come across right.
Originally published on December 14, 2017 by Bettina Specht. Last updated September 26, 2022.
Ensure your designs come across right
Broken emails lead to less conversions. Preview your emails across 100+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time.
Be the first to get latest updates and exclusive content straight to your email inbox.
No Thanks!
Subscribe to our newsletter
Sign-up to get the latest marketing tips straight to your inbox.
Give it a try, you can unsubscribe anytime.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
