What is the Accordion block? How to use it?
AMP for email allows senders to include AMP components inside rich, engaging emails, making modern app functionality available within an email. The AMP email format provides a subset of AMPHTML components for use in email messages, allowing recipients of AMP emails to interact dynamically with content directly in the message.
Emails written with AMP can contain interactive elements such as: an image carousel or accordions, real-time content, the type of content that is always up-to-date/updated in the email when the email is opened, or gamification.
Let's take a closer look at the accordion block:)
The Accordion block allows you to open/hide some pieces of the content when being clicked on. This element enables saving space and does not distract the customer with the information they may not need.
How to build an AMP accordion with Campaign:
-
Enter your email template and drag the "Accordion" block into it;
-
Add the needed number of sections to the accordion;
-
Give all sections' names. You can enter up to 200 characters;
-
Now enable the "Auto-collapsing accordion" option. It allows you to show one section at a time. When you open any other section, the previously opened one is closed.
-
You may want one section to expand in your emails to let your customers know there’s some content hidden in these sections. To do so, please toggle the "Expanded" button for the necessary section;
-
The "Animated expansion" option is ON by default. It activates the "transition" property, allowing your sections to open and close slowly. If it does not need it, you can always turn it OFF by toggling the button;
-
Now you can customize the accordion design;
Set the background color, outline width and color, section text color, and font size.
Important to note: now you are working on the accordion’s section design.
In other words, this is what customers see when the accordion is not expanded;
-
After that, fulfill those sections with your content;
It can be anything like images, text, buttons, banners, social media icons, videos, etc.
-
Result.
How to test AMP emails?
-
You can test it in your Gmail box when you send the test from Campaign. Please click on the "Test" button above the template;
-
In a pop-up window, enter your email address and click the "Send Test" button;
-
You should go into your mailbox settings in Gmail and turn on the option to receive dynamic content;
After all these steps, you will be able to test displaying your AMP emails.
Getting Whitelisted with Google and Yahoo
If you want to make your own sending, your mail should be white-listed in the Google/Yahoo service, so now I will tell you how to do it in just a few steps.
To get whitelisted with Gmail and Yahoo, you need to:
-
authenticate your emails using SPF and DKIM;
-
check the destination of XHR;
-
make sure the DKIM signature matches the domain of your sender address;
-
have a permanent history of mass mailings;
-
send an AMP email to [email protected] (Google) and [email protected] (Yahoo);
-
fill out the Sender Registration Form.
This form is designed for both mail services that support AMP.
After submitting the registration form, you will see the following notification:
You will not receive any other notification from Google or Yahoo until you are whitelisted.
