Creating an AMP Email with a Carousel

 

This article describes the old Selzy email builder. You can find information about key features of the new email builder in the overview article available in English.

If you need help with the functionality described in this article but in the new builder and can’t find it in the overview article, please contact our Support Team.

Selzy Support Team is available for all users 24/7.

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.

Go to the page where you can create a new email campaign.

On the Templates tab, choose Selzy templates with an AMP element in a separate part of the menu.

Design an Email From a Template

When creating your campaign, you can choose a pre-created template with an AMP element.

To create an email from scratch, go to the Start from Scratch tab and choose the Email Builder.

Choosing the Builder to create an AMP email.

 

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

Creating the text of your email, the header and the footer.

Step 3. Add the Carousel block

Drag the Carousel block to the place where the banner should be.

Dragging the Carousel block onto the working area.

To add the first image to your carousel, click on the Browse button inside the block.

Beginning working with the Carousel block — choosing the images.

When you have picked the right image, click on the Insert button.

Picking the right images for the carousel.

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.

Adding several more slides and choosing the right images for them.

 

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.

Completed carousel with 3 slides.

Let’s assign links and alternative texts to each image, according to the recommendations on campaign design.

Setting up images for the carousel.

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.

Changing the sequence of the slides in the carousel.

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).

Enabling autoreplay of your slides with an interval of 4 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.

Enabling navigation for manual swiping of the slides in the carousel.

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.

Hiding the hint in the HTML version of the email.

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.

Placing 3 separate static images under the Carousel block.

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.

Hiding the display of the blocks with static images for the AMP version of the email.

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.

Proceeding to the email preview mode.

Now, you can check up what the AMP email and its HTML version will look like on desktop and on a mobile device.

The preview of different versions of your email.

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.

Proceeding to Gmail settings.

In the opened-up page, enable the dynamic content in your emails.

Enabling dynamic email in Gmail.

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.

Adding our email address to the list of safe senders in Gmail.

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.

Proceeding to the section where you can send your test email right from the builder.

Choose the sender and the recipient addresses and click on the Send button.

Sending a test email to a Gmail mailbox.

Here is what an AMP email looks like in the Gmail mailbox.

Test email with an AMP carousel in Gmail.

And here is what an AMP email looks like in a mailbox that doesn’t support AMP elements.

The HTML version of an AMP email in the mailbox.

Did we answer to your question?

0
0