Most articles on email design trends say that interactive emails are the number 1 trend for today. But how do you create one?
Ways to create interactive emails
There are two ways to do it:
Way 1. Coding one on your own
In our "8 Examples of Interactive Content in Emails" blog post, we shared a detailed manual on how to build elements as follows on your own:
- CSS-animated button;
- star rating;
(This kind of interactivity is fully compatible with all major email clients, both on desktop and mobile devices)
- embedded multi-question surveys;
- image rollover effect;
- image carousel;
- embedded videos;
- anchor links.
(Source: Email from Mercedes-Benz)
Following the steps from our guide, you are able to build an effective interactive email on your own.
Way 2. Using our prebuilt interactive email newsletter templates
This one is even easier. You simply choose any of the templates that we have thoughtfully created for you, modify it in accordance with your goals and needs.
You will only have to replace our images with yours, with no need to deal/edit/customize with HTML code.
How to edit an interactive email template
In some cases, but not all, you will have to deal with the code. No worries! You will not have to edit the code, you will just be asked to replace our images/colors with your through the code.
We will show you how to edit Stripo's free interactive email templates.
1. Merry Christmas template with falling snowflakes
To edit the background color behind the snowflakes you just need to click the "Stripe" button to activate the settings for the entire stripe, then choose the necessary color in the settings panel.
Additional images, text, and all you also edit/customize in the settings panel. Piece of cake.
2. The "Useful Video" email template
Do you want your users to do the same right in their emails without the need to leave their inboxes?
(Source: Email from Adidas)
Then you will need to use our "Useful Video" interactive HTML email template.
How do you send your videos instead of ours?
- open the template in the editor;
- click on the video element right in the email;
- open the HTML code to work with the code of this particular email element;
- replace links to our videos with links to your videos.
LINK 1 — stands for the custom thumbnail image for your embedded video to make it even more noticeable;
LINK 2 — link to an MP4 video, uploaded to your or any external site;
LINK 3 — is a link to a fallback video, normally a link to your video on Youtube or any other video hosting site. Yes, for those users whose devices/email clients do not support this kind of interactivity. They will be directed to Youtube or any other video hosting website;
LINK 4 — is a link to your fallback thumbnail image. In case the videos differ.
As for the "Remove this line" part... That link is a link to your video for mobile devices. But it is necessary only if your MP4 video is not adjustable for mobile devices. However, normally, it is.
3. The "Top Courses for the education industry" email template
Accordion makes your emails look organized and well structured.
So, how do you edit this interactive email template?
You can edit text via code or in the settings panel. And edit colors right in the settings panel.
All other interactive HTML email templates that Stripo offers can be edited through the settings panel.
As you can see, it's not that difficult to edit/use our templates.
Did you know that you can create an interactive template on your own, save it in your personal account and reuse it for further campaigns?
Join over 800K users
Start for free — upgrade anytime