Many of the emails that land in our inboxes are 2-dimensional, containing anything from regular text, to images, to GIFs. The thing is, aside from providing visuals, emails don’t call readers to act. An interactive email, however, is different.
You may wonder: “What is interactive email, and how can I incorporate it into my strategy to increase engagement?” Simply put, it’s a regular email with elements requiring the recipient’s action, whether they’re hovering over a call-to-action (CTA) button or completing a survey. Like sprinkles on a cake, interactive content isn’t always necessary, but it does catch a reader’s attention and make your outreach memorable.
Here, we’ll go more in-depth on what interactive emails look like and how to make interactive emails for your business.
Depending on what you want your email to look like, interactive elements can vary. Whether you want to have your readers fill out an important survey or watch a company video, interactive emails help you directly incorporate those elements into the outgoing message.
Before you decide on adding interactive elements to all your campaigns, it’s important to remember that interactive email designs aren’t compatible with every inbox. While most function on Apple Mail and occasionally Gmail, very few work on Outlook or mobile devices.
If most of your recipients use Outlook or mobile devices, you may consider providing fallback (or alternative) images to display when the content isn’t supported.
Compatibility is also why you'll see HTML tables in most HTML email templates, including the code samples shared in this post. Most email clients don't support modern CSS layout techniques, so tables ensure proper layout among as many mail clients as possible.
Regardless of what you include, be sure to always test your emails before sending them out. Check out our email testing tool to view how your email will look across various email providers and screens. The tool also offers spam scoring and link validation to help you catch spammy content and broken links beforehand.
When creating interactive elements, you’ll modify the HTML that structures your templates and the CSS rules that style them. Each example in this post includes some instructions and the HTML and CSS code required to create one of our favorite interactive elements. To get the most out of these examples, some familiarity with HTML and CSS is helpful.
One of the most common interactive elements you’ll see in emails is a color change that responds to your mouse hover. This subtle feature draws attention to the CTA button in a simple yet effective way. Use the same hover color you use for your website to provide a consistent experience between the email and website.
Background color change on hover instructions
For most of the interactive elements in this article, you’ll need to add a CSS class selector to the styles in your template. You can then include the class within the element you want to style. In this case, it's an anchor tag. Below is an example from an email template in Twilio SendGrid’s Code Editor.
You’ll notice below there’s quite a bit of code. Most of this code styles the CTA button before you hover over it, and it's inline within the HTML span elements.
Changing the button's background requires you to override its original styling (the inline styles in each span element). You can do this by adding a class, .button-color, to set the new background color. Then, add a :hover pseudo-class to this new CSS class to activate the styles only when the cursor is on top of the button.
Finally, add !important to override any other styles on the element. While you should generally avoid using !important in your CSS, it can be necessary to ensure your styles apply.
CSS:
Once you’ve created the class and set its styles, you can add it to the HTML element you want to change. In this case, it's the interior span that forms the CTA button.
HTML:
2. Text change on hover
A similar interactive element is changing the text on hover. With this element, you can change the text color, bold it, underline it, or create any other font-style and text-decoration changes when the cursor hovers over.
In the following example, notice how the font color changes from white to black.
Text color change on hover instructions
The main difference between this example and the background color change on hover is the CSS property targeted and the CSS class selector referenced in the HTML.
In this example, you can see the .txt-color class, which has a color property applied on hover.
CSS:
HTML:
Font weight and text-decoration change on hover instructions
In this second example, the font changes when you hover the cursor to be bold and underlined.
Once again, the main difference is the CSS property modified and the CSS class selector referenced in the HTML.
At SendGrid, we found that email content with high engagement displays above the fold (also shown in an email before the recipient scrolls).
Swapping images on hover is a great strategy to promote additional products or provide more information above the fold, especially when you have limited space and time to engage your recipients.
Simply put, when a recipient hovers over an image, another image appears—so if you’re promoting a sale, you can feature more products with multiple images. Alternatively, you can also provide a product description behind the image to detail more information without the recipient needing to click through to the website.
Check out an example of this below.
Image change on hover instructions
To create the image-swap interactive element, layer the images in HTML by setting a background image in a table cell. You can reveal this background image on hover by resizing a second image that sits above it. The second image is an element inside the table cell. On hover, this image element resizes to a height of zero pixels, making it invisible and revealing the background image beneath it.
A table of contents feature is particularly useful for newsletter emails that contain a lot of content. Think about an article with jump links leading to specific parts of the webpage. Similarly, you can add anchor tags to your email so your recipients can skip to a part that interests them the most.
Here’s the caveat: while most desktop email providers support this table of contents element, it’s not compatible with most mobile devices. That said, if you know that most of your subscribers view your emails on desktop computers, then this interactive element may be for you!
In the following example, we included a table of contents at the beginning of SendGrid’s blog digest and used anchor tags to link to the articles in the email. With this method, a recipient can click on a specific article of interest and eliminate scrolling.
Table of contents instructions
Good news—no need for CSS in this one! The first snippet is the table of contents at the top of the email, which includes an ordered list. Each list item contains an anchor tag that links to an ID somewhere in the email—the ID uses the # symbol.
HTML:
Later in the email, you’ll add the IDs assigned in your table of contents to the corresponding headline elements. In this case, the headlines are H2 elements.
Another great use case for interactive elements is a survey. Incorporating surveys into your emails makes it easier for recipients to immediately respond without clicking out to another page. The more convenient it is for your recipients to engage, the more likely you’ll receive responses.
Use an embedded survey to gather feedback on your recipients’ experiences with your product or service—or learn more about your recipients’ likes and dislikes, location, and any other information that can help you personalize their experience. A welcome or confirmation email, for example, can be an excellent opportunity to insert a survey and get to know more about your subscribers.
Let’s look at a couple of examples.
In the SendGrid 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 go to a survey already marked with their numerical response that asks them to provide further explanation for their rating.
Embedded survey instructions
The method that SendGrid uses to embed the survey requires quite a bit of code, so here is a simpler example that uses Google Forms.
Create a Google Form and send it to your email address. Then, use your web browser's developer tools to inspect the code that renders the form. You'll copy this code block—an HTML table—and paste it into your email template where you can make any necessary style modifications to match your branding.
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 gets 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.
Interactive emails provide businesses with a unique way to boost engagement and drive conversions. With a well-planned marketing strategy and some best practices in your toolbelt, you can incorporate elements that breathe life into your email—that’s where we come in.
Twilio SendGrid is an email marketing platform that allows you to test interactive emails to ensure quality and measurable results. We even offer a library of email templates to help you get started.
Looking to use our platform for all your email marketing needs? Get in touch with our experts today to learn more.
