Display Template Reference

BodyTemplate1 syntax

{
  "type":"BodyTemplate1",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": Image,
  "title": "string",
  "textContent": TextContent
}

BodyTemplate1 guidelines

This template does not support full-width foreground images. Instead, developers should use BodyTemplate7 for this purpose.
Line lengths with the default font size of 7 will vary, so text will wrap differently on different-sized devices.
If scrolling is needed, the full screen, including the skill icon, header text, and body content will scroll via touch.

BodyTemplate1 device differences

Device display comparison–BodyTemplate1

BodyTemplate2 syntax

{
  "type": "BodyTemplate2",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "image": Image,
  "textContent": TextContent
}

BodyTemplate2 guidelines

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) Action links (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 Action links (optional) Background image (optional), and will not show unless there is no foreground image or if the foreground image has a transparent background

Device display comparison–BodyTemplate2

BodyTemplate3 syntax

{
  "type": "BodyTemplate3",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "image": Image,
  "textContent": TextContent
}

BodyTemplate3 guidelines

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.
Hints are not displayed on Echo Spot.
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 Action links (optional) 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 Action links (optional) Background image (optional)

Device display comparison–BodyTemplate3

Display Characteristics

Echo Show and Fire TV Cube	Echo Spot
Skill icon 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.

BodyTemplate6 syntax

{
  "type": "BodyTemplate6",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": Image,
  "image": "Image",
  "textContent": TextContent
}

Device display comparison–BodyTemplate6

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

Display characteristics

Echo Show and Fire TV Cube	Echo Spot
Title text Skill icon List items: Primary text, default font size 7 Secondary text (optional), default font size 3 Tertiary text (optional), default font size 5 Image (optional) Background image (optional)	Title text Skill icon List items: Primary text, default font size 7 Secondary text (optional), default font size 3 Tertiary text (optional), default font size 3 Image (optional), Background image (optional)

Guidelines for using ListTemplate1:

Use this template for lists where images are not primary content
List items should be selectable via touch, and voice using the primary text or the ordinal
If using thumbnail images, the space for text is reduced
If there is more text than can be displayed on the screen, an ellipsis will appear

ListTemplate1 syntax

{
  "type": "ListTemplate1",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "listItems": [
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
    ...
    ...
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    }
  ]
}

Device display comparison–ListTemplate1

Display characteristics

Echo Show and Fire TV Cube	Echo Spot
Title text Skill icon List items: Primary text, default font size 2 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.
List items should be selectable via both touch and voice using the primary text or the ordinal.
Do not nest action links within list item content. Action links will not be selectable by touch and may not be visible on Echo Spot.
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.

ListTemplate2 syntax

{
  "type": "ListTemplate2",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "listItems": [
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
    ...
    ...
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
  ]
}

Device display comparison–ListTemplate2

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.	`{ "contentDescription": "string", "sources": [ { "url": "string", "size": "string", "widthPixels": integer, "heightPixels": integer }, { "url": "string", "size": "string", "widthPixels": integer, "heightPixels": integer }, {...} ] }`
`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": ..., "secondaryText": ..., "tertiaryText": ... }`
`primaryText`	Contains `type` (which is `PlainText` or `RichText`) and `text` (which is a string). Limit of 8000 characters.	`{ "text": "string", "type": "PlainText" \| "RichText" }`
`secondaryText`	Contains `type` (which is `PlainText` or `RichText`) and `text` (which is a string). Limit of 8000 characters.	`{ "text": "string", "type": "PlainText" \| "RichText" }`
`tertiaryText`	Contains `type` (which is `PlainText` or `RichText`) and `text` (which is a string). Limit of 8000 characters.	`{ "text": "string", "type": "PlainText" \| "RichText" }`
`image`	References and describes the image. Multiple sources for the image can be provided. The same format is used for both `backgroundImage` and `image`.	`{ "contentDescription": "string", "sources": [ { "url": "string", "size": "string", "widthPixels": integer, "heightPixels": integer }, { "url": "string", "size": "string", "widthPixels": integer, "heightPixels": integer }, {...} ] }`
`listItems`	Contains the text and images of the list items.	`[ { "token": "string", "image": "Image", "textContent": "TextContent" }, ... ... { "token": "string", "image": "Image", "textContent": "TextContent" } ]`

Display Template Reference

BodyTemplate1 for simple text and image views

BodyTemplate1 syntax

BodyTemplate1 guidelines

BodyTemplate1 device differences

Device display comparison–BodyTemplate1

BodyTemplate2 for image views and limited centered text

BodyTemplate2 syntax

BodyTemplate2 guidelines

Display characteristics

Device display comparison–BodyTemplate2

BodyTemplate3 for image views and limited left-aligned text

BodyTemplate3 syntax

BodyTemplate3 guidelines

Display characteristics

Device display comparison–BodyTemplate3

BodyTemplate6 for text and optional background image

BodyTemplate6 syntax

Device display comparison–BodyTemplate6

BodyTemplate7 for scalable foreground image with optional background image

BodyTemplate7 syntax

Device display comparison–BodyTemplate7

ListTemplate1 for text lists and optional images

ListTemplate1 syntax

Device display comparison–ListTemplate1

ListTemplate2 for list images and optional text

ListTemplate2 syntax

Device display comparison–ListTemplate2

Display template elements

Other resources