Did you know that you can create Facebook-like updating feeds right inside your emails? It is now a reality with the help of an AMP email component known as amp-list.
This guide will discuss amp-list and how you can use it in your AMP emails.
Table of contents
What is amp-list?
The amp-list is an AMP email component that dynamically creates list items by taking data from the backend. Unlike traditional HTML emails, this allows you to create dynamic emails that change their content over time. Due to this functionality, the amp-list has many applications and some of them are discussed below.
Applications of amp-list
Following are some of the ways in which you can use the amp-list:
1. Create repeating content sections
If you have a series of content sections containing the same content type, instead of creating them separately, you can use amp-list to populate all the content sections at once.
For example, if you have a list of your blog posts, you can create a section for each of your posts. In each section, you can show a featured image, blog title, description, and CTA containing the link to your blog post. You can populate all the images, titles, descriptions, and CTA links at once with amp-list and save a significant of time.
2. Send personalized offers
Sending the same offers for all of your users may not be a good idea. Because different types of users have different types of needs. So by analyzing the behavioral data you’ve collected about your users, you can create personalized offers for different types of behaviors. Then with amp-list, you can create different sections for each offer and populate all the details at once and send them to your users.
This will help you increase your sales and it will also gain your customers' trust since they’ll feel like you know their pain points and send personalized solutions.
Related guide: An Ultimate Guide to Creating Personalized Emails
3. Show updated balance
With the help of amp-list, you can show the information that will change over time. For example, if you have a fintech app like Cred and want to update the remaining balance in your user account via email, you can add the amp-list item in the remaining amount section. So in your AMP email, users can see how much balance is remaining after spending their money.
4. Create updating galleries
You may want to show additional images of your recent products, portfolio samples, or just stock photos. You can create a dynamically updating image gallery right inside your AMP emails with the amp-list.
5. Include calendar for bookings
Whenever sending a booking system in your AMP emails, you may also want to add a calendar. So while creating the calendar, you don’t have to add each date manually. Because you can configure the amp-list to populate all the date fields at once by taking the data from the back end.
Related guide: How to Book More Meetings with Mailmodo?
Features of amp-list
The amp-list provides various features, and some of them are discussed below:
✅ Update the existing information
You may have some updated information to show your users. To achieve this, you can use amp-list and replace the current information with updated information. The updated information will be taken from the backend and will be swapped with the existing information.
✅ Show alternative content until the data is loaded
You can add placeholders with a placeholder attribute, and it will be shown until the amp-list loads all data.
For example, you can use it to show a ‘Loading…’ text that will tell users to wait until the text fully loads.
✅ Create custom templates
You can create a custom template to display your updating content. There can be any items in this template, such as images, text, accordions, GIFs, and more. This allows you to create highly custom templates for your users.
Some other attributes of amp-list are: tabindex, area-live, src, max-items, items, single-item, binding, common attributes.
Visit amp.dev for more information.
Wrapping up
The amp-list is one of the most interesting AMP email components, and it has many interesting applications, as you have explored in this guide. If you’re curious to get familiar with similar AMP email components, we have covered them as well. Check out our guides on amp-accordion, amp-autocomplete, amp-carousels, and more.
