AVS UX Setup and Authentication


Offering your customers an easy and educational process while setting up Alexa on their new product is important for creating a delightful experience and greatly contributes to customer satisfaction. The Alexa Setup and Authentication screens not only help customers connect an Alexa Built-in product to their Amazon account, but can communicate the value of Alexa as well.

For some products, such as speakers and soundbars, you can choose to have the Amazon Alexa app handle the setup and authentication steps using Frustration Free Setup (FFS) instead of creating a companion app of your own. See the Setting up Alexa using the Alexa app section for details.

Setup stages

The Alexa setup flow for your product SHALL include an Introduction stage, an Authentication stage, and a Customer education stage, in that order.

Introduction stage

The screens displayed during the Introduction stage inform a customer that Alexa is included in their product, provide a basic and clear description of some of the things they can do with their voice using Alexa, and afford customers the choice to either proceed with or skip Alexa setup on their product. The customer SHOULD be able to set up Alexa as part of your product's first run experience. If they do not set up Alexa at that time, they SHALL be able to do so from the settings menu in your app.

Introduction stage general guidelines

The Introduction stage SHALL include the following elements:

  • The Alexa Smile logo.
  • Customers must be able to bypass the Alexa setup flow. For example, include a clear navigation button/touch-point labeled, “Skip”.
  • A prominent button labeled, “Get Started” or “Sign in with Amazon” that will send the customer directly to the Authentication stage.
  • The approved Alexa introduction text. Any alteration of this text must be reviewed and approved by Amazon.

Copied to clipboard.

Your product includes Alexa!
Alexa allows you to use your voice to hear the news, listen to music, check weather, control your smart home, and more.

Typically, you can display all required Introduction stage elements on a single splash screen like the generic examples below. Inclusion of illustrations is optional, but can be useful to new Alexa customers. Amazon recommends that you include a "Back" button or arrow to provide customers with a full navigation experience.

Alexa introduction splash page
Alexa introduction splash page with a Back button

Introduction stage for companion app setup

If you are creating an iOS or Android companion app to set up Alexa on your product, you SHALL use the hosted splash screen provided by Amazon. The hosted splash screen provides customers with a familiar, consistent, and compliant Alexa introduction experience. In addition, the hosted splash screen allows Amazon to include future updates and improvements to the splash screen without requiring changes to your app.

For guidance on how to implement the hosted splash screen, see the OS-specific steps for Authorizing an AVS Device Through a Companion App.

Introduction stage for on-product setup

If you are building a screen-based product that doesn't use a companion app for Alexa setup or a product that utilizes the code-based linking (CBL) authentication method, you need to create your own screen for the Introduction stage. While a single splash screen is often sufficient, you may use a series of screens or animations. Follow the Introduction stage general guidelines.

Authentication stage

Your Alexa Built-in product SHALL use Login with Amazon (LWA) to authorize and authenticate customers during the initial account creation and during subsequent account logins.

Based on your AVS implementation, choose one of the following LWA methods.

Authenticate from a companion app

This method is for products that use an iOS or Android companion app for Alexa setup. Amazon provides access to LWA as webviews. These webviews are displayed to the customer from within the companion app during the Authentication stage of Alexa setup.

Authenticate from an On-Device Webview

This method displays the Alexa Setup screens on the product itself. Amazon provides access to LWA as webviews that the product needs to render. This is only applicable to touch screen-driven experiences and requires a local browser to allow new customers to create an Amazon account.

Authenticate with Code-Based Linking

This method is for products that can present a code from the device, and where input of customer credentials would be inconvenient or cumbersome. Code-based linking provides a path for customers to LWA through a secondary device, such as a mobile phone, tablet, or personal computer.

You must implement LWA screens according to Amazon specifications. See the Login with Amazon implementation guides for detailed specifications:

For all methods, be sure to give your Security Profile a name that matches the name or brand of your product so that your customer is confident that they are authenticating to your product.

Customer education stage

The screens displayed during the customer education stage confirm successful login and give customers relevant suggestions for how to use Alexa on their product. The customer education stage SHOULD include operation instructions as needed and SHALL include at least one Things to Try screen.

Operation instructions

It can be useful for customers to see instructional descriptions and illustrations of critical UI elements that demonstrate how to access Alexa. Consider the following examples of typical operation instructions:

  • For a TV or STB, a clear illustration showing which of the buttons of the product’s remote control to press to begin an Alexa interaction.
  • For a smart speaker, a description of Multi-Room Music with a prompt to set it up from within the Amazon Alexa app.
  • For a smart home product, a description of your Smart Home Skill with a prompt to enable it or learn more.
  • For products with the default factory state of the microphones set to OFF, clear instruction on how to turn the microphones ON.

Things to Try

The Things to Try screen SHALL include the following elements:

  • The Amazon Smile Logo
  • Example Utterances
  • A clear button or touch-point labeled, "Done" or "Next"
  • The approved Call to Action text below

Copied to clipboard.

  To learn more and access additional features, download the Amazon Alexa App.

Example utterances

The number of example utterances displayed can vary depending on their length and the space available. If long example utterances must wrap onto a second line, avoid having a single word on a line, and make sure the spacing between lines is less than the spacing between utterances. Consider the following when writing example utterances:

  • The utterances should relate to the product’s use cases. A speaker might emphasize audio controls, while a kitchen product might emphasize timers and alarms.
  • If the product is voice-initiated, the example utterances SHALL start with wake word “Alexa”.
  • If the product is touch-initiated only, the example utterances SHALL NOT start with “Alexa”.
  • The utterances SHALL NOT reference third-party products the customer must purchase in addition to your product.
  • The utterances SHALL NOT reference third-party skills that the customer must enable manually. However, you might include examples of how to enable or use your own skills.

Amazon Alexa app linking

If the device your customer signs in from supports the Amazon Alexa app, the Amazon Alexa app text in the Call to Action SHALL be an active link that:

  • Links directly to the Amazon Alexa app if installed, or
  • Links to the Amazon Alexa app in the app store for the mobile OS.

The syntax for the links are:

  • Android: https://alexa.amazon.com
  • iOS: alexa://

If the device your customer signs in from doesn't support the Amazon Alexa app, the Call to Action SHALL NOT include an active link to the Amazon Alexa app.

Privacy design considerations

Amazon does not permit using the wake word system as a trigger for initiating the Alexa setup flow. You must never give your customers the impression that Alexa can listen before they have intentionally granted permission through the setup and authentication process.

Physically triggering setup is a permitted design option. It is acceptable to initiate the Alexa setup and authentication flow when a customer presses the Action button on a non-registered product. This method is effective in promoting Alexa registration on products with a remote control unit (RCU), such as a TV, or a STB.

Setting up Alexa using the Alexa app

Frustration-Free Setup (FFS) is currently available for products, such as speakers, soundbars, audio/video receivers, and other devices without screens that use Wi-Fi setup. By implementing FFS on your device, you can use the same Alexa setup and authentication technology that Amazon uses for its own devices. You don't have to create a separate companion app to guide the customer through setup. And the customer, in turn, doesn't have to switch between different apps during the setup process.

The ideal setup flow for FFS devices is called Zero-Touch Setup (ZTS). ZTS is available only for devices bought on Amazon.com. It uses the Alexa app, or other Amazon devices (Echo, fireTV) nearby, to auto-detect when your device is powered on, using Bluetooth. It then attempts to configure the device without the customer having to enter their Amazon account information or Wi-Fi credentials.

Pop-up prompt of device auto-discovery during guided setup

If, for some reason, the ZTS flow is unable to discover your device automatically, FFS provides a guided setup for the customer in the Alexa app. The guided flow should still be able to supply the Amazon account information and Wi-Fi credentials. If Wi-Fi credentials are unavailable, the Alexa app prompts the customer to enter them. A third option is to have the customer add the device using the Device screen in the Alexa app.

Note that you can still create a separate companion app to allow customer access to device settings or additional functionality. You don't have to create a setup and authentication flow along with the corresponding screens. The Alexa app can deep-link into your companion app at the end of the setup flow.

Implementing FFS

Frustration Free Setup requires the use of the FFS SDK. You can find out more information about the technical requirements in the FFS for AVS Overview page.

To use FFS, when you register your product with Amazon, you need to supply the information needed to set up your device in the Alexa app. The information includes device category, brand, Things to Try with Alexa, instructions to initiate Bluetooth beaconing, and a JPG or PNG image of your device to be used in the setup confirmation screen. FFS self-tests are included in the Functional Certification checklist for AVS certification.

On-device prompts are available on the Resources tab of the AVS Developer Portal (requires login). You can use the prompts after your device boots up to help guide the customer to begin setup. For example, “Your device is ready for setup. Make sure Bluetooth permissions on your phone are turned on, then follow the instructions in the Alexa app.”

Customer instructions

Although customers do not have to follow setup and authentication steps, they still need to know how to get started. You should inform customers of the following steps:

  1. The customer must download the Alexa app on their phone or other device, if they don't already have it.
  2. The customer must sign in to the Alexa app.
  3. The customer must make sure Bluetooth access is enabled on the device with the Alexa app.
  4. The customer can then power on your device.
  5. In the Alexa app, the customer should see a screen indicating that the device was discovered and is ready for setup. The Alexa app will then continue with the device setup.
  6. If the customer does not see the discovery screen, instruct them to go to the Devices screen in the Alexa app and click the ‘+’ (plus) sign on the top right. They can then choose ‘Add Device’. You should include the category and brand choices they need to enter to finish the setup.

Setup flows

Below are step-by-step examples of setup flows, both for devices using a companion app and those with screens using code-based linking.

Companion app

Companion App Flow

Introduction

The customer is informed that Alexa is available on the product and given the option to proceed with or skip sign-in.

Authentication

The customer is guided through all necessary steps to successfully authenticate with their Amazon account via Login with Amazon (LWA).

Customer education

To help familiarize them with Alexa on the product, the customer is presented with relevant operating instructions and example utterances to speak.

Code-based linking

Code-based linking Flow

Introduction

The customer is informed that Alexa is available on the product and given the option to proceed with or skip sign-in.

Authentication

The customer is guided through all necessary steps to successfully authenticate with their Amazon account.

1) The screen SHALL display an alphanumeric code and the URL where that code must be entered. A QR code image may also be provided for convenience.

2) On a secondary device, the customer will navigate to the URL and enter the code to begin the authentication process.

3) When authentication has been completed successfully, the customer will see confirmation on the secondary device and setup will automatically proceed on the Alexa Built-in (ABI) product.

Customer education

To help familiarize them with Alexa on the product, the customer is presented with relevant operating instructions and example utterances to speak.

Code-based linking errors

There are two possible failures during code-based linking: either the customer's code expired before successfully authenticating, or authentication failed. In either case, you SHALL prompt the customer to generate a new code and try again.

Text examples and translations

Amazon has created a variety of text examples, in multiple languages, that you can use for your Introduction and Customer Education screens.

Use the following font families for Alexa-related screens, features, and functionality:

  • Amazon Ember Display
  • Bookerly
  • Noto Sans CJK

Bookerly is used mainly for Things to Try text, and Noto Sans CJK is supplied for Chinese, Japanese, and Korean language support. Amazon Ember Display and Bookerly are reserved for Alexa-related uses only.

You can find both the text examples, with translations, and the Amazon font files on the Amazon Developer Portal (requires login) under the Resources tab.

Example screens

These examples are formatted for standard mobile phone and TV display proportions and orientations. They will potentially work on a range of displays but may require additional modification to provide a high-quality customer experience. A successful integration must maintain access to and legibility of content. Some Alexa setup screens are provided for you. Others can be designed to your own specifications, as long as the specific requirements discussed here are met.

You can implement these screens according to the redlines provided below, or design equivalent screens according to the requirements above. All branding assets used in the screens below are available in the Amazon Developer Portal (requires login) under the Resources tab.

Mobile companion app

The Things to Try examples are formatted for standard mobile phone and tablet display proportions and portrait orientations. They work for a range of displays but may require modification. A successful integration must maintain accessibility and legibility of content.

Things to Try screen

Things to Try Screen for Mobile
Click to enlarge

Things to Try screen

Things to Try Screen for Mobile
Click to enlarge

Things to Try screen, alternative

Alternative Things to Try Screen for Mobile
Click to enlarge

Devices with screens/Code-based linking

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Code expired

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Code expired

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Code expired

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Splash screen

TV
Click to enlarge

Code screen

TV
Click to enlarge

Things to Try

TV
Click to enlarge

Code expired

TV
Click to enlarge

Authentication failed

TV
Click to enlarge

Was this page helpful?

Last updated: Dec 04, 2023