Make your emails interactive
Our templates include interactive sections that will help you create unique, immersive emails.
Need to ask your subscribers for a rating? The Star Rating section offers a 5-star rating scale, that highlights the selected number of stars when the user hovers them. Just like you're used to on a website:
Because of the poor support in email clients, this section does not use forms. Instead, each star is wrapped in an anchor tag that must be linked to an endpoint (URL) that will record the user's rating.
For example:
<a href="http://example.com/product/rate/5" style="color: #DDDDDD; display: block; font-size: 38px; text-decoration: none;">★</a>
You need to set the proper rating URL inside href="", for each star in particular.
Currently, the Star Rating hover effect works in the following email clients:
.star:hover a, .star:hover ~ .star a {color: #FF4556 !important;}
Accordions can be useful to reduce the height of your email on mobile. In supporting email clients, the content area is collapsed and can be expanded by clicking on the title.
Example
On mobile, it works just like you're used to: clicking an accordion title reveals the content inside it.
The interaction is handled with :hover, just like with the hamburger menu. Therefore, it doesn't close when you click the title again, it doesn't work like a toggle.
In most email clients except iOS Mail, you can touch outside to close it, or touch another title to close the current one and open that instead.
For desktop, the accordion items are all opened.