In the first blog posts about interactive email of this series, we saw how dynamic and personalized images can provide a new level of individualization. Images are an important part of interactive email and the basic layer for a set of further elements and actions that make an email interactive.

They are the basis of the fully functional email advent calendar we created. In the case of the advent calendar, the images were modified every day. The current day was highlighted and clickable. every time the recipients opened the email.

How do we define an interactive email?

« An interactive email is an email where a click
triggers an action within the same email. » Mark J. Robins

So the interactive email is defined by user interaction inside the email, much like we would see the difference between
a picture (which is static) versus
a movie (which is dynamic) versus
a game (which is interactive).

Interaction can make experiences a lot more engaging, have a look at this video for example.

Creating an interactive advent calendar email

In our interactive advent calendar, the interactivity is created by clicking on current day’s window. It opens a pop-up layer directly in the email. The content of the pop-up changes every day. The pop-up is loaded from the server in real-time when the email is opened.

On click a form appears in the email.

By clicking a form appears inside the email.

How does this work? The email contains a set of html container elements such as list items, paragraphs, divs and images. These elements are hidden by default but get displayed by classes in the daily changing css file which is loaded from the server at each open.

The content is added to the email by using the ::before / ::after pseudo classes and the “content” css attribute. Links are routed via a script that redirects to the proper target url according to the current day.

Through this, we were able to send the email only once a week and not to bother our audience with a daily email dispatch (which would inevitably result in a significant unsubscribe rate).

Prefilled form for prize draws and subscriptions

About one-third of the days in the advent calendar contained a prize draw (for example the Dec. 16th). The recipients could register directly from within the email. First, users had to accept the T&C before the “participate” button became clickable. Clicking it then opened a new pop-up layer, containing the (already pre-filled) participation form. For the recipient a significantly better user experience, especially on mobile devices.

We A/B tested this streamlining of the subscription workflow for an event registration email. Compared to the classic button to landing page approach the pre-filled form in the email provided a 27% uplift in registrations for the event.

The pre-filled form as it appeared in the email.

The pre-filled form as it appeared in the email.

Preview part 3
In the third part of this series, you will learn how real-time content can boost conversions and how image galleries or even a live twitter feed can boost an email campaign.

Cyrill Gross

Cyrill Gross

Author

Cyrill Gross is Senior Consultant, Key Account Manager and Partner at Mayoris AG. Responsible for operational belongings, cooperation and processes with the customer as well as strategic consulting for email marketing and system integration issues. Expertise in HTML for emails, especially responsive design and solutions many others would call "impossible". Speaker at conferences and fairs in Switzerland and abroad.