Note: Sign in to the developer console to build or publish your skill.
Warning: The Display interface is deprecated and isn't supported on all Alexa devices. To add multimodal experiences to your skill, use Alexa Presentation Language (APL) instead.
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.
This reference describes specific information about display templates that you may want to include in your skill responses that create screen displays for your Alexa skill. For a reference to the Display interface directives and requests, see Display Interface Reference.
The body templates and list templates are designed to support a wide range of presentations. The following behavior applies across templates:
The textContent field contains primaryText, secondaryText, and tertiaryText.
Each list template must include at least one list item.
A hint can be included with BodyTemplate2, BodyTemplate6, and ListTemplate2, by use of the Hint directive. See Hint Directive.
For Echo Show and Fire TV Cube, the back button appears by default on each template, but can be hidden. The back button does not appear on Echo Spot, but the customer can achieve the same effect with a long swipe from the left. See Back Button Object.
The images shown below may not be to scale, and may not exactly represent what you see on the device.
When titles are displayed, they typically appear as headers, which are either left-aligned or center-aligned, depending on the template or the device.
BodyTemplate1 for simple text and image views
To use APL instead of this deprecated display template (recommended)
Create an APL document and use one of the following APL responsive templates:
AlexaHeadline displays brief text over a background.
AlexaDetail displays longer text over a background. The layout scrolls, so longer text isn't cut off.
Use BodyTemplate2 when you have a limited amount of text that is paired with an image.
Keep the content short and concise, to supplement but not to replace the VUI.
Content that displays as side-by-side on Echo Show and Fire TV Cube is stacked on Echo Spot. The image in the background, and the text will layer on top of it.
Hints are not displayed on Echo Spot.
BodyTemplate2 and BodyTemplate3 render the same on Echo Spot, except that text is auto-centered on BodyTemplate2.
If scrolling is required, the full screen, including the skill icon, header text, and body content, will scroll via touch.
Do not include important information such as trademarks in the background image.
Display characteristics
Echo Show and Fire TV Cube
Echo Spot
Title text is left-aligned
Skill icon
TextView left, aligned left, default font size 3, no scrolling
Foreground image right
Hint (optional)
Background image (optional)
No title text
Skill icon
TextView left, aligned center, default font size 3, scrollable (if needed), text will layer on top
Foreground image will become the background image, with a 70% opacity black scrim over it
Background image (optional) does not render on Echo Spot
Device display comparison–BodyTemplate2
Skills as displayed on Echo Show and Echo Spot
Wireframe representations of BodyTemplate2
Fire TV Cube
Echo Show
Echo Spot
BodyTemplate3 for image views and limited left-aligned text
To use APL instead of this deprecated display template (recommended)
Create an APL document and use the AlexaDetail responsive template to display text along with a foreground image.
Content that is displayed side-by-side on Echo Show and Fire TV Cube is stacked on Echo Spot. The image is in the background, and the text is layered on top of it.
BodyTemplate2 and BodyTemplate3 are rendered the same on Echo Spot. Text is aligned left on BodyTemplate3.
If scrolling is required, the full screen, including the skill icon, header text, and body content, will scroll via touch.
Do not include important information such as trademarks in the background image.
Display characteristics
Echo Show and Fire TV Cube
Echo Spot
Title text
Skill icon
TextView is on the right and left-aligned, scrollable (if needed), default font size 3
Foreground image left
Background image (optional)
No title text
Skill icon
TextView is on the left and left-aligned, default font size 3, scrollable (if needed), text will layer on top
Foreground image will become the background image, with a 70% opacity black scrim over it
Background image (optional)
Device display comparison–BodyTemplate3
Skills as displayed on Echo Show and Echo Spot
Wireframe representations of BodyTemplate3
Fire TV Cube
Echo Show
Echo Spot
BodyTemplate6 for text and optional background image
To use APL instead of this deprecated display template (recommended)
Create an APL document and use the AlexaHeadline responsive template to display brief text over a background.
Full-width TextView (2-3 lines max), bottom-aligned, left-aligned, default font size 7, no scrolling
Hint (optional)
Background image (optional)
Skill icon
TextView is middle- and center-aligned, scrollable (if needed), default font size 7
No hints appear on Echo Spot
Background image (optional)
Guidelines for BodyTemplate6:
Hints are not displayed on Echo Spot.
On Echo Spot, background images are scaled down based on the aspect ratio, and then centered within the available viewport. For example, a 1024x600px background image on Echo Show will be scaled to 819x480px on Echo Spot. Thus, part of a background image may not be visible on Echo Spot.
If scrolling is required on Echo Spot, the full screen, including the skill icon, header text, and body content, are scrolled via touch.
AlexaHeader to display text on the top of the screen.
AlexaImage to display a scalable foreground image.
For an example, create a new APL document in the authoring tool and select the Image Display Sample.
Display Characteristics
Echo Show and Fire TV Cube
Echo Spot
Title text
Skill icon
Full-width, scalable ImageView for foreground image
Background image (optional)
Title text
Skill icon
Full-width, scalable ImageView for foreground image
Background image (optional)
Guidelines for using BodyTemplate7:
BodyTemplate7 supports scalable foreground images on Alexa-enabled devices with a screen.
On Echo Spot, the foreground image will center within the viewable area, and will scale up and down appropriately, keeping the original aspect ratio.
BodyTemplate7 syntax
{"type":"BodyTemplate7","token":"SampleTemplate_3476","backButton":"VISIBLE","title":"Sample BodyTemplate7","backgroundImage":{"contentDescription":"Textured grey background","sources":[{"url":"https://www.example.com/background-image1.png"}]},"image":{"contentDescription":"Mount St. Helens landscape","sources":[{"url":"https://example.com/resources/card-images/mount-saint-helen-small.png"}]}}
Device display comparison–BodyTemplate7
Skills as displayed on Echo Show and Echo Spot
If the foreground image is transparent, then the visual effect is different, as shown here.
Wireframe representations of BodyTemplate7
Fire TV Cube
Echo Show
Echo Spot
ListTemplate1 for text lists and optional images
To use APL instead of this deprecated display template (recommended)
Create an APL document and use the AlexaTextList responsive template to display a vertical scrolling list of text items. List items can include image thumbnails and multiple fields of information.
Secondary text (optional), default size 24sp (undefined font size)
Image (square, portrait, 4:3 or 16:9)
Background image (optional)
Hint
No title text
Skill icon
List items:
Primary text, default font size 7
Secondary text (optional), default font size 2
List item image will become the background image, with a 70% opacity black scrim over it
Background image (optional)
Guidelines for using ListTemplate2:
Use this template for lists where images are the primary content.
Ensure list items are selectable via touch, and selectable by voice using the primary text or the ordinal.
Keep in mind that text will truncate on Echo Spot particularly, so make sure the primary text on the screen is descriptive enough that the customer is aware of what they are selecting.
Only one list item will be visible on the screen at a time.
Text will layer on top of the foreground image now, and be bottom-aligned.
Hints will not display on Echo Spot.
If there is more text than can be displayed on the screen, an ellipsis will appear.