AMP emails are interactive messages that contain dynamic elements: carousels, purchase buttons, or checkboxes. The recipient can interact with the content right in the email, which boosts the engagement of the audience. Such emails help you catch and keep the attention of the subscriber, motivate them to go to the website, which means, they increase the click-through rate of your email campaigns.
With Selzy, you can create an AMP email with a carousel. It is one of the most popular AMP elements for emails and allows you to add several images to swipe in one block. With it, you can get a better showing to your goods by displaying it from different angles, or place several sales offers at a time. Such an approach to presenting visual information helps in increasing sales, as well as making your email more unique and eye-catching.
In this article, we’ll give you a detailed description of how to create an AMP email with a carousel using the Selzy Block Builder.
What you need to know about AMP emails
Email service providers that support AMP emails
Currently, the AMP technology is supported by Gmail, Mail.ru, and Yahoo. Other less popular email service providers don’t have AMP elements enabled in their emails yet.
If the email service provider used by the recipient to register their email address doesn’t support AMP emails, the subscriber will get an HTML version of your email without a block with the AMP element. To have all your clients get the right email with fully-functional content, make sure to have an alternative version of the email. To do this, apart from a carousel block, create blocks with static images in your layout. You’ll find the information on how to do this below.
Permission to send AMP emails
To be allowed to send campaigns with AMP element, you should preliminary get permission from email service providers.
An interactive email contains a script in its code. And email providers forbid delivering messages with dynamic content or even cut it out from the email. Such restrictions are important to prevent spammers from spending viruses via emails. That’s why each person who wants to use scripts in their emails, must prove they are benevolent senders.
Getting Permission to Send AMP Emails
Creating an AMP email with a carousel
Step 1. Create an email in the Block Builder
To create an AMP email with a carousel, click on the Create a Campaign button on any page of your Account and choose Email in the drop-down menu.
On the Templates tab, choose Selzy templates with an AMP element in a separate part of the menu.
Design an Email From a Template
To create an email from scratch, go to the Start from Scratch tab and choose the Email Builder.
AMP elements can be used only in the Email Builder. The HTML editor does not support AMP designs.
Let’s create an email from scratch to show you the whole process of adding and setting up of a carousel.
Step 2. Fill your email with content
First, create a basis for your email. Add the header with the logo, the link to the web version of your email, the text, and the foooter with social media. Add each block to a different row to be able to apply different settings to each of them.
Creating an Email in the Selzy Builder
Step 3. Add the Carousel block
Drag the Carousel block to the place where the banner should be.
To add the first image to your carousel, click on the Browse button inside the block.
When you have picked the right image, click on the Insert button.
After you have created the first slide, click on the Add New Slide button and choose another image for your carousel. There is no slide limit for a carousel, however, we don’t recommend overcluttering the block with content. Around 3-5 images are enough.
Prepare the images with the same proportions beforehand. A carousel looks best when the images used are of the same size.
If you add images of different sizes, it’s the first slide that will define the carousel proportions, whereas the other slides will be adjusted to their ratio.
We’ll choose 3 images of the same size to have our carousel look neat.
Let’s assign links and alternative texts to each image, according to the recommendations on campaign design.
Step 4. Setting up the carousel
If you need to change the sequence of your images in the carousel, drag the needed image up or down in the block properties.
Let’s add autoplay — an automatic change of slides in the carousel. To do this, in the Content Properties tick the Autoplay checkbox and give the right interval (in seconds).
Let’s also allow the recepients to swipe the slides by ticking the Navigation checkbox in the properties.
In your email under the carousel, there will be navigation buttons, which the recipient can use to turn to another slide. You can also change the color for the navigation buttons in the block properties.
Step 5. Add a description to the carousel
Dynamic content is not always intuitively clear because part of the information is initially hidden from the recipient, and they have to do some action to see it.
That’s why we recommend adding a description of the actions to be performed so that the subscribers miss no single part of the information. It’s especialy important if you use gamification elements.
Let’s now add a short text under the carousel that will serve as a hint. This block is used only in the AMP version of the email, that’s why we’ll hide it in the HTML version. To add your text, click on the text and choose HTML next to the Hide On parameter in the block properties.
Step 6. Create blocks with static images for the HTML version of your email
Next, let’s add blocks with static images that will be displayed to those recipients who disabled dynamic content in their mailbox settings or whose email service provider doesn’t support AMP.
Drag 3 Image blocks from the Content tab to the working area under the Carousel block and choose for them the same 3 images as for the carousel.
To make them visible only to those recipients that have AMP elements disabled, let’s turn these blocks off for the AMP version of the email. To do this, click on each block containing an image and choose Hide On — AMP in the properties.
In the right-hand corner of the block you’ll see the sign of a crossed-out eye and the abbreviation of AMP.
Step 7. Check what the email will look like
You can check what your email will look like for both the AMP version recipients and the HTML version recipients in the preview mode. To do this, click on Actions in the left-hand upper corner and choose Preview.
Now, you can check up what the AMP email and its HTML version will look like on desktop and on a mobile device.
Keep in mind that part of your clients will open the email on their mobile phones. When viewed on a mobile device, all images will be reduced to the width of the display used to open the email. That’s why don’t use the text or the elements that are too small because it will be hard to read them on a mobile device.
How to Adapt an Email for Mobile Devices
Step 8. Send a test AMP email
We highly recommend that you test send the email to your address before sending it to your clients. To make sure the email will be correctly displayed for all your recipients, open it in different email service providers on different devices and operating systems.
You can test an email with a carousel even before you register as an AMP sender with email service providers. To do this, add your address to the list of safe senders in Gmail.
You need to enter Gmail and proceed to the settings (by clicking on the gear symbol in the top right-hand corner) to go to the See All Settings section.
In the opened-up page, enable the dynamic content in your emails.
Then, add the email address used to send the test email to the list of safe senders. To do this, click on the Developer Settings and give your address in the “Always allow dynamic emails from this sender” field.
Make sure that you click on the Save button in the bottom of the Settings section.
Now, let’s send the emal rom the address given iin the safe list in Gmail. To send the email right from the Builder, click on Actions — Send Test in the top left-hand corner.
Choose the sender and the recipient addresses and click on the Send button.
Here is what an AMP email looks like in the Gmail mailbox.
And here is what an AMP email looks like in a mailbox that doesn’t support AMP elements.
