AVS UX Setup and Authentication
Offering your customers an easy and educational process while setting up Alexa on their new device 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 Alexa app handle the setup and authentication steps using Frustration Free Setup (FFS). Otherwise you can create a companion app of your own to handle them. Both options are presented below.
- Setting up Alexa using the Alexa app
- Setting up Alexa using your companion app
- Setup flows
- Example screens
- Text examples and translations
Setting up Alexa using the Alexa app
Frustration-Free Setup (FFS) is currently available for products such as speakers, soundbars, AVRs, 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 do not have to create a separate companion app to guide the customer through setup. And the customer, in turn, does not 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.
If, for some reason, the ZTS flow is unable to discover your device automatically, FFS will provide 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 will prompt 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 will not 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 will 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.”
Having a device use FFS for setup and authentication is one requirement for the Certified for Humans badge. To find out more, see What is Certified for Humans.
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:
- The customer must download the Alexa app on their phone or other device, if they do not already have it.
- The customer must sign in to the Alexa app.
- The customer must ensure Bluetooth access is enabled on the device with the Alexa app.
- The customer can then power on your device.
- 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.
- 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 will need to enter to finish the setup.
Setting up Alexa using your companion app
If you are not using Frustration Free Setup with your Alexa Built-in product, you can create your own setup and authentication flow.
AVS setup is a combination of:
- Introduction screens, or splash screens
- Authentication screens, or LWA (Login with Amazon) screens
- Customer Education screens, or Things to Try screens
You must also provide the customer a way to log out of their account. Logout functionality is typically included in the Alexa settings of your app. If your app does not have any settings for Alexa, you can reuse your Things to Try page for logout, while reminding your customers about the benefits remaining logged in to Alexa.
The examples found in this document are formatted for standard mobile phone and tablet display proportions and orientations. They will potentially work on a range of displays but may require additional modification in order 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. Example screens are provided below.
Introduction screens
The introduction, or splash, screen presents Alexa to customers in a way that encourages them to engage with her using your device. In a simple way it describes who she is, what kinds of things she can do, and the benefits of a voice-enabled experience.
The splash screen must contain:
- Amazon Alexa logo
- Mention of Amazon
- Description of who Alexa is
- Description of what Alexa does
- A link to initiate authentication flow
Devices using a companion app
If you are creating an iOS or Android companion app to set up Alexa on your device, AVS supplies you with a prebuilt, or hosted, splash screen for your app. You are required to use the hosted splash screen in your companion app. The hosted splash screen allows customers to become familiar with Alexa in a consistent, comfortable experience. In addition, it allows us to include future updates and improvements to the splash screen without requiring changes to your app.
The hosted splash screen includes a link to the authentication flow allowing customers to login to Alexa, as described below.
See Authorize an AVS Device Through a Web Service for details about using the hosted splash screen.
Devices with screens/Code-based linking
If you are creating a screen-based device or using code-based linking to set up Alexa, you will need to create your own splash screen. You should attempt to create the same experience described above, a comfortable, consistent introduction to Alexa and what she can do. While a single splash screen is often sufficient, you may use a series of screens or animations.
Example text for the splash screen is provided below, as are example screen designs.
Authorization and authentication using LWA
Login with Amazon (LWA) is required to authorize (initial account creation) and authenticate (subsequent login) customers on Alexa Built-in products. Based on your AVS implementation, choose one of the following approaches for implementing LWA:
Authenticate from a Companion App
This approach packages the Alexa Setup screens into a mobile app experience (iOS/Android) created by the developer. Amazon provides access to Login with Amazon as webviews, and the developers build the Introductory and Education screens according to Amazon's guidelines.
Authenticate from an Alexa Built-in Device
This approach displays the Alexa Setup screens on the device. Login with Amazon is still provided as webviews that the device will need to render. This is only available for touch screen-driven experiences, and also requires a local browser in order to allow new customers to create an Amazon account.
Authenticate with Code-Based Linking
This approach is intended for products that can present a code right from the their screen, and where input of customer credentials would be inconvenient. Code-based linking moves LWA from a device's companion app to the web via a secondary device such as a mobile phone, tablet, or personal computer.
Login with Amazon (LWA) screens must be implemented to Amazon specifications. See the Login with Amazon implementation guides for detailed specifications:
- Authorizing from a Companion App (Android/iOS)
- Authorizing from a Companion Site
- Authorizing with Code-Based Linking
For all approaches, be sure to give your Security Profile a name that matches the name or brand of your product so that a customer is confident they are authenticating to your device.
Customer Education screens
The Customer Education screens serve two purposes: confirm successful login and give customers suggestions for how to use Alexa, otherwise known as Things to Try.
You must always include example utterances in this section. If your application has a separate Alexa logout screen within its settings, consider including Things to Try examples so that customers know the benefits of staying signed in.
The Things to Try screen requirements:
- Amazon Alexa logo
- Mention of Amazon
- Description of how to wake Alexa
- Example utterances
- A link to download or open the Amazon Alexa app.
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 ensure 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 may emphasize audio controls, while a kitchen product may emphasize timers and alarms.
- If the product is voice-initiated, the example utterances should start with wake word “Alexa”.
- If the product is touch-initiated, the example utterances should not start with “Alexa”.
- The utterances should not reference third-party products the customer must purchase in addition to your product.
- The utterances should not reference third-party skills that the customer must enable manually. However, you may include examples of how to enable or use your own skills.
If the device your customer signs in from supports the Amazon Alexa app, you must:
- Link directly to the Amazon Alexa app if installed, or
- Link to the Amazon Alexa app in the app store for your OS.
The syntax for the links are:
- Android:
https://alexa.amazon.com - iOS:
alexa://
If the device your customer signs in from does not support the Amazon Alexa app, you must inform the customer that the Amazon Alexa app is available for download. However, you are not required to link directly to the app in the app store for your OS.
Example text for the Things To Try screen is provided below, as are example screen designs.
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
Introduction
1) 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 should be able to do so from the settings inside your app.
2) From the hosted splash screen, the customer is prompted to Login with Amazon.
Authentication
3) Guide the customer through a series of simple steps that allow them to authenticate with their Amazon account. If they don’t have an Amazon account, provide a link to create one. Usually, account creation is done in a browser. If your product does not have a browser, provide the customer an alternate method to register for an account.
Customer Education
4) After authenticating, present the customer with a Things to Try screen, which contains a link to the Amazon Alexa App.
Logging out
5) Declining the agreement takes the customer back to the previous Login with Amazon screen.
6) In addition to educational material, when revisited the Things To Try screen has a Sign Out button. Tapping this will sign out the customer and take them back to the Alexa hosted splash screen.
Code-based linking
Introduction
1) 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 should be able to do so from the settings inside your app or on the device. The splash screen presents a clear call to action to Login with Amazon, setting the customer’s expectations that they will be registering this product with their Amazon account.
2) On the device's screen, a customer sees both a code and the instructions to navigate to amazon.com/code to enter the code.
Authentication
3) From a secondary device the customer goes to http://amazon.com/code and enters their credentials.
4) The customer then enters the code displayed on the device's screen.
5) On the secondary device, the customer receives a confirmation that login was successful.
Customer education
6) The customer sees a list of Things to Try with their Alexa Built-in product and is prompted to download the Alexa App to get the most out of your device.
Code-based linking errors
6) 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 should prompt the customer to generate a new code and try again.
Example screens
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 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
Things to Try screen, alternative
Devices with screens/Code-based linking
Splash screen
Code screen
Things to Try
Code expired
Authentication failed
Splash screen
Code screen
Things to Try
Code expired
Authentication failed
Splash screen
Code screen
Things to Try
Code expired
Authentication failed
Splash screen
Code screen
Things to Try
Code expired
Authentication failed
Text examples and translations
We have created a variety of text examples, in multiple languages, that you can use for your Introduction and User 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.