Display Template Reference
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.
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 containsprimaryText
,secondaryText
, andtertiaryText
. -
Each list template must include at least one list item.
-
A hint can be included with
BodyTemplate2
,BodyTemplate6
, andListTemplate2
, by use of theHint
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.
For details, see Replace display templates with responsive templates.
BodyTemplate2 for image views and limited centered 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.
For details, see Replace display templates with responsive templates.
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.
For details, see Replace display templates with responsive templates.
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.
For details, see Replace display templates with responsive templates.
BodyTemplate7 for scalable foreground image with optional background image
To use APL instead of this deprecated display template (recommended)
Create an APL document and combine the following responsive components to create a similar look.
AlexaBackground
to display a background image.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.
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.
For details, see Replace display templates with responsive templates.
ListTemplate2 for list images and optional text
To use APL instead of this deprecated display template (recommended)
Create an APL document and use the AlexaLists
responsive template with listImagePrimacy
set to true
to display image items in a horizontal list.
For details, see Replace display templates with responsive templates.
Display template elements
This table lists all of the elements that can be found in a display template, although each template might use only a subset of these elements.
Element | Description | Values/Examples |
---|---|---|
type | Name of the template | BodyTemplate1 BodyTemplate2 BodyTemplate3 BodyTemplate6 BodyTemplate7 ListTemplate1 ListTemplate2 |
token | Used to track selectable elements in the skill service code. The value can be any user-defined string. | Dog-List-2 1212323312 |
backButton | Used to place the back button on a display template. | HIDDEN VISIBLE |
backgroundImage | Used to include a background image on a display template. |
|
title | Used for title for a display template. The value can be any user-defined string. | "Doggie Carousel" "Cake Recipes Galore" |
textContent | Contains primaryText , secondaryText , and tertiaryText . |
|
primaryText |
Contains type (which is PlainText or RichText ) and text (which is a string). Limit of 8000 characters. |
|
secondaryText |
Contains type (which is PlainText or RichText ) and text (which is a string). Limit of 8000 characters. |
|
tertiaryText |
Contains type (which is PlainText or RichText ) and text (which is a string). Limit of 8000 characters. |
|
image |
References and describes the image. Multiple sources for the image can be provided. The same format is used for both `backgroundImage` and `image`. |
|
listItems | Contains the text and images of the list items. |
|
Other resources
For template-related information, see:
- Character Count Maximums for Display Templates for information on how many characters can be used in a template.
- Display Image Sizes for Each Template for information about the appropriate image sizes and shapes for each template.
To build skills with screen display, see:
-
How to Build Alexa Skills for Alexa-Enabled Devices With a Screen for a quick start to creating an Alexa skill with screen support.
-
Best Practices for using Display Templates for design guidance.
-
Use Display Templates to Show Content on Screens for device display and behavior specifications.
-
Display Interface Reference for information about using the Display interface.
Last updated: Nov 28, 2023