How to Use amp-selector in Your AMP Emails

If you want to generate sales, it is good to present a range of options to help them select the suitable one. The amp-selector lets your users select one or more options from different options right inside your AMP emails.

This guide will discuss amp-selector and possible ways to use it in your AMP emails.

Table of contents

• What is an amp-selector?

• Applications of amp-selector

  • 1. Give purchasing options
  • 2. Give filtering options

• Features of amp-selector

  • ✅ Add any arbitrary elements
  • ✅ Set disabled options
  • ✅ Set preselected options
  • ✅ Set multiple selections

• Wrapping up

What is an amp-selector?

The amp-selector is an AMP email component, and it lets users select one or more from a range of different options inside an email. You can configure the options to be any elements such as images and carousels.

You also have the freedom to disable, preselect, and multi-select options, which we will discuss further in this guide.

Applications of amp-selector

Here are some scenarios where the amp-selector will be helpful:

1. Give purchasing options

If you are sending a cart recovery email, you can include various options for your users to choose from.

For example, if you own a shoe company and want your users to complete their purchase, you can send an email with options to choose different sizes, colors, shapes, build quality, and more. An amp-selector will help you set up all these options.

2. Give filtering options

It can become difficult for users to find relevant information when there is a lot of data to look at. That's why you can use amp-selector to give them a list of filters they can select to find the exact information they are looking for.

Features of amp-selector

The amp-selector offers many features, and some of them are discussed below:

✅ Add any arbitrary elements

You can add any arbitrary HTML elements or AMP email components under amp-selector. 'Arbitrary' here means the non-obvious elements such as carousels that don't add value in the context of a selector.

✅ Set disabled options

Do you want to disable an option so your user can't select it? Use the disabled attribute to achieve this objective. Add this attribute to all the <li> items you want to disable, and your user won't be able to choose them.

✅ Set preselected options

If you want to influence your users' buying preferences, you can use the selected attribute to achieve that. Add this attribute to the list item you want to be the default selection. So your users may leave the selection just like that and hence get influenced by your likings.

✅ Set multiple selections

Sometimes, you have to allow your users to select multiple options to achieve their objectives. Then you can use the multiple attributes to the amp-selector. Now your users can select or deselect multiple items, whereas it is only a single item in the default configuration.

Here are some more attributes that let you add various features: disabled, form, multiple, name, keyboard-select-mode, and option selected.

Visit amp.dev for more information.

Wrapping up

You can use selectors in many ways, and we discussed many of them in this guide. Like the amp-selector, other AMP email components let you create various features in your AMP emails. Check out our guide on amp-accordion to find out how you can add an interactive accordion to your email.