What are interactive email elements?
Many of the emails that land in our inbox are 2-dimensional. The emails contain text, images, or maybe gifs, but they aren’t interactive. When you scroll over a button, it doesn’t change colors or pop. When you hover over an image, it doesn’t flip to another image. At least, not unless the sender has incorporated interactive email elements into their campaigns.
Interactive elements in emails are anything that requires action by the recipient to display. This action could be hovering over a CTA button with a cursor or clicking on an answer in a survey.
Like sprinkles on a cake, interactive content isn’t necessary, but it does catch your recipient’s eye and draw them in, improving their experience with your email campaigns. If you’re looking for more ways to engage your recipients, consider testing one of the following interactive elements in your campaigns.
Compatibility with email service providers (ESP)
Before you get your heart set on adding interactive elements to all your campaigns, it’s worth noting that interactive email designs do not work in all inboxes. While the vast majority function in Apple mail and some work in Gmail’s inboxes, very few function in Outlook or on mobile.
Keep this in mind when designing interactive elements in your emails. If you know the majority of your recipients use Outlook or view your email on their mobile devices, then you may want to focus on testing other aspects of your email. Or, at the very least, provide fallback images or designs for email clients to display when interactive content is not supported.
Regardless of what you include in your email, be sure to test your emails in multiple email clients before you send them. This way you can fix any issues or design flaws before sending out your email to your contact database.
Check out our Email Testing Tool to view how your email will look across a variety of email providers and screens. The tool also offers spam scoring and link validation, so you can catch spammy content and broken links before you send.
How to add interactive elements to your emails
There are a variety of interactive elements that you could add to your emails. Here are a number of our favorites. We include examples and snippets of code so you can try out these elements in your email templates.
1. Background color change on hover
The color change when your mouse hovers over the CTA button is one of the most common interactive elements you’ll see in emails. This subtle feature draws attention to the CTA button. Use the same hover color you use for your website to provide a consistent experience between email and website.
In the example below, Really Good Emails uses the color change on their CTA button.
This is how you do it
For most of the interactive elements in this article, you’ll need to add a class to the CSS portion of the template. You’ll then include the class within the <a> tag of the section you’d like to be interactive. This is an example from an email template in Twilio SendGrid’s code editor.
You’ll notice below there’s a fair amount of code, but most of it is to style the CTA button before you hover and how it looks when you hover. To activate the hover functionality, you mainly need to change the class (line 12) to match the correct CSS property.
CSS:
HTML:
2. Text change on hover
A similar interactive element is changing the text on hover. With this element, you can change the color of the text, make it bold, underline it, or make any other text-related design changes when the cursor hovers over the text.
In this example, the font color changes from white to black.
This is how you do it
The main difference between this example and the background color change on hover are the CSS and the CSS property that is referenced in the HTML.
CSS:
HTML:
In this second example, the font changes when you hover the cursor to be both bold and underlined.
This is how you do it
Once again, the main differences are the CSS and CSS property that is referenced in the HTML.
CSS:
HTML:
3. Image swap on hover
We’ve found in emails the content most engaged with is above the fold (aka the content that is shown in an email before the recipient scrolls).
Swapping images on hover is a great strategy to promote additional products or provide more information when you have limited space and time to engage your recipients.
When a recipient hovers over an image, another image appears, so if you’re promoting a sale, you can feature more of your products by including multiple images. Alternatively, you can provide a product description behind the image to give more information without needing to click through to the website.
Check out the example below!
This is how you do it:
The image swap interactive element is created by layering the images in HTML so that there is first a background image in a table cell and a second image available when you hover your cursor.
CSS:
HTML:
4. Table of contents
A table of contents feature is particularly useful for emails like newsletters that have a lot of content. Think about an article you read online that has jump links that lead to specific parts of the web page. Similarly, by adding anchor tags to your emails, your recipients can skip to the part of the email that interests them the most without having to scroll.
While this table of contents element is supported on most desktop email providers, the caveat is that most mobile apps do not support it. If you know that most of your subscribers view your emails on desktop, then this interactive element may be for you!
In this example, I included a table of contents at the beginning of SendGrid’s blog digest and use anchor tags to link to the articles in the email. With this method, a recipient can click on the specific article they’re interested in.
This is how you do it:
No need for CSS in this one! The first snippet is the Table of Contents list at the top of the email and the second is how you would link the article title further down in the email.
HTML:
5. Embedded survey
Another great use case for interactive elements is a survey. Incorporate surveys into your emails to make it easier for recipients to immediately respond without having to click out to another page. The easier it is for your recipients to engage, the more likely you are to receive responses.
Gather feedback on your recipients’ experiences with your product or service or use the survey to learn more about your recipients’ likes and dislikes, location, and any other information that can help you personalize their experience with your email. A welcome or confirmation email can be an excellent opportunity to insert a survey and get to know more about your subscribers.
Here are a couple of examples.
In SendGrid’s email below, the survey scores change colors as you hover over them. This helps the recipient recognize that they can click the number to submit their survey. Once the recipient clicks a number, they’re taken to a survey that has already marked their numerical response and asks the recipient to provide further explanation for their rating.
This is how you do it:
The method that SendGrid uses to embed the survey requires a fair amount of code, so here is a simpler example that uses Google Forms.
- Create your survey in a Google Form.
- Click send.
- Type in your email address in the “To” section.
- Check the box, “Include form in email.”
- Click send.
- Open the email in your inbox and right-click on the form. Click “Inspect.”
- Find the code that starts with, <table=”center align”. Copy and paste the code into your template.
- Test your email to make sure the survey works.
In the email below, you can see the Google form in action. The recipient is welcomed to the email list and asked to fill out a quick survey on their style preferences. Change the background color of the survey to help it fit in seamlessly with your email template. This email was created with one of the email templates from our Email Template Gallery. Check out the gallery for a variety of marketing and transactional templates.
Continuing to engage your recipients
When it comes to designing marketing emails, remember that the value you provide to your recipients is the most important aspect of your email.
We’ve found that interactive content helps engage recipients by creating an experience similar to that of a website or app, but this isn’t always the case. If the interactive element is distracting or takes away from the message you’re trying to get across, then it isn’t worth including.
To ensure your interactive content hits the mark, here are a few parting recommendations:
- Know which email clients (Gmail, Yahoo, AOL, Outlook) you’re sending to. This will help you determine if it makes sense to test interactive elements in the first place.
- Always have a fallback option. If you send an email to a recipient with interactive content that doesn’t display, your recipient will have a poor experience with your brand. For information on how to create fallback options to your interactive content, check out Email on Acid’s article.
- Test your emails before you send them. You can use SendGrid’s Email Testing Tool, Litmus, or Email on Acid.
- Don’t test more than one interactive element at a time. Too many can get distracting.
Interactive content is one of many aspects of an email marketing strategy that you can test. For more data, digital marketing strategies, and channels to engage your recipients, take a look at these resources.