Make your emails interactive
Sartre Email includes interactive sections that will help you create unique, immersive emails.
Accordion
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.
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 mobile 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 email clients, the accordion items are always expanded.
MailChimp Note
The accordion is not currently supported by MailChimp, because their system strips out any form tags, and our accordion needs to use <button> tags. Therefore, our MailChimp-integrated templates do not include the Accordion section.
Star Rating
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.
Note
Stars in the email are shown in reverse when compared to the actual order in the HTML code. This is for the hover effect to work, so always remember: the first star you see on page is actually the last one in the code.
Star Rating Email Client Support
Currently, the Star Rating hover effect works in the following email clients:
- iOS Mail
- Gmail Web
- Apple Mail
- Outlook iOS
- Outlook Mac
- Outlook Android
- Gmail Android 6, 7
- Some Android 6 and 7 Native Clients
MailChimp...
Currently, MailChimp removes the unicode-bidi: bidi-override; inline CSS that is needed to enable the hover effect. This means that only the star being hovered will change color, if you're using this section in MailChimp.
Customisation
Accordion
Text can be styled with inline CSS.
Background of the title can be changed in the bgcolor="" attribute on the <button class="toggle-trigger"> button, and on the <td> wrapping the title text.
Top and bottom spacing: change the line-height: value on the <div class="spacer" tags, found near the top and bottom of the HTML. For mobile spacer customisation, learn more about spacers in Acorn.
Star Rating
Top and bottom spacing is done with Acorn Spacers.
Change the star color on hover in the embedded CSS from the template's <head> tag:
.star:hover a, .star:hover ~ .star a {color: #FF4556 !important;}We suggest sticking to 5 stars: although it's OK for desktop, more stars will blow up your layout on mobile.
Star size and color can be changed with inline CSS. It's best that you do not exceed the pre-defined font-size, as doing so might blow up the email on smaller mobile screens.