mailmodo-hamburger

How to Use amp-list in Your AMP Emails

author image

Written by:Suryanarayan Pal

Share

Facebook logo
Linkedin logo
Twitter logo
Whatsapp logo
Pinterest logo
mail logo
copy link

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.

✍️ Author -Suryanarayan Pal

Suryanarayan has seven years of experience in email marketing for B2B, SaaS, and e-commerce industries. He specializes in email deliverability and project management.

Avatar