Interactive Sections

Make your emails interactive

Our templates include interactive sections that will help you create unique, immersive emails.

Star Rating New

Note: this section has been introduced starting with the Marquez 2.0.0 Email Template.

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:

Star Rating Example

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.

Heads up!
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.
Email Client Support

Currently, the Star Rating hover effect works in the following email clients:

  • iOS Mail
  • Gmail Web
  • Apple Mail
  • Outlook iOS
  • Outlook Android
  • Gmail Android 6, 7
  • Some Android 6 and 7 Native Clients
Warning: 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
  • Spacing is done with Dividers
  • 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 clients, 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

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.

Example

Example accordion
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.

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.

Customisation
  • Text can be changed with inline CSS
  • Background of the title can be changed with the bgcolor="" attribute value on the accordion-trigger button and inside its table
  • Spacing between accordion items is handled with Universal Dividers
  • Top/bottom spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section

Next Up: Team →