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.
Table of contents
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.
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.
