About Alexa Web API for Games
The following diagram shows a user starting a voice-enabled game on an Alexa-enabled device.
- The user speaks to their device to start the game.
- The device sends the utterance to the Alexa service in cloud.
- The Alexa service processes the utterance by using automatic speech recognition, for conversion to text, and natural language understanding to recognize the intent of the text. Then, the Alexa service sends a request to your skill backend.
- Your skill gets the request showing the device supports HTML directives. The skill sends a response to start the web app, specifying the URL to the web server that hosts your web app.
- Alexa starts the browser on the device.
- The browser loads your game at the given URL. The browser sends multiple requests for each asset you include, just like a traditional web site.
- The customer interacts with the game by voice, touchscreen, and remote control. Your web app interacts with the skill backend for game logic, if any.
How users interact with the game
Users invoke and interact with your skill normally. Your skill starts the web app part of the experience in response to a standard request from the Alexa service. For example, you might design your skill to ask the user if they're ready to start the game:
User: Alexa, open My Web Game
Alexa: Welcome to My Web Game. Are you ready to begin?
Alexa: OK, starting the engines… (sound effects)
Skill launches the web app and displays the starting page.
After the web app starts, the user can interact with the app by using tap and voice, or remote and voice. For example, the user can:
- Press buttons on the screen. These actions might trigger Alexa speech or other actions within your web app.
- Speak commands to the game. For example, "Alexa, fire the missiles!"
- Respond to voice prompts triggered by your app. For example, "That was a miss! Do you want to try again?"
This interaction continues until the web app closes. For example, when the user says, "Alexa, exit."
Build with the Alexa Web API for Games
To create a game with the Alexa Web API for Games, you build two parts:
- An Alexa custom skill that starts the web app, handles voice requests, and communicates with the app during game play. For more details, see Build Your Skill for Web App Games.
- A web app that can display in a browser and interact with users. Use the Alexa HTML API to communicate with the skill during game play. For more details, see Build Your Web App with Web API for Games.
As you plan and build your skill, you can build these pieces independently, and then add the integration. For example, you can create a fully functional web app for your game, and then add the calls for Alexa speech and voice control. You can design your game to include game logic in either the web app or in the skill backend.
Communication between your skill and your web app
Use the Alexa Web API for Games interfaces to communicate between your skill and your web app while the user interacts with your game.
Alexa.Presentation.HTMLinterface provides your skill with directives and requests for communicating with the web app. Your skill uses directives to send information to the web app, and uses request handlers to listen for events coming from the web app.
- The Alexa HTML API interface provides your web app with an
Alexaclass with methods and properties for communicating with the skill. Your web app calls methods on this class to send messages to the skill, and registers callbacks to listen for events coming from the skill.
The following diagram shows the communication flow.
- The user invokes your skill.
- The Alexa service processes the utterance and sends a
- The request handler in your skill code returns a response with the
Alexa.Presentation.HTML.Startdirective. The response includes the URL of the web page to load onto the device and an optional speech response.
- The Alexa service directs the device to start the web app.
- The device launches your web app.
- The device displays the starting page.
- Your web app calls
Alexa.create()to create an instance of the Alexa
- The user begins interacting with the web app normally.
- The web app calls
alexa.skill.sendMessage()to send messages to the skill, such as an event that says that Alexa should prompt the user for voice input.
alexa.skill.sendMessage()results in the
- The skill handles these incoming requests, and then responds with directives and output speech.
- The skill returns the
Alexa.Presentation.HTML.HandleMessagedirective to send messages to the app.
- The web app registers a callback to respond to incoming messages sent from the skill by using
- During this interaction, the skill session remains open until the user ends the game.
Other events, such as when Alexa begins and ends speech, are available to your web app to build the flow between on-screen events, such as button presses and voice commands. For examples about how you use communication between the skill and web app to build in voice control and Alexa speech responses, see Add Voice Control and Speech to the Web App.
Requirements for the skill and web app
To use the Alexa Web API for Games, your skill and your web app must meet the following requirements:
- Configure your skill to support HTML directives.
- Host your web app at an internet-accessible
HTTPSendpoint. The web server must present a valid and trusted SSL certificate. For more details, see Build with the Alexa Web API for Games.
- Use the Alexa HTML API in your web app to communicate with your skill.
The following devices support Alexa Web API for Games. The Echo Show 10 and Astro are motion-capable devices.
- Echo Show (1st and 2nd Gen)
- Echo Show 5 (1st and 2nd Gen)
- Echo Show 8 (1st and 2nd Gen)
- Echo Show 10
- Echo Show 15
- Astro Robot
Fire TV devices
- Fire TV (3rd Gen)
- Fire TV Stick (2nd and 3rd Gen)
- Fire TV Stick 4K (1st and 2nd Gen)
- Fire TV Cube (1st and 2nd Gen)
- Web API for Games Reference
- Web API Extensions for Games Overview
- Alexa HTML SDK
- How to Create Engaging Voice-First Games for Alexa
- Designing New Multimodal Games with the Alexa Web API
- Web API for Games: Tips and Tricks (January 2023 Edition)
- Alexa Web API debugging and performance tips
Last updated: May 03, 2023