How to Add Accordions to Your Emails

Inject interactive content

Ready to add a new level of interactivity to your email messages?   

If yes, then add AMP to your design toolkit. AMP (Accelerated Mobile Page) lets you add interactive components to email templates like accordions or carousels. 

Here's the good news. No coding is required. Simply drag and drop tinyEmail blocks to the canvas and then add your own customizations.  

But ...

Dynamic content in an email template sounds great, but there's a but. Email templates with AMP content don't display properly in all email clients. 

Based on our research, only four email clients (Gmail, Yahoo, Mail.ru, and FairEmail) support AMP messages. Plus, these clients must whitelist your tinyEmail sending address. Once whitelisted, readers with these email clients can properly experience AMP content in your messages. 

If the sending address is not whitelisted, AMP components in your emails won't display. 

• Click here to learn how to get a sending email address whitelisted by these email clients. 

Sad to say, but AMP (in its current state of development) might not be for everyone.

.

Ready to try it

Still want to build email templates with AMP content? Here's how.  

1. Review our instructions below for the accordion. 
2. Consider adding backup content for readers with devices that can't display AMP content. We show you one way.
3. Learn how to whitelist (see below) the email address you use to send tinyEmail. You need Google to whitelist your address before you can send AMP content. 

• BTW  We show you how to add an AMP Carousel in a different article.

Add an accordion

An accordion works like a folder that expands and contracts with mouse clicks. 

Open a template and place an Accordion block inside a structure. Click the structure to make it the active layer and go to the side panel.

The Animated expansion toggle is On by default. When enabled, this setting slows down the transition from one open accordion layer to the next. That's optional. 

Create the first section

A section has a label and content field. The label displays when the field is open or closed. 

Scroll down the panel to the Section 1 heading. Enter text into the field. tinyEmail automatically loads that text into the section label.

To add content to the accordion, click an icon inside the blue field. Add an image, text, button, social media icons, or video.  

Set the font size and padding for the section and different background colors for the label and content field. Switch on the Outline toggle to customize border thickness and color. 

There are a couple of ways to customize the height of the content field. Switch on the Fixed height toggle to increase the size of the field. Adjust line spacing if your content is text. 

Add a section

Click the Add section button at the bottom of the panel. Repeat steps to insert a label and content.

Options

When you create two or more sections, the Auto-collapsing accordion button displays. Switch on this toggle to display one expanded section answer at a time. When one opens, the other closes.

Switch on a toggle to automatically expand a section when readers open their email.

Important step

Before you test the template, complete one more step. Click the structure that holds the accordion. Scroll down the side panel to the Include in heading. Make sure the basic HTML tab is not selected. If selected, the email will not display AMP content.

Backup

For readers with devices that can't display AMP content, you could add backup content (HTML version). In the example below, we created an FAQ section with headers and text. 

Test AMP emails

It's not possible to check out your AMP content in the standard Preview window. To inspect your design work, create a campaign with the template that has AMP elements and send an email to a test account. 

A final word

If you've read all the way through to the end, it might be obvious that creating an email template with AMP content, like an accordion, is quick and easy with tinyEmail. The challenge is completing the upfront prep work, like getting whitelisted.