Apps have revolutionized and simplified the entire end-to-end process of ecommerce. To begin with, you need to type a few letters in the search bar, and several related search results appear as clickable options. All that is left for you is to read through the options, select the relevant one, and move closer to the purchase.
Now you can bring a similar experience into your emails as well. amp-autocomplete, an AMP component, lets you bring auto-suggestion in emails. The possibilities extend to incorporating search bars, form text fields, user response boxes, etc., in emails.
Let us dig deeper to find out how amp-autocomplete enhances AMP emails.
1. What are the benefits of the amp-autocomplete component?
amp-autocomplete allows you to display a set of predefined results based on user input. In terms of practical application, you can build autocomplete text fields for the course names, product names, FAQs, store locators, delivery locations, area pin codes, and more. Here are some advantages of using amp-autocomplete in emails.
1.1. Save time and effort for the user
In-built search bars make it much easier for users to locate what they are looking for. amp-autocomplete triggers suggestions from a remote endpoint based on characters typed in search fields. Users can quickly complete their product hunt and proceed to cart checkouts without exiting their email, leading to quicker conversions.
1.2. Widen the visibility
Sometimes, the users are unaware of all the options on offer. Use amp-autocomplete to display a predefined list of results based on letters/characters entered by the users. Add products or services that match their input and let them make quick choices.
1.3. Reduce user drop-offs
amp-autocomplete offers an app-like experience in emails. The possibility to search and compare items without leaving the inbox increases user conversion. amp-autocomplete eliminates redirections that cause drop-offs at the exit point, boosting your campaign’s ROI.
2. How to use the amp-autocomplete component?
amp-autocomplete suggests completed results corresponding to the user input as they type into the text field.
Required Scripts: <script async custom-element=”amp-autocomplete” src=”https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js”></script>
You must use the amp-autocomplete extension for suggesting completed items based on user input to help users carry out their tasks more quickly.
It significantly improves search experiences where a) the user may not know about the full range of potential inputs, or b) the forms offer multiple ways to express the same intent. An example could be using a state/city abbreviation instead of its full name to yield more predictable results.
When using the src attribute with amp-autocomplete, the response from the endpoint contains data to be rendered in the specified template.
You can specify a template in one of two ways:
- A template attribute that references an ID of an existing templating element
- A templating element nested directly inside the amp-autocomplete element
amp-autocomplete activates the ‘select’ event when the user selects an option via click, tap, keyboard navigation, or accepting typeahead. It also fires the ‘select’ event if a user’s keyboard navigates to an item and tabs away from the input field. ‘event’ contains the value attribute value of the selected element, which is its textual representation (for example, the value of data-value).
‘event’ may also contain the entire object in the valueAsObject field if the suggestion template contains data-json={{objToJson}}. As a result, the rendered element has a data-json data attribute with a JSON string representation of the corresponding object, which is then made available in the valueAsObject field of the event.
If you wish to learn more about the amp-autocomplete component for email, visit amp.dev.
3. Variations of the amp-autocomplete component
The component’s attributes help you create alternatives that have the potential to engage more audience.
3.1. Highlight the user selection
It is possible to highlight the user selections with the highlight-user-entry attribute. If present, it exposes the autocomplete-partial class on the substring within the suggested item that resulted in its match with the user input. You can use the attribute to stylize the corresponding match to stand out to the user. [Defaults to false.]
3.2. Optimize suggestions
You can include the ‘prefetch’ attribute to prefetch remote data to improve responsiveness for users. It requires src to be specified. Use the ‘min-characters’ attribute to set the minimum character length of user input to provide results; it sets the default to 1. Use the ‘max-items’ attribute to set the maximum specified number of items to suggest at once based on user input; it displays all if unspecified. Appropriate use of such attributes removes the chance of content confusion.
3.3. Ease user search
You can choose whether the amp-autocomplete should autosuggest on the entire user input or only a triggered substring of the user input. By default, when the ‘inline’ attribute is absent, suggestions will be based on the complete user input. The attribute cannot have an empty value but must take a single character token, that is, @, which activates the autocomplete behavior. For example, if inline=”@,” then user input of hello will not retrieve suggestions, but a user input of hello @abc might trigger options filtered on the substring abc.
3.4. Specify remote endpoint
You can use the ‘query’ parameter to generate a static remote endpoint that returns the JSON that will be filtered and rendered within amp-autocomplete; it requires the src attribute to be present. For example, if src=”http://www.example.com” and query=”q,” then when a user types in abc, the component will retrieve data from http://www.example.com?q=abc.
amp-autocomplete is frequently combined with the amp-form and amp-selector components to make the emails even more effective.
4. How can Netcore Cloud help you?
Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month on behalf of businesses across 12 countries.
Netcore Cloud offers an enterprise-ready AMP editor that makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to build engaging AMP emails quickly. To customize further, you can connect with the in-house team of AMP experts to design AMP emails for specific use cases.
At Netcore Cloud, we help you set up and integrate AMP for email with the shortest TAT. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize the ROI of your email marketing campaigns.
Netcore Cloud works as an extension of your team to provide result-oriented solutions. With Netcore Cloud’s help, 50+ global brands have rolled out interactive emails powered by AMP and achieved their goals.
Netcore Cloud’s team partners with your marketing team to help you leverage the power of AMP emails and drive business revenue.
Connect with us to understand how you can benefit from our expertise and experience.
