How to Add Accordions to Your Emails

How to Add Accordions to Your Emails


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. 

tinyEmail add an accordion


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. 

tinyEmail custimize accordion settings


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


load text into section


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. 


customize field settings


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.

switch on toggle to open section


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.


section switch off html


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. 

backup for accordion fail


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.



    • Related Articles

    • How to Add Carousels to Your Emails

      How to Add Carousels to Your Emails Enhance messages with an image slider This article shows you how to configure an AMP Carousel block for an email template. Unlike most image sliders, this one works inside an email message and can be displayed by ...
    • How to Send AMP Emails

      How to Send AMP Emails Get started with sending AMP Emails with tinyEmail Are you ready to send emails with interactive AMP (Accelerated Mobile Page) components? Well, hold your horses. Let me explain. Here at tinyEmail, we give you the tools you ...
    • tinyEmail Merge Tags: Personalize Your Emails and Boost Engagement

      tinyEmail Merge Tags: Personalize Your Emails and Boost Engagement Want to send emails that truly connect with your subscribers? Say goodbye to generic messages and hello to the power of personalization with tinyEmail's merge tags! Merge tags are ...
    • How to Add Custom Fonts to Your tinyEmail Templates

      Custom Fonts in tinyEmail Templates Introduction Are you tired of being limited to the standard fonts available in your email template editor? With tinyEmail's new Custom Fonts feature, you can now add any font you desire to your templates, giving ...
    • How to Add Video to an Email Template

      How to Add Video to an Email Template Increase reader engament There are so many reasons to inject video into your email marketing campaign. Tell a story. Show your brand. Demonstrate social proof. Get clicks. Yes, research suggests that email ...