Interactive email techniques

Interactive Emails: 5 Exciting Ideas and Examples to Try

6

It’s tough to imagine, but there was a time when you couldn’t do much with email besides delivering plain text. So much has changed since the invention of email, and the marketing medium continues to present new methods for reaching subscribers in innovative ways.

Interactive emails are just one example of how email has evolved in recent years. Creating more engaging and intuitive campaigns, interactive email marketing does things your subscribers would never expect without completely ripping up the rule book.

In the days when email content was 100% static, all engagement beyond the initial open and click had to happen on a website or dedicated landing page. Interactive email elements embedded into our campaigns now mean we can really get creative and active in the inbox.

How do we define “interactive”?

Before we get too far into things, it would be good to define what we consider an “interactive element” in email marketing.

We define “interactive element” as the ability for subscribers to click and do something within an email. This interactive element could be something like manipulating content, adding items to a shopping cart, taking part in a quiz, completing a survey, or playing a game.

Interactive email elements should not be confused with features like animated GIFs in email or dynamic content such as countdown timers. While they’re pretty cool, those elements are viewed passively. Subscribers usually don’t click or tap to make them do something inside of the email.

Mark Robbins of Salesforce provides his take on interactive email marketing in the video below.

What does an interactive email look like?

As with any visual medium, it’s often easier to show and tell. So, let’s dive into some great examples of interactive emails that have recently caught our attention. 

We found several of these on Really Good Emails. You’ll see an image of the interactive emails below, then you can click through to see a live version in action and check out the code over at RGE.

The basics: Hover and rollover effects

If you’re just getting started with interactive email marketing, hovers and rollovers are a good place to begin. 

Email marketers may use hover effects and rollovers to show close-ups or the backside of products. It’s also common to see these effects used on button elements in emails. But you can use a rollover for much more than that.

In this email from lighting and furniture designer Tom Raffield, recipients look for the answer to “Can you guess where we are going?” by hovering over the clues. It’s a fun way to create an engaging experience inside the inbox with a fairly simple effect.

Image rollover teaser effect
In case you’re curious, the answer was “We’re going to Chelsea Flower Show.”

To see how this sort of thing is done, check out an experiment that email developers Paul Kirby and Ed Ball conducted as they built their own hover and rollover effects in an interactive email.

As the folks at UXMovement remind us, hovers and rollovers don’t always carry over to the mobile email experience since subscribers are using taps and gestures rather than a mouse.

1. Interactive accordions for email content

How do you distill the passion and knowledge of a globally respected author, broadcaster, and natural historian like David Attenborough into an email? The BBC took a colossal topic (Planet Earth) and managed to condense five of its most powerful documentaries into a single campaign using interactive accordions.

Clicking the plus-sign reveals more information and links to specific streaming content in each section. Note the use of beautiful background images that change as the subscriber clicks on the individual categories. This email is beautifully engaging and visually stunning — which is perfectly on-brand for Attenborough’s work.

Although the email is incredibly intuitive, it doesn’t take anything for granted and highlights that it is interactive, encouraging greater engagement.

2. Forms, testimonials, and product reviews

Typically, a call-to-action prompts subscribers to click through to provide testimonials, product reviews, or fill out forms on a web page. Interactive emails offer the opportunity to complete tasks like that right from the inbox.

The screenshot from H&M below (courtesy of Mailcharts) shows how the fashion brand includes a star rating and a feedback form in an email requesting a product review.

Star rating and testimonial email from H&M

Because the customer doesn’t have to leave the inbox to rate and review, this may increase the number of product reviews the brand receives.

3. Previewing products in interactive emails

Not only does this email from the Google Store allow you to view its Google Pixel Buds in a variety of colors, but it also lets you add your specific choice to your shopping cart directly from the email. 

Because this bypasses the need to visit a website, it reduces the number of clicks between the initial discovery and the final purchase. 

4. Interactive emails and gamification

Gamification might be the ultimate way to add interactivity into your email campaigns. Of course, coding emails like this is going to take a lot of work, the right level of development experience, and the knowledge that it may not work in every email client.

Email Monks (now Uplers) knows a thing or two about interactive emails. This spooky Halloween game not only creates some seasonal fun but also highlights how a professional design team can push the boundaries of email marketing. 

A nice touch is the call-to-action at the end of the game, which invites you to share the fun with your friends on Twitter. A helpful reminder that email marketing is part of a much wider ecosystem and only enhanced with great content and social media engagement.

5. Interactive email quizzes and surveys

Quizzes and surveys can be fun for subscribers as well as an excellent way to learn more about the people on your list.

Instead of second-guessing what the audience actually wants (how many email marketers are guilty of this?), GoDaddy uses interactive emails to ask questions before directing subscribers to the right online content. 

GoDaddy asks subscribers about their level of technical competency and whether they plan to design their website themselves or hire professionals. This helps ensure they do not talk down to or above the heads of certain subscribers.

How to develop interactive emails

When you want to build your own interactive emails you can start from scratch and code-it-yourself (CIY). That could include using a framework such as Google’s open-source project AMP for Email or Outlook’s Actionable Messages. We also have a collection of interactive email how-to articles with tips and code snippets you can grab.

Tutorials from Email on Acid:

AMP for Email is a great place to start experimenting with interactive emails. It allows you to include features such as image carousels, accordions, and surveys. Developers use a subset of AMPHTML components that are used in email. The downside of AMP is that it mainly works with Gmail and the other major email clients don’t support it.

Third-party services such as MailModo specialize in helping email marketers make use of AMP for Email’s potential. Check out the article they wrote for us that explores the conversion rates for AMP emails vs HTML emails.

Before you start developing interactive emails, find out what your email service provider (ESP) will support. Some ESPs alter code that could impact interactive elements in your campaigns.

Interactive emails and Outlook

As almost any email marketer will tell you, there are plenty of challenges when developing emails for Outlook. Interactive email design is yet another problem area.

While there is some support for interactive emails in Outlook, the Windows desktop versions are a no-go for now. The issue is connected to how Outlook uses Microsoft Word for its rendering engine. Get an in-depth explanation of all that from Rémi Parmentier at HTeuMeuLeu.

Interactive emails are cutting edge, and you’re taking a chance by adding interactivity to your campaigns. That’s why you need to make sure you always include fallbacks for interactive email content.

Save time with efficient pre-send testing

At Email on Acid by Pathwire, we understand how designing and developing amazing emails takes tons of time and effort on your part. That’s why we built a platform that helps streamline the email predeployment process.

With our automated email checklist, email teams can run through a series of checks that optimize inbox display, accessibility, check for deliverability issues, and more. Then, developers can rely on our email previews with unlimited testing to catch rendering issues before hitting send. That includes checking to see if your interactive email fallbacks are working.

Plus, our team management features help marketers collaborate and review emails more efficiently. Use Email on Acid to deliver email perfection with every campaign!

This article was last updated in October 2021 and was first published in January 2019.

Test Your Email First!

Make sure your email looks flawless before you send it out to your subscribers. Remember: only live email tests can guarantee fully accurate email rendering previews. With Email on Acid, you can preview your email in dozens of email clients and devices before you hit “send.” Sign up for our free trial and start testing today.

Sign Up Today

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

6 thoughts on “Interactive Emails: 5 Exciting Ideas and Examples to Try”

    1. Hi Kassandra –

      You may be able to add some of these with the Hubspot email editor (using the text/HTML editor), but we’re not 100% sure. You likely won’t be able to do anything like this with a WYSIWYG editor in Hubspot. Alternatively, you can work directly with the HTML using another editor (Email on Acid’s editor, or something like Sublime or Codepen) and then paste it in to Hubspot’s email editor.

      Hope that helps!

Comments are closed.