How to Add Motion to Your Emails With the AMP-Carousel
A new tool to make your newsletters more engaging
If you’re an email marketer, you know how important it is to add something extra-special to make your emails stand out in the inbox. It has become increasingly popular to include animated gifs to catch the customer’s eye with motion. But so much more is possible with AMP for email.
What if your email could include a hero slider, like what you see on most websites? They’re designed to be eye-catching and informative, and are a great way to convey multiple ideas and benefits to your audience.
For the first time in the history of email, you finally can include a real, live carousel that is interactive or can animate on its own in a loop. Let me show you how easy it is to do this with AMP for email.
Before you can send AMP emails to your audience, there are a few prerequisites. I won’t go over those now since that’s covered elsewhere. Plus, the AMP project has a really fun playground where you can experiment with creating AMP emails without any setup.
Quickly Code Your First Image Carousel
I’m going to show you how to create a simple image carousel from scratch. But if you’re not up for that, below I’ll show you how to drag and drop a carousel into your email with absolutely no code, using AWeber. (Full disclosure, I work for AWeber, and we love AMP.)
Add the amp-carousel component to the <head>
This includes the necessary components in your email so that you can add an amp carousel in the <body>.
Insert a carousel to your email body
Next, we’ll add the carousel component into your email’s <body>. At the same time, let’s specify a few attributes so that the carousel looks and operates to our liking.
I set the width of my carousel to 300 and the height to 100, but at the same time, chose the responsive layout so that my carousel images scale well when seen on mobile devices.
I chose type = slides so that only one image will be shown at a time. Another option is to choose type=carousel which gives you a continuous scroller. You can use that if you like to show portions of the next and previous slides in the view.
I like to set my carousel to autoplay and I set a delay of six seconds before the slide is advanced. Since most emails are static, it’s a nice effect for the carousel to advance automatically, which may encourage your audience to interact with your carousel.
Setting the carousel to loop means that as the carousel reaches the final slide, it will advance to the very first slide. I personally don’t like to make my readers scroll in the opposite direct to view my content again.
Add image slides to your carousel
You should know that each of your slides can contain any HTML markup that you like. To keep things simple for now, I’ll simply show you how to add an image to each slide. Place the following markup within your <amp-carousel> element.
Now, simply add as many image slides to your carousel as you like and bang! — You’ve got your first image carousel.
The complete code example
To make things easy for you, I’ve included my code sample here. I sourced some really nice images from Unsplash. The images are by Ján Jakub Naništa, Marko Blažević, and Jf Brou.
Send yourself a test email
If you’d like to experiment and ultimately send your carousel email to yourself, visit the Gmail playground.
The No-Code, Drag-and-Drop Option
As promised above, here is a much simpler option for adding an AMP carousel to your email without writing any code at all. At AWeber, we thought AMP was so neat that we decided to build the carousel right into our message editor.
Using AWeber, it couldn’t be more simple to add a carousel to your email.
- Drag the carousel element anywhere in your email template.
- Create as many as six slides.
- Upload an image for each slide.
- Preview and send your email.
Taking the Carousel to the Next Level
Image carousels are just the beginning. Recall that your carousel slides can be comprised of just about any HTML markup. At AWeber, we already have customers using the carousel in really creative ways like:
- Content carousel — Display a blog post summary on each slide. Include a featured image, article title, summary, and a Read More link to view the full article on your website.
- Product feature— Create a product carousel to promote a selection of products from your e-commerce store. Include the product photo, product name, sale price, and a Buy Now button linking your readers to your shop.
- Food Recipes — Create an interactive carousel showing how to bake your featured recipe. Each slide might show an image of what’s happening in that step of the process, along with a paragraph or two of instructions.
Need Some Help?
If you need help getting started sending AMP emails that include dynamic features like the carousel, just let me know by adding your comments and questions to the article. And don’t forget to let me know what AMP for Email topics you’d like to see covered next. Interactive forms, quizzes and polls, sentiment widgets…?
