Stand with Ukraine 🇺🇦 Donate to support

Interactive Emails Explained with Examples

On April 01, 2022
10min read
Viktoriia Ivanenko Technical Content Writer @ Mailtrap

Do you enjoy talking to a person who just talks about themselves and never lets you say a word? 

Have you ever been in the situation when someone asked you for a favor, but then you had to bend over backwards to actually do it?
Are you keen on spending time with someone who is always looking in the mirror instead of talking to you?

Well, let me guess the answer. Probably, no.

The same is true for each and every email sent in the email campaign. It is amazing that you have a new product, feature, or venue to appreciate. It is great that you can present it (or have already done so) in the best way possible. Now it’s time to listen to what your customers have to say about it. Interactive email might be the right way to let them do this.

What are interactive emails?

Interactive emails contain specific functional elements in the email body that allow recipients to engage with the content. For example, to rate services, add products to the shopping cart and proceed to checkout, complete a survey, participate in a quiz, or play a game right in the inbox. 

The key idea for interactivity is actually DOING something with the content by clicking, tapping, or scratching. If the recipient of an email merely WATCHES the content  – GIFs, dark mode, or countdown timer – this is not an interactive component in 2022 anymore.

So what are the types of interactive elements, and how could you benefit from them?

Types of interactive email elements 

Although there could be tons of interactive elements integrated into the email code, we will look at the basic ones that constitute the so-called fundamentals of client engagement.

Hover effects

Hover effects, together with the rollover ones, are the essentials of email interactivity. 

The benefits of hovers and rollovers can hardly be overestimated when a business wants to create a real presence for the product.

Hovers, in particular, are mainly used to highlight buttons with CTAs, or point to links to enhance clickability. 

Check out this interactive email newsletter from a famous British multinational DIY and home improvement retailing company, B&Q. Each menu button is highlighted through the hover with a different color to make the catalog simpler to navigate and to promote B&Q’s products in a highly consistent way. It obviously works for better conversion rates in the long run.

Source: GetResponse

Image rollover effects

A rollover effect dynamically changes images when you hover over them. Creating a rollover with two or more versatile images of a product creates a full-scale product preview. 

Moreover, like in the following example, rollovers can function as a shopping assistant to provide detailed info about the item.

Remember, it’s all about giving the mic to your audience. With hover and rollover effects, you create a versatile experience close to offline shopping where one can “touch” every single side of the product or service. The chances become higher that after getting the entire sensation of an item, people will want to buy it.

Source: Esputnik

Buttons

Buttons are the king of interactive email content. They might seem like a minor thing for content engagement, but the devil is in the details. Interactive buttons carry out the most important jobs: 

  • Urge customers to take action
  • Attract recipients to interact with the sender
  • Support the general outline of interactivity in emails
  • Redirect to the required links

Brightwave’s example here demonstrates how buttons work together with the hover effect to make customers part of Brightwave festivities and thus enhance brand awareness, increase personalization, and strengthen client loyalty. If you want people to stick with your brand, let them be an active part of the brand community. 

Source: BRIGHTWAVE

Gamification elements

There is probably no need to dwell on the idea of how much people LOVE to play games. Excitement, curiosity, reward, and competitiveness – these are some intricate moving forces of humanity. Email campaigns can play with and on that. Spinning the love wheel for Valentine’s Day, solving Easter egg riddles, chasing Halloween ghosts away, of course, sounds like a lot of work and headache with coding. However, the marketing statistics shows that it all pays off a hundredfold. 

Source: Affdu

Source: Affdu

Polls, surveys, forms, and other user-generated content

Interactive email forms are the best ways to hear what your customers have to say about your products and services. This immediate feedback allows you to grow your business, improve, and implement novelties. Think of interactive email forms as a means of creating and expanding the group of highly-engaged users. 

RSVPs, star ratings, bookings, scheduling etc. allow for ultimate for two-way connection between clients and businesses. It’s also quite a chance to show how you respect the people and their time (since, e.g., a person is able to book the hotel right within the email body without wasting time following external links).

Source: Stripo

Source: Constant Contact

Interactive sounds

One might argue that interactive sound elements are a passive way of just perceiving the information, like with countdown timers or GIFs. And this is definitely the case when it comes to promoting sound products for musicians and other businesses involved in the sound industry. However, interactive sound effects can make a lot of difference for visually impaired people. 

In this case, interactive sounds basically become a way of connecting and reacting to the information provided by email campaigns. Clicking on the sound literally enables meaningful interaction of the recipient with the sender.

Source: Salesforce

Videos and animation

Let the numbers speak: 79% of consumers prefer watching videos to reading about a product. This is the reason many businesses go out of their way to embed videos into emails. 

However, the most important thing to know about email videos is that they work only if they are short and to the point. 

If you are using video as an interactive email element, do so with caution. According to research by Verizon and Publicis, 92% of consumers view videos with the sound off. So don’t forget about captions. 

Just a “little” bummer to remember: not all email clients support videos.

Source: Entrepreneur

To interact, or not to interact, that is the question

Here come the most important questions: why send interactive emails? Are they really better than the static ones? Is an interactive email campaign worth time and effort?

The truly honest answer would be: yes and no. 

On the one hand, there are marketing stats, and the numbers speak for themselves. Like the DemandGen study indicating that 91% of B2B customers prefer interactive content in their marketing emails. Or the survey from Kapost claiming that interactive email newsletters help generate twice as many conversions as static ones.

On the other hand, there is a harsh email reality one has to face: only 15% (altogether with full or partial support) of email clients support AMP technology (that allows interactive content creation and rendering).

Thus, it all depends on what you use interactivity for. If it is for mere entertainment or catching the recipient’s attention, then you probably shouldn’t bother with interactive content. Static emails can very well be catchy, entertaining, and creative as long as they fulfill your exact business needs.

Keep in mind that when you create an email with interactive elements, it needs to function at three levels. The first level is static –  that would do for some clients like Outlook, which doesn’t support most interactive functionality. The second level is for the email clients that support limited interactivity, such as Yahoo or older versions of Android. The last level is the fully-fledged interactive one, where the entire dynamic email toolkit can be applied. The core idea of creating interactive email content is to do the job at all three levels while simultaneously working on fallbacks (the alternative static content) to “fall gracefully” on interactivity if the email client doesn’t support kinetic elements.

At Mailtrap, we once had the intention to launch an interactive email campaign but cast away the idea over time. We evaluated the pros and cons of interactivity and came to the conclusion that static email content works better for us in the long run. Here are a few reasons why we refused to give interactivity a go:

  • Not all email clients support interactive emails
  • Logistics doesn’t allow covering all the users
  • Three levels of email coding (HTML5 layer, text layer, interactivity AMP layer) are labor-consuming and require special preparation
  • Additional levels of testing are a must

Thus, when the input into interactive email coding and testing does not allow covering all the customers’ needs and aspirations, it should probably be put aside for the times when all email clients are ready for interactivity.

However, there is always the flip side of the coin. If interactional emails offer additional value to  customers, then interactivity is a must. In this case, interactive elements should give the customers something extra, some new experience that cannot be delivered with static content. Here’s a checklist of the goals the interactive email campaign should reach. If you put ticks for almost anything in it, then it is time to set off for interactive content creation:

  • Enhanced user engagement
  • Higher conversion rates
  • Better quality lead generation
  • Personalization

Now that you are aware of all the advantages and disadvantages of interactive email content, it is up to you to answer Hamlet’s question on interactivity.

Here, you will find some general tips on how to not overuse interactivity but rather turn it to your advantage.

Interactive email do’s

  • Concentrate on one interactive element per email

This one is a rule of thumb. Your email should be centered around one interactive element that carries the main message without distracting customers’ attention.

  • Prioritize accessibility

Description texts, color contrast, transcripts for video etc. will be an effective support to 

Interactive elements.

  • Make sure you’ve got a solid fallback plan

You want your emails to work – that’s the most important thing. Always create a fallback version so viewers can see the HTML if the email client can’t render the interactive email.

  • Push interactivity only where it is needed

Remember the purpose of your campaign and how that purpose can be achieved with interactivity. It’s not something that should be in every single email you send.

  • Do proper testing

Testing is key. You need to do efficient pre-send testing to make sure that everything functions as you’d expect, especially considering that some email clients only partially support interactive elements.

Interactive email don’ts 

  • Do not solely rely on the AMP layer in coding 

It’s perfect that AMP allows you to add a third MIME to your messages – text-x-amphtml. However, remember that HTML and plain-text are still your best hub for support.

  • Do not overuse interactive elements

Be it a video, carousel, rollover effect, or a poll – this one interactive element is core. Otherwise, you risk all the parts of your email being overlooked.

  • Avoid repetition

This one is pretty obvious. If you keep on using the same features all the time, at some point, they will fail their customer engagement mission.

  • Don’t urge more clicks and actions than necessary

Try to deliver the experience directly to your customer’s inbox. If you make them visit your website, landing page, or download an app, they will probably try to avoid doing so.

How to create interactive email?

Interactivity in emails runs on AMP (Accelerated Mobile Pages) technology. 

AMP for Emails was announced by Google in early 2018. It lets users utilize various AMP elements in emails sent from popular clients and ESPs. AMP-powered emails can be read with popular clients such as Gmail or Yahoo!. 

There are several requirements your email needs to meet to be AMP-compliant:

  • You need to meet all the security requirements.
  • Along with an AMP version of an email, you need to also include plain-text and HTML versions. They will be used if the AMP version cannot be displayed. The AMP MIME part needs to go before the HTML part.
  • AMP part needs to be smaller in size than 100KB.
  • The AMP version of an email must contain a valid AMP document. 

To create a proper HTML/AMP email, several components of code need to be included. Mailtrap offers a comprehensive step by step guide on AMP in emails, how to implement it and how to test it. All you need to do is read it and follow the white rabbit of interactivity.

A couple of useful tools for email interactivity

Here are some useful tools to add interactivity features and elements to your emails on the spot. They are pretty easy to understand and use, and sometimes the only thing you need to do is to copy and paste the code.

Appointments and bookings 

Lodago tool aims at creating emails where one can book an appointment directly inside the email. It is easy to set up and compatible with many CRMs. After you synchronize your professional calendar, you can send the email from Lodago editor and add a calendar icon so the recipients can choose a time slot that fits their needs.

Purchase tracking and management feature

Magento 2 AMP Email Extension by Plumrocket has a solution to add cart management directly to emails. This tool is good for both transactional and marketing emails. Magento 2 is an e-commerce CMS, and the plugin was built specifically for Magento 2. Plumrocket claims that “every time a recipient clicks or refreshes the email, the data like price, availability, reviews, product pictures, etc., will be updated in real time.” 

Interactive quizzes tool

LeadQuizzes software creates and integrates interactive quizzes. With over 75 free templates for active users, this tool helps create closed-ended, open-ended, multiple-choice, image, and other question types. LeadQuizzes can easily be integrated with several leading email marketing platforms like MailChimp, Ontraport, or Active Campaign.

Scratch off / reveal content creator & more

Zembula’s Smart Banners and Smart Blocks offer embeddable code for a number of dynamic content features to increase conversions and engagement, including scratch-off/reveal images, animated data, and catchy buttons.

Rollover and image carousel email tools

FreshInbox creates image carousels for an outstanding newsletter (including carousel thumbnails), or rollover effects for e-commerce purposes. The tools are pretty intuitive and straightforward. One only needs to follow the instructions and copy-paste a bit of code to the head and body HTML blocks.

A little less coding, a little more action: email templates and builders

In case you are looking for ready-made solutions for interactive email content thatrelies on AMP technology, you should probably consider these interactive email templates, builders, and editors. They may significantly save time and coding efforts.

Stripo

Stripo is rich in a variety of email templates and email-builder tools. You can either generate AMP elements with Google playground and then insert them in Stripo, build them with Stripo by using AMP templates, or drag-n-drop AMP blocks that require no coding per se.

Mailmodo

Mailmodo is a marketing solution and email editor aiming exactly at a little less coding, and a little more content action. Interactive forms, polls, ratings, bookings, accordions, and much more can be used to boost conversions and connect with recipients on a personal level with the help of AMP solutions.

BEE

BEE Plugin is an embeddable email builder aimed at creating a visual client experience. Its set of APIs helps customers convert emails into a PDF, update content snippets, create thumbnails, and get engaged in familiar interactive actions. Another strong point of the BEE plugin is that it is highly customizable.

Dyspatch

Dyspatch email builder has a claim to make: their email creation platform “reduces engineering resources by 90%”. Their integrations for Salesforce, SendGrid, Sparkpost etc are quite impressive. Dyspatch offers a wide range of empowering interactive email elements that can be delivered without writing any code. WIthout a doubt, it saves time and reduces costs.

Takeaway

Interactive email might be the right way to connect with your customers on a more profound and personalized level. Interactive email content has already proved its efficiency for enhanced user engagement, higher conversion rates, and better quality lead generation. Interactivity in emails tends to have a lighter footprint on mobile devices compared to mobile apps. Moreover, it brings the functionality of a website or a landing page to a user’s mailbox. There is a number of ready-to-go interactive tools and solutions to choose from on the market.

However, there is always the dark side of brightness. And interactive emails are no exception. 

The biggest trouble with interactive emails is that they run on AMP technology that is not supported by all email clients. This means that some of your customers will be left out on the interactive part. The other major problem is that coding and testing interactive emails is quite a labor-consuming process since you build it on three levels (HTML/plain-text/text-x-amphtml) at once while taking care of fallbacks (the alternative static content) to “fall gracefully” on interactivity if the email client doesn’t support kinetic elements. 

The best approach to interactive emails considering time/money/effort input can be formulated in the answer to one simple question: does interactivity deliver any unique experience to what you do?

If it does, then it’s time to set off on the interactive email journey. Just try not to employ interactivity for mere interactivity’s sake.

Article by Viktoriia Ivanenko Technical Content Writer @ Mailtrap