Configure a Skill to Support the Display Interface
To learn about APL, see Add Visuals and Audio to Your Skill.
The Alexa Design System for APL includes a set of templates that are similar to the display templates, so you can transition your skill. For details about which templates to use, see Replace display templates with responsive templates.
Alexa-enabled devices with a screen–such as Echo Show, Echo Spot, Fire TV Cube, Fire HD 8, and Fire HD10–allow skill developers to create skills that use both screen and voice interaction. This page describes how to create screen displays and interactions with the use of display templates and the Display interface. You can also create skills with screen support by using Alexa Presentation Language for richer interactions, improved displays, and device customizations.
Watch a video:
See also:
-
Add Visuals and Audio to Your Skill for an introduction to Alexa Presentation Language, which provides the power and flexibility to build multimodal skills with many visual elements–including graphics, images, and slide shows–and to customize the output for different devices. Consider using APL instead of display templates.
-
How to Build Alexa Skills for Echo Show for a quick start to creating an Alexa skill with screen support using display templates.
-
See Best Practices for using Display Templates for design guidance.
-
Display Interface Reference for specific instructions about using the
Display.RenderTemplatedirective, and the various display templates, in your skill service code. -
Use Display Templates to Show Content on Screens for device display and behavior specifications.
Configure Your Skill to Support Display on Alexa-Enabled Devices With a Screen
The process to enable the use of the Display.RenderTemplate directive, which is the directive used to display content on a screen, is the same for a new skill, or for an existing skill.
1. Edit your skill in the developer console.
2. Navigate to the Build > Custom > Interfaces page.
3. Enable the Display Interface option, then click Build Model to re-build your interaction model. When you enable Display Interface, the required built-in intents are automatically added to your interaction model.
4. In your skill service code, determine what interfaces the customer's device supports, so that your skill service then provides the appropriate responses with the appropriately rendered content, including display if desired and supported. To determine the supported interfaces, parse the value of event.context.System.device.supportedInterfaces in the Alexa request. The value of supportedInterfaces determines the interfaces supported by the customer's device.
5. If the DISPLAY interface is supported, include the Display.RenderTemplate directive in your skill responses to display content on screen as appropriate, just as you would include other directives, as shown in the examples below. As a developer, you can choose not to include any display content, but cards that display in the Alexa app will also appear on the customer's device. See Display Interface Reference.
For a tutorial on how to create a skill that supports Alexa-enabled devices with a screen, see Display Interface Skill for Echo Show.