How to Use amp-autocomplete in Your AMP Emails

Suryanarayan Pal
BySuryanarayan Pal

4 mins read

If you shop on eCommerce sites like Amazon and Flipkart, you would have noticed the autocomplete functionality in their search bars.

As you start typing your query, it automatically suggests relevant search results to choose from. This feature is common and offered by most eCommerce sites.

But what about emails? Is it possible to add this feature to your AMP emails? Yes, absolutely. You can do so with the help of amp-autocomplete.

This guide will teach you what amp-autocomplete is and how to use it to add eCommerce-like autocomplete functionality to your AMP emails.

  • What is amp-autocomplete?

  • Applications of amp-autocomplete

  • Features of amp-autocomplete

  • Wrapping up

What is amp-autocomplete?

The amp-autocomplete is an AMP email component that shows completed results from a set of predefined strings based on the user input. You can create the predefined set of strings using a JSON file.

For example, if the user types “Mai” in the input, you can set it up to show similar results like “Mailmodo,” “Mailspring,” “Mailbird,” etc. This makes it easier for your users to complete the task quickly.

Amp-autocomplete in action in inbox

Applications of amp-autocomplete

Here are some scenarios where amp-autocomplete can be used:

1. Suggest pre-defined locations

The location data is important to many businesses if they want to operate successfully. And that can be collected easily with the help of amp-autocomplete.

For example, if you are a food delivery operator and want to know your customer's delivery location, you can add a field for your users to enter their location. To simplify it further, you can add a predefined list of locations that will show as users start typing the initial words in the location field.

2. Add built-in search bars

Emails can bring a good amount of traffic to your blog. To do that, you can send an AMP email with a built-in search bar. Your users can type a keyword they would like to know more about, and you can fetch your blog post title and links from a JSON file and suggest them to your users while they are typing. This will make it easier for your users to find your blog content without leaving their inbox.

3. Show available products

You need to make things easy for your users if you want them to buy from you. One way to do this is by adding autocomplete to your text fields. So when users start typing a product name, the autocompleting text field will show the list of all the available products containing the same letters. Users can scan and choose your products quickly, making the purchasing cycle smooth.

Features of amp-autocomplete

Amp-autocomplete has many features which can be accessed by using its attributes. Here’s a few of those:

✅ Define minimum characters to show results

If you go to Google and start typing in its search bar, you’ll notice that it shows suggestions as soon as you type your first character. Similarly, with the help of min-characters, you can set up amp-autocomplete to show suggestions at a minimum character length. This length is set to 1 by default, but you can set it to any value of your choice.

✅ Control the number of suggestions displayed

Do you want not to overwhelm your users with all the available suggestions? If so, you can use the max-items attribute to control how many suggestions are shown at a time. For example, if you set it as two, only two suggestions are shown when users input their data. On the other hand, leaving this at default mode will show all the available options.

Related guides: Use Cases of AMP Emails

✅ Take multiple actions with a single click

You can use the submit-on-enter if you want your users to take multiple actions simultaneously. The enter key is used to select a suggestion, but when you use this attribute, it selects the suggestions and continues its default action. The form will be submitted if that is the default action.

These are some of the highlighting features of amp-autocomplete. But there are other attributes of amp-autocomplete that open up an array of features. And those attributes are: src, query, max-items, suggest-first, Items, Inline, prefetch.

Visit amp.dev for more information.

Wrapping up

The autocomplete functionality makes it easy to find relevant data and use them. Now with the help of amp-autocomplete, you can create such experiences right inside your AMP emails.

Apart from autocompleting, you can do so much more with AMP email components, and we have covered other components in detail. So do check them out to take full advantage of the AMP framework.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
What is amp-autocomplete?
Applications of amp-autocomplete
Features of amp-autocomplete
Wrapping up

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right