Vielen Dank für deinen Besuch. Diese Seite ist nur in Englisch verfügbar.

AVS Display Cards for TV

The guidance on this page is based on implementing the TemplateRuntime v1.0 and PlaybackController v1.1 APIs for TVs. If you are using different versions, choose another page from the drop-down menu above.

    Display Cards for Alexa provide visuals to support verbal responses, and give your users an additional modality with which to interact with Alexa.

    Alexa Display Cards for TV
    Click to enlarge

    If you are implementing Display Cards on a device, the Cards should properly display all content, templates, media attributions, and media controls. In addition, we expect that:

    • A Display Card will appear as soon as Alexa begins responding or media begins playing, and the Display Card’s contents will match the Alexa response or media.
    • Transitions between Display Cards will be smooth, as will the transition into displaying Cards and dismissing Cards.
    • Display Cards will respond to screen interactions and voice utterances as described in the design guidelines for your product’s device class.
    • Alexa attention states for Listening and Thinking will appear on top of any visible Display Card, and will not be obscured.

    Details for each of these are provided in the guidelines below.

    Static Display Cards

    Global Elements

    Alexa shows Static Display Cards in response to certain non-media queries. Cards appear as a sidebar over what the user is watching. All Display Cards in this section have the following global elements.

    Display Cards for TV: Global Elements
    Click to enlarge

    Notes on the guidelines for static Display Cards

    1. All specs are based on a reference template of 1920 x 1080dp.

    2. Layout is given in percentages to help adapt the template to your device’s screen resolution.

    3. Font sizes are given on the reference screen. These sizes should scale as the resolution of screen changes. If no line-height is given, the line-height is the same as the font size.

    4. mainTitle and subTitle should never exceed one line. If the text exceeds the width of the container, the crop the text and use an ellipsis.

    5. Image assets and icons marked in dp size should scale as the resolution of screen changes.

    6. All of the assets URL can be found in the Asset section of this documentation.

    Voice Chrome

    Voice chrome is a visual indicator of the Alexa attention states, such as Listening, Thinking, and Responding. Most TVs should use on-screen voice chrome, although it is possible to use on-device LEDs to display the states instead. On-screen voice chrome appears as a circular badge at the bottom-right corner of the screen.

    Display Cards for TV: Voice chrome
    Click to enlarge

    Details of how and when voice chrome should display can be found in the Interactions section below, and in the Interruption Scenarios section on this page. The colors and animations of voice chrome should follow the patterns specified in our Attention System documentation.

    Interactions

    The user views the following screen states when interacting with Alexa.

    Display Cards for TV: Card interactions
    Click to enlarge

    Step 1: Invocation

    The customer invokes Alexa with the wake word “Alexa” or a button on the remote control. This activates the voice chrome to show Alexa is listening.

    Step 2: Listening and thinking

    Once Alexa is invoked and voice chrome is displayed, the customer can control Alexa with their voice. If Alexa recognizes an utterance, it processes the intent and display a Card. If Alexa doesn’t hear anything from the customer within 8 seconds, voice chrome dismisses.

    Step 3: Response and dismissal

    Alexa responds verbally, and when applicable, with a Display Card. The Card should stay up while Alexa is speaking and dismiss automatically when finished. The user can also clear the Card before Alexa is done speaking by using the back button. If the user interrupts Alexa with a new request, Alexa should stop speaking, dim the Card, open the voice chrome, and listen to the new request.

    Additional interaction scenarios are described in the Interruption Scenarios section.

    BodyTemplate1

    BodyTemplate1 is used for Q&A, Wikipedia queries, and third-party Skill requests that do not contain a photo. Sample utterances that would invoke BodyTemplate1 include:

    1. “How deep is the ocean?”
    2. “What is the definition of “paradox”?”
    3. "What is the Karman line?"
    4. "What is bike polo?"


    Alexa Display Cards for TV: BodyTemplate1
    Click to enlarge

    Style

    Alexa Display Cards for TV: BodyTemplate1 Style
    Click to enlarge

    Layout

    Alexa Display Cards for TV: BodyTemplate1 Layout
    Click to enlarge

    Note: Text can extend to 60dp above the logo. Any text past that point should be hidden but accessible by scrolling on a 5-way remote control.

    Data

    Alexa Display Cards for TV: BodyTemplate1 Data
    Click to enlarge

    JSON

    
    {
      "directive": {
        "header": {
          "namespace": "TemplateRuntime",
          "name": "RenderTemplate"
        },
        "payload": {
          "token": "{{STRING}}",
          "type": "BodyTemplate1",
          "title": {
            "mainTitle": "Who is Usain Bolt?",
            "subTitle": "Wikipedia"
          },
          "skillIcon": {
            "sources": [
              {
                "url": "https://example.com/smallSkillIcon.png",
                "size": "small"
              }
            ]
          },
          "textField": "Usain St Leo Bolt, OJ, CD born 21..."
        }
      }
    }
    
    

    BodyTemplate2

    BodyTemplate2, like BodyTemplate1, is used for Q&A, Wikipedia queries, and third-party Skill requests but, unlike BodyTemplate1, it also returns an image. Sample utterances that would invoke BodyTemplate2 include:

    1. “Who is Usain Bolt?”
    2. “What is 5 miles in kilometers?”
    3. “Who wrote To Kill a Mockingbird?”
    4. “Where is New Mexico?”


    Alexa Display Cards for TV: BodyTemplate2
    Click to enlarge

    Style

    Alexa Display Cards for TV: BodyTemplate2 Style
    Click to enlarge

    Layout

    Alexa Display Cards for TV: BodyTemplate2 Layout
    Click to enlarge

    Notes

    1. The maximum image height and width are 320 x 480dp. Images of different aspect ratios should resize to stay within these dimensions.
    2. Text can extend to 60dp above the logo. Any text past that point should be hidden but accessible by scrolling on a 5-way remote control.

    Data

    Alexa Display Cards for TV: BodyTemplate2 Data
    Click to enlarge

    JSON

    
    {
      "directive": {
        "header": {
          "namespace": "TemplateRuntime",
          "name": "RenderTemplate"
        },
        "payload": {
          "token": "{{STRING}}",
          "type": "BodyTemplate2",
          "title": {
            "mainTitle": "Who is Usain Bolt?",
            "subTitle": "Wikipedia"
          },
          "skillIcon": {
            "sources": [
              {
                "url": "https://example.com/smallSkillIcon.png",
                "size": "small"
              }
            ]
          },
          "textField": "Usain St Leo Bolt, OJ, CD Born 21 August...",
          "image": {
            "contentDescription": "Image with two sources."
              "sources": [
                {
                  "url": "https://example.com/smallUsainBolt.jpg",
                  "size": "small"
                },
                {
                  "url": "https://example.com/largeUsainBolt.jpg",
                  "size": "large",
                  "widthPixels": 1200 ,
                  "heightPixels": 800
                }
              ]
          }
        }
      }
    }
    
    

    ListTemplate1

    ListTemplate1 is used to display items in a list, such as a calendar or shopping list. Sample utterances that would invoke ListTemplate1 include:

    1. “What’s on my to do list?”
    2. “Add eggs to my shopping list.”
    3. “When is my next event?”
    4. “Add “Lunch with Jayla” to my calendar.”


    Alexa Display Cards for TV: ListTemplate1
    Click to enlarge

    Style

    Alexa Display Cards for TV: ListTemplate1 Style
    Click to enlarge

    Layout

    Alexa Display Cards for TV: ListTemplate1 Layout
    Click to enlarge

    Data

    Alexa Display Cards for TV: ListTemplate1 Data
    Click to enlarge

    Variation: Shopping List

    Alexa Display Cards for TV: ListTemplate1 Shopping List Variation
    Click to enlarge

    Variation: Calendar

    Alexa Display Cards for TV: ListTemplate1 Calendar List Variation
    Click to enlarge

    WeatherTemplate

    WeatherTemplate is used with all weather-related utterances, such as:

    1. “What’s the weather?”
    2. “Will it rain today?”
    3. “What’s the weather in [location]?”


    Alexa Display Cards for TV: WeatherTemplate
    Click to enlarge

    Style

    Alexa Display Cards for TV: WeatherTemplate Style
    Click to enlarge

    Layout

    Alexa Display Cards for TV: WeatherTemplate Layout
    Click to enlarge

    Weather template layout in 3 digits

    Alexa Display Cards for TV: WeatherTemplate Layout
    Click to enlarge

    Notes:

    1. mainTitles and subTitles are one line maximum. If they don’t fit, truncate the title and use an ellipsis.
    2. The icon size is given on a reference template of 1920 x 1080dp. It should scales as the TV dimension changes.

    Data

    Alexa Display Cards for TV: WeatherTemplate Data
    Click to enlarge

    JSON

    
    {
      "directive": {
        "header": {
          "namespace": "TemplateRuntime",
          "name": "RenderTemplate"
        },
        "payload": {
          "token": "{{STRING}}",
          "type": "WeatherTemplate",
          "title": {
            "mainTitle": "San Francisco",
            "subTitle": "Friday, October 31"
          },
          "skillIcon": null,
          "currentWeather": "75°",
          "description": "Mostly cloudy and more humid with a couple of showers and ...",
          "currentWeatherIcon" {
            "contentDescription": "Weather image sources.",
            "sources": [
              {
                "url": "https://example.com/mediumPartlyCloudy.jpg",
                "size": "medium"
              }
            ]
          },
          "highTemperature": {
            "value": "76°",
            "arrow": {
              "contentDescription": "Up arrow sources.",
              "sources": [
                {
                  "url": "https://example.com/mediumUpArrow.jpg",
                  "size": "medium"
                }
              ]
            },
          },
          "lowTemperature": {
            "value": "45°",
            "arrow": {
              "contentDescription": "Down arrow sources.",
              "sources": [
                {
                  "url": "https://example.com/mediumDownArrow.jpg",
                  "size": "medium"
                }
              ]
            },
          },
          "weatherForecast": [
            {
              "image": {
                "contentDescription": "Partly cloudy...",
                "sources": [
                  {
                    "url": "https://example.com/smallChanceOfRain.jpg",
                    "size": "small"
                  }
                ]
              },
              "day": "Sat",
              "date": "Oct 22",
              "highTemperature": "71°",
              "lowTemperature": "55°"
            },
            {
              ...
            }
          ]
        }
      }
    }
    
    

    NowPlaying Cards

    NowPlaying is used for media requests. Sample utterances that would invoke NowPlaying include:

    1. “Play jazz music”
    2. “Play Smoke & Retribution”
    3. “Play Freakonomics on iHeartRadio”
    4. “Play a country station from [third-party music provider]”


    Alexa Display Cards for TV: NowPlaying
    Click to enlarge

    VUI Playback Commands

    The customer can control media playback either using GUI or VUI. VUI playback commands include:

    • Play
    • Stop
    • Cancel
    • Pause
    • Resume
    • Next
    • Previous
    • Rewind
    • Start Over
    • Louder
    • Softer
    • Set Volume
    • Mute
    • Unmute
    • Shuffle
    • Restart
    • Get details
    • Who is this?

    Global Elements

    Alexa shows the NowPlaying GUI in response to media queries. All NowPlaying Cards in this section have the following global elements.

    Alexa Display Cards for TV: NowPlaying Global Elements
    Click to enlarge

    The global elements in the NowPlaying Card include:

    1. Media Metadata

    2. Playback controls: These will vary depending on the media type and the service.

    3. Progress bar: Appears with most media types.

    4. Alexa logo

    5. Media artwork: This could be album art, a radio station logo, a program logo, or book artwork.

    6. Music Provider Logo: The logo of the service providing the media.

    Controls Per Music Service Provider

    Alexa can play music from multiple Music Service Providers. Controls vary per provider offering. For example, a live radio station might not have forward and back controls. The correct controls for each offering will be specified in the PlayerInfo directive.

    Interactions

    The user views the following screen states when interacting with Alexa.

    Alexa Display Cards for TV: NowPlaying Interactions
    Click to enlarge

    Step 1: Invocation

    The customer invokes Alexa with the wake word “Alexa” or using a remote control. This activates voice chrome to show Alexa is listening.

    Step 2: Listening and intent processing

    Once voice chrome is invoked the customer can control Alexa with their voice. If Alexa recognizes an utterance it will process their intent and display a Card. If not, the voice chrome dismisses.

    Step 3: Response and dismissal

    Alexa responds verbally, shows the NowPlaying Display Card, and plays the requested media. The customer can control the media via voice commands or GUI. The Card updates with each now song.

    If the user:

    1. Multitasks with the remote, both the Card and audio dismiss.

    2. Pauses or stops the music via voice or the button, then the audio stops and the Card remains. The Card should auto-dismiss after one minute of inactivity.

    3. Activates Alexa again, the music attenuates, and voice chrome reappears awaiting the next command.

    Additional interaction scenarios are described in the Interruption Scenarios section.

    Specs

    Style

    Alexa Display Cards for TV: NowPlaying Style
    Click to enlarge

    Layout

    Alexa Display Cards for TV: NowPlaying Layout
    Click to enlarge
    Alexa Display Cards for TV: NowPlaying Layout
    Click to enlarge

    Notes

    1. If fields that are only one line exceed their container, truncate the line and use an ellipsis.
    2. The source/Author information is one line, and the mainTitle can be two lines maximum. If the mainTitle exceeds two lines, truncate the text and use an ellipsis.
    3. If Title has two lines, titleSubtext1 and titleSubtext2 push down to accommodate. The controls and progress bar remain in the same place.
    4. The icon size is given on a reference template of 1280 x 800dp. It should scale as the TV dimension changes.

    Data

    Alexa Display Cards for TV: NowPlaying Data
    Click to enlarge

    Example 1: Amazon Music

    “Alexa, play Smoke & Retribution”

    Alexa Display Cards for TV: NowPlaying Amazon Music
    Click to enlarge

    JSON

    The name key-value pair may come back as “Amazon Music”, “Prime Music”, or “Prime Station”. If Prime is not enabled, name will be “Digital Music Store.”

    
    {
      "directive": {
        "header": {
          "namespace": "TemplateRuntime",
          "name": "RenderPlayerInfo",
          "messageId": "{{STRING}}",
          "dialogRequestId": "{{STRING}}"
        },
        "payload": {
          "audioItemId": "{{STRING}}",
          "content": {
            "title": "{{STRING}}",
            "titleSubtext1": "{{STRING}}",
            "titleSubtext2": "{{STRING}}",
            "header": "{{STRING}}",
            "headerSubtext1": "{{STRING}}",
            "mediaLengthInMilliseconds": {{LONG}},   
            "art": {{IMAGE_STRUCTURE}},     
            "provider": {
              "name": "{{STRING}}",
              "logo": {{IMAGE_STRUCTURE}}
            }                
          }
          "controls": [
            // This array includes all controls that must be
            // rendered on-screen.
            {
              "type": "{{STRING}}",
              "name": "{{STRING}}",
              "enabled": {{BOOLEAN}},
              "selected": {{BOOLEAN}}
            },
            {
              "type": "{{STRING}}",
              "name": "{{STRING}}",
              "enabled": {{BOOLEAN}},
              "selected": {{BOOLEAN}}
            },
            {
              ...
            }
          ]
        }
      }
    }
    
    

    Example 2: iHeartRadio Live Radio

    “Alexa, play Hollywood Breakdown on iHeartRadio”

    Alexa Display Cards for TV: NowPlaying iHeartRadio Live Radio
    Click to enlarge

    JSON

    
    {
      "directive": {
        "header": {
          "namespace": "TemplateRuntime",
          "name": "RenderPlayerInfo",
          "messageId": "{{STRING}}",
          "dialogRequestId": "{{STRING}}"
        },
        "payload": {
          "audioItemId": "{{STRING}}",
          "content": {
            "title": "The summer of \"sequel-itis\" and beginning of awards season",        
            "header": "KCRW's Hollywood Breakdown",        
            "mediaLengthInMilliseconds": 0,   
            "art" : {
              "sources" : [
                {
                  "size" : "medium",
                  "url" : "http://example.com/AlbumArt.svg"
                }
              ]
            },     
            "provider": {
              "name": "iHeartRadio Live Radio",
              "logo" : {
                "sources" : [
                  {
                    "url" : "https://example.com/ProviderLogo.jpg"
                  }
                ]
              }
            }                
          }
          "controls": [
            {
              "type": "BUTTON",
              "name": "PLAY_PAUSE",
              "enabled": true,
              "selected": false
            },
            {
           "type": "TOGGLE",
           "name": "THUMB_UP",
           "enabled": true,
           "selected": false
           },
           {
           "type": "TOGGLE",
           "name": "THUMB_DOWN",
           "enabled": true,
           "selected": false
           }
          ]
        }
      }
    }
    
    

    Example 3: Amazon Music Station

    “Alexa, play my favorite station”

    Alexa Display Cards for TV: NowPlaying Amazon Music
    Click to enlarge

    Example 4: Audible books

    “Alexa, read my audible book”

    Alexa Display Cards for TV: NowPlaying Amazon Music
    Click to enlarge

    Example 5: Pandora Music

    “Alexa, read my pandora music”

    Alexa Display Cards for TV: NowPlaying Amazon Music
    Click to enlarge

    Note: If Back, Pause/Play, or Forward is disabled, use the "disabled" version of the icon.

    Controls-Only Template

    There may be instances when no metadata is returned from a NowPlaying request. In this instance, use the Controls-Only Template, which includes a minimized set of visuals.

    Note: For certain Music Service Providers, the PlayerInfo directive is sent after the PlaybackStarted Event. In these cases, we recommend adding logic to wait 2 seconds for the PlayerInfo directive. If metadata is not returned after this time, display the Controls-Only Template.

    Controls-Only Template

    Alexa Display Cards for TV: NowPlaying Controls-Only Template
    Click to enlarge

    Style

    Alexa Display Cards for TV: NowPlaying Controls-Only Style
    Click to enlarge

    Layout

    Alexa Display Cards for TV: NowPlaying Controls-Only Layout
    Click to enlarge

    Data

    Alexa Display Cards for TV: NowPlaying Controls-Only Data
    Click to enlarge

    Transitions

    Transitions should be quick (< 1 sec) and employ easing to create a smooth feel. Display Cards enter from the right for partial-screen Cards, and fade in for full-screen Cards. The Card enters first, followed by the content fading in. To account for latency, a background placeholder box should appear in place of an image, which transitions to the fully loaded image when it arrives.

    Cards exit the opposite way they came in. The content fades out first and then the Card removes. Partial-screen Cards slide off to the right and full-screen cards fade out.

    Alexa Display Cards for TV: TV Transition Example
    Click to enlarge

    Interruption Scenarios

    Card to Card

    Alexa Display Cards for TV: Interruption Scenarios: Card to Card
    Click to enlarge

    Step 1: Utterance1

    At Utterance1, voice chrome overlays the existing screen.

    Step 2: TTS1 + GUI1

    Alexa responds.

    Step 3: Utterance 2 (Interruption)

    When the customer interrupts Alexa (via tap or wake word), Alexa stops speaking and voice chrome overlays the existing card.

    Step 4: TTS2 + GUI2

    Alexa responds to utterance2 via voice and replaces the old card with a new one. This card dismisses according to regular dismissal rules.

    NowPlaying to Card

    Alexa Display Cards for TV: Interruption Scenarios: NowPlaying to Card
    Click to enlarge

    Step 1: Utterance1

    At Utterance1, voice chrome overlays the existing screen.

    Step 2: TTS1 + GUI1

    Alexa responds. Music plays.

    Step 3: Utterance 2 (Interruption)

    When the customer interrupts Alexa (via tap or wake word), the music attenuates and voice chrome overlays the nowPlaying GUI.

    Step 4: TTS2 + GUI2

    If the utterance is understood and a card is required, Alexa responds to the utterance via voice and a new card. Once the TTS completes, the music returns to the regular volume. The card dismisses according to regular dismissal rules, except that when dismissed, the customer returns to the nowPlaying card.

    If the song changes during this time, when returning the nowPlaying GUI should reflect the new song.

    Card to NowPlaying

    Alexa Display Cards for TV: Interruption Scenarios: Card to NowPlaying
    Click to enlarge

    Step 1: Utterance1

    At Utterance1, voice chrome overlays the existing screen.

    Step 2: TTS2 + GUI1

    Alexa responds.

    Step 3: Utterance2 (Interruption)

    When the customer interrupts the music (via tap or wake word), Alexa stops speaking and the voice chrome overlays the existing card.

    Step 4: TTS + GUI2

    Alexa responds to Utterance 2 via voice and a new card. Once the TTS completes, music begins playing. This card dismisses according to regular dismissal rules.

    NowPlaying to Error

    Alexa Display Cards for TV: Interruption Scenarios: NowPlaying to Error
    Click to enlarge

    Step 1: Utterance1

    At Utterance1, voice chrome overlays the existing screen.

    Step 2: TTS2 + GUI1

    Alexa responds. Music plays.

    Step 3: Utterance2 (Interruption)

    When the customer interrupts the music (via tap or wake word), the music attenuates and voice chrome overlays the nowPlaying GUI.

    Step 4: GUI1

    If no utterance is understood, the voice chrome removes, returning to the nowPlaying GUI, and the music returns to it’s original volume.

    Assets

    These resources are provided for you to use with your display cards.

    Alexa

    Transport controls

    The following are assets for media player controls.

    The focus icon (With Focus) should be used when the customer navigates to the icon with their remote control. The enabled icon (Enabled) is used when the customer presses a button to activate that control. It is optional, but we recommend using it to make the icon image transition smoother.

    Play

    Pause

    Next

    Prev

    Shuffle

    Loop

    Thumbs Up

    Thumbs Down

    30 Seconds Forward

    30 Seconds Backward

    Alexa font

    Use the following font families for Alexa-related screens, features, and functionality:

    • Amazon Ember Display
    • Bookerly
    • Noto Sans CJK

    Bookerly is used mainly for Things to Try text, and Noto Sans CJK is supplied for Chinese, Japanese, and Korean language support. Amazon Ember Display and Bookerly are reserved for Alexa-related uses only.

    Find the Amazon font files on the Amazon Developer Portal (requires login) under the Resources tab.

    The guidance on this page is based on implementing the TemplateRuntime v1.0 and PlaybackController v1.0 APIs for TVs. If you are using different versions, choose another page from the drop-down menu above.

      Display Cards for Alexa provide visuals to support verbal responses, and give your users an additional modality with which to interact with Alexa.

      Alexa Display Cards for TV
      Click to enlarge

      If you are implementing Display Cards on a device, the Cards should properly display all content, templates, media attributions, and media controls. In addition, we expect that:

      • A Display Card will appear as soon as Alexa begins responding or media begins playing, and the Display Card’s contents will match the Alexa response or media.
      • Transitions between Display Cards will be smooth, as will the transition into displaying Cards and dismissing Cards.
      • Display Cards will respond to screen interactions and voice utterances as described in the design guidelines for your product’s device class.
      • Alexa attention states for Listening and Thinking will appear on top of any visible Display Card, and will not be obscured.

      Details for each of these are provided in the guidelines below.

      Static Display Cards

      Global Elements

      Alexa shows Static Display Cards in response to certain non-media queries. Cards appear as a sidebar over what the user is watching. All Display Cards in this section have the following global elements.

      Display Cards for TV: Global Elements
      Click to enlarge

      Notes on the guidelines for static Display Cards

      1. All specs are based on a reference template of 1920 x 1080dp.

      2. Layout is given in percentages to help adapt the template to your device’s screen resolution.

      3. Font sizes are given on the reference screen. These sizes should scale as the resolution of screen changes. If no line-height is given, the line-height is the same as the font size.

      4. mainTitle and subTitle should never exceed one line. If the text exceeds the width of the container, the crop the text and use an ellipsis.

      5. Image assets and icons marked in dp size should scale as the resolution of screen changes.

      6. All of the assets URL can be found in the Asset section of this documentation.

      Voice Chrome

      Voice chrome is a visual indicator of the Alexa attention states, such as Listening, Thinking, and Responding. Most TVs should use on-screen voice chrome, although it is possible to use on-device LEDs to display the states instead. On-screen voice chrome appears as a circular badge at the bottom-right corner of the screen.

      Display Cards for TV: Voice chrome
      Click to enlarge

      Details of how and when voice chrome should display can be found in the Interactions section below, and in the Interruption Scenarios section on this page. The colors and animations of voice chrome should follow the patterns specified in our Attention System documentation.

      Interactions

      The user views the following screen states when interacting with Alexa.

      Display Cards for TV: Card interactions
      Click to enlarge

      Step 1: Invocation

      The customer invokes Alexa with the wake word “Alexa” or a button on the remote control. This activates the voice chrome to show Alexa is listening.

      Step 2: Listening and thinking

      Once Alexa is invoked and voice chrome is displayed, the customer can control Alexa with their voice. If Alexa recognizes an utterance, it processes the intent and display a Card. If Alexa doesn’t hear anything from the customer within 8 seconds, voice chrome dismisses.

      Step 3: Response and dismissal

      Alexa responds verbally, and when applicable, with a Display Card. The Card should stay up while Alexa is speaking and dismiss automatically when finished. The user can also clear the Card before Alexa is done speaking by using the back button. If the user interrupts Alexa with a new request, Alexa should stop speaking, dim the Card, open the voice chrome, and listen to the new request.

      Additional interaction scenarios are described in the Interruption Scenarios section.

      BodyTemplate1

      BodyTemplate1 is used for Q&A, Wikipedia queries, and third-party Skill requests that do not contain a photo. Sample utterances that would invoke BodyTemplate1 include:

      1. “How deep is the ocean?”
      2. “What is the definition of “paradox”?”
      3. "What is the Karman line?"
      4. "What is bike polo?"


      Alexa Display Cards for TV: BodyTemplate1
      Click to enlarge

      Style

      Alexa Display Cards for TV: BodyTemplate1 Style
      Click to enlarge

      Layout

      Alexa Display Cards for TV: BodyTemplate1 Layout
      Click to enlarge

      Note: Text can extend to 60dp above the logo. Any text past that point should be hidden but accessible by scrolling on a 5-way remote control.

      Data

      Alexa Display Cards for TV: BodyTemplate1 Data
      Click to enlarge

      JSON

      
      {
        "directive": {
          "header": {
            "namespace": "TemplateRuntime",
            "name": "RenderTemplate"
          },
          "payload": {
            "token": "{{STRING}}",
            "type": "BodyTemplate1",
            "title": {
              "mainTitle": "Who is Usain Bolt?",
              "subTitle": "Wikipedia"
            },
            "skillIcon": {
              "sources": [
                {
                  "url": "https://example.com/smallSkillIcon.png",
                  "size": "small"
                }
              ]
            },
            "textField": "Usain St Leo Bolt, OJ, CD born 21..."
          }
        }
      }
      
      

      BodyTemplate2

      BodyTemplate2, like BodyTemplate1, is used for Q&A, Wikipedia queries, and third-party Skill requests but, unlike BodyTemplate1, it also returns an image. Sample utterances that would invoke BodyTemplate2 include:

      1. “Who is Usain Bolt?”
      2. “What is 5 miles in kilometers?”
      3. “Who wrote To Kill a Mockingbird?”
      4. “Where is New Mexico?”


      Alexa Display Cards for TV: BodyTemplate2
      Click to enlarge

      Style

      Alexa Display Cards for TV: BodyTemplate2 Style
      Click to enlarge

      Layout

      Alexa Display Cards for TV: BodyTemplate2 Layout
      Click to enlarge

      Notes

      1. The maximum image height and width are 320 x 480dp. Images of different aspect ratios should resize to stay within these dimensions.
      2. Text can extend to 60dp above the logo. Any text past that point should be hidden but accessible by scrolling on a 5-way remote control.

      Data

      Alexa Display Cards for TV: BodyTemplate2 Data
      Click to enlarge

      JSON

      
      {
        "directive": {
          "header": {
            "namespace": "TemplateRuntime",
            "name": "RenderTemplate"
          },
          "payload": {
            "token": "{{STRING}}",
            "type": "BodyTemplate2",
            "title": {
              "mainTitle": "Who is Usain Bolt?",
              "subTitle": "Wikipedia"
            },
            "skillIcon": {
              "sources": [
                {
                  "url": "https://example.com/smallSkillIcon.png",
                  "size": "small"
                }
              ]
            },
            "textField": "Usain St Leo Bolt, OJ, CD Born 21 August...",
            "image": {
              "contentDescription": "Image with two sources."
                "sources": [
                  {
                    "url": "https://example.com/smallUsainBolt.jpg",
                    "size": "small"
                  },
                  {
                    "url": "https://example.com/largeUsainBolt.jpg",
                    "size": "large",
                    "widthPixels": 1200 ,
                    "heightPixels": 800
                  }
                ]
            }
          }
        }
      }
      
      

      ListTemplate1

      ListTemplate1 is used to display items in a list, such as a calendar or shopping list. Sample utterances that would invoke ListTemplate1 include:

      1. “What’s on my to do list?”
      2. “Add eggs to my shopping list.”
      3. “When is my next event?”
      4. “Add “Lunch with Jayla” to my calendar.”


      Alexa Display Cards for TV: ListTemplate1
      Click to enlarge

      Style

      Alexa Display Cards for TV: ListTemplate1 Style
      Click to enlarge

      Layout

      Alexa Display Cards for TV: ListTemplate1 Layout
      Click to enlarge

      Data

      Alexa Display Cards for TV: ListTemplate1 Data
      Click to enlarge

      Variation: Shopping List

      Alexa Display Cards for TV: ListTemplate1 Shopping List Variation
      Click to enlarge

      Variation: Calendar

      Alexa Display Cards for TV: ListTemplate1 Calendar List Variation
      Click to enlarge

      WeatherTemplate

      WeatherTemplate is used with all weather-related utterances, such as:

      1. “What’s the weather?”
      2. “Will it rain today?”
      3. “What’s the weather in [location]?”


      Alexa Display Cards for TV: WeatherTemplate
      Click to enlarge

      Style

      Alexa Display Cards for TV: WeatherTemplate Style
      Click to enlarge

      Layout

      Alexa Display Cards for TV: WeatherTemplate Layout
      Click to enlarge

      Weather template layout in 3 digits

      Alexa Display Cards for TV: WeatherTemplate Layout
      Click to enlarge

      Notes:

      1. mainTitles and subTitles are one line maximum. If they don’t fit, truncate the title and use an ellipsis.
      2. The icon size is given on a reference template of 1920 x 1080dp. It should scales as the TV dimension changes.

      Data

      Alexa Display Cards for TV: WeatherTemplate Data
      Click to enlarge

      JSON

      
      {
        "directive": {
          "header": {
            "namespace": "TemplateRuntime",
            "name": "RenderTemplate"
          },
          "payload": {
            "token": "{{STRING}}",
            "type": "WeatherTemplate",
            "title": {
              "mainTitle": "San Francisco",
              "subTitle": "Friday, October 31"
            },
            "skillIcon": null,
            "currentWeather": "75°",
            "description": "Mostly cloudy and more humid with a couple of showers and ...",
            "currentWeatherIcon" {
              "contentDescription": "Weather image sources.",
              "sources": [
                {
                  "url": "https://example.com/mediumPartlyCloudy.jpg",
                  "size": "medium"
                }
              ]
            },
            "highTemperature": {
              "value": "76°",
              "arrow": {
                "contentDescription": "Up arrow sources.",
                "sources": [
                  {
                    "url": "https://example.com/mediumUpArrow.jpg",
                    "size": "medium"
                  }
                ]
              },
            },
            "lowTemperature": {
              "value": "45°",
              "arrow": {
                "contentDescription": "Down arrow sources.",
                "sources": [
                  {
                    "url": "https://example.com/mediumDownArrow.jpg",
                    "size": "medium"
                  }
                ]
              },
            },
            "weatherForecast": [
              {
                "image": {
                  "contentDescription": "Partly cloudy...",
                  "sources": [
                    {
                      "url": "https://example.com/smallChanceOfRain.jpg",
                      "size": "small"
                    }
                  ]
                },
                "day": "Sat",
                "date": "Oct 22",
                "highTemperature": "71°",
                "lowTemperature": "55°"
              },
              {
                ...
              }
            ]
          }
        }
      }
      
      

      NowPlaying Cards

      Alexa uses NowPlaying in response to media requests. Sample utterances that would invoke NowPlaying include:

      1. “Play jazz music”
      2. “Play Smoke & Retribution”
      3. “Play Freakonomics on iHeartRadio”
      4. “Play a country station from [third-party music provider]”


      Alexa Display Cards for TV: NowPlaying
      Click to enlarge

      VUI Playback Commands

      The customer can control media playback either using GUI or VUI. VUI playback commands include:

      • Play
      • Stop
      • Cancel
      • Pause
      • Resume
      • Next
      • Previous
      • Rewind
      • Start Over
      • Louder
      • Softer
      • Set Volume
      • Mute
      • Unmute
      • Shuffle
      • Restart
      • Get details
      • Who is this?

      Global Elements

      Alexa shows the NowPlaying GUI in response to media queries. All NowPlaying Cards in this section have the following global elements.

      Alexa Display Cards for TV: NowPlaying Global Elements
      Click to enlarge

      The global elements in the NowPlaying Card include:

      1. Media Metadata

      2. Playback controls: These will vary depending on the media type and the service.

      3. Progress bar: Appears with most media types.

      4. Alexa logo

      5. Media artwork: This could be album art, a radio station logo, a program logo, or book artwork.

      6. Music Provider Logo: The logo of the service providing the media.

      Controls Per Music Service Provider

      Alexa can play music from multiple Music Service Providers. Controls vary per provider offering. For example, a live radio station might not have forward and back controls. The correct controls for each offering will be specified in the PlayerInfo directive.

      Controls per Music Service Provider

      Provider Offering Pause/Play Back Forward
      Amazon Music On Demand
      Amazon Music Playlist
      Amazon Music Station
      TuneIn Live Radio
      TuneIn Books and Podcasts
      Pandora
      iHeartRadio Live Radio
      iHeartRadio Artist Radio
      iHeartRadio Books and Podcasts

      Note: Amazon Music and Pandora are available only for commercial devices.

      Interactions

      The customer views the following screen states when interacting with Alexa.

      Alexa Display Cards for TV: NowPlaying Interactions
      Click to enlarge

      Step 1: Invocation

      The customer invokes Alexa with the wake word “Alexa” or using a remote control. This activates voice chrome to show Alexa is listening.

      Step 2: Listening and intent processing

      Once voice chrome is invoked the customer can control Alexa with their voice. If Alexa recognizes an utterance it will process their intent and display a Card. If not, the voice chrome dismisses.

      Step 3: Response and Dismissal

      Alexa responds verbally, shows the NowPlaying Display Card, and plays the requested media. The customer can control the media via voice commands or GUI. The Card updates with each new song.

      If the customer:

      • Multitasks with the remote, both the Card and audio dismiss.
      • Pauses or stops the music via voice or the button, then the audio stops and the Card remains. The Card should auto-dismiss after one minute of inactivity.
      • Activates Alexa again, then the music attenuates and voice chrome reappears awaiting the next command.

      Additional interaction scenarios are described in the Interruption Scenarios section.

      Specs

      Style

      Alexa Display Cards for TV: NowPlaying Style
      Click to enlarge

      Layout

      Alexa Display Cards for TV: NowPlaying Layout
      Click to enlarge

      Notes:

      1. If fields that are only one line exceed their container, truncate the line and use an ellipsis.
      2. If Title has two lines, titleSubtext1 and titleSubtext2 push down to accommodate. The controls and progress bar remain in the same place.

      Data

      Alexa Display Cards for TV: NowPlaying Data
      Click to enlarge

      Examples

      Example 1: Amazon Music

      “Alexa, play Smoke & Retribution”

      Alexa Display Cards for TV: NowPlaying Amazon Music
      Click to enlarge

      JSON

      The name key-value pair may come back as “Amazon Music”, “Prime Music”, or “Prime Station”. If Prime is not enabled, name will be “Digital Music Store.”

      
      {
        "directive": {
          "header": {
            "namespace": "TemplateRuntime",
            "name": "RenderPlayerInfo",
            "messageId": "{{STRING}}",
            "dialogRequestId": "{{STRING}}"
          },
          "payload": {
            "audioItemId": "{{STRING}}",
            "content": {
              "title": "{{STRING}}",
              "titleSubtext1": "{{STRING}}",
              "titleSubtext2": "{{STRING}}",
              "header": "{{STRING}}",
              "headerSubtext1": "{{STRING}}",
              "mediaLengthInMilliseconds": {{LONG}},   
              "art": {{IMAGE_STRUCTURE}},     
              "provider": {
                "name": "{{STRING}}",
                "logo": {{IMAGE_STRUCTURE}}
              }                
            }
            "controls": [
              // This array includes all controls that must be
              // rendered on-screen.
              {
                "type": "{{STRING}}",
                "name": "{{STRING}}",
                "enabled": {{BOOLEAN}},
                "selected": {{BOOLEAN}}
              },
              {
                "type": "{{STRING}}",
                "name": "{{STRING}}",
                "enabled": {{BOOLEAN}},
                "selected": {{BOOLEAN}}
              },
              {
                ...
              }
            ]
          }
        }
      }
      
      

      Example 2: iHeartRadio Live Radio

      “Alexa, play Hollywood Breakdown on iHeartRadio”

      Alexa Display Cards for TV: NowPlaying iHeartRadio Live Radio
      Click to enlarge

      JSON

      
      {
        "directive": {
          "header": {
            "namespace": "TemplateRuntime",
            "name": "RenderPlayerInfo",
            "messageId": "{{STRING}}",
            "dialogRequestId": "{{STRING}}"
          },
          "payload": {
            "audioItemId": "{{STRING}}",
            "content": {
              "title": "The summer of \"sequel-itis\" and beginning of awards season",        
              "header": "KCRW's Hollywood Breakdown",        
              "mediaLengthInMilliseconds": 0,   
              "art" : {
                "sources" : [
                  {
                    "size" : "medium",
                    "url" : "http://example.com/AlbumArt.svg"
                  }
                ]
              },     
              "provider": {
                "name": "iHeartRadio Live Radio",
                "logo" : {
                  "sources" : [
                    {
                      "url" : "https://example.com/ProviderLogo.jpg"
                    }
                  ]
                }
              }                
            }
            "controls": [
              {
                "type": "BUTTON",
                "name": "PLAY_PAUSE",
                "enabled": true,
                "selected": false
              },
            ]
          }
        }
      }
      
      

      Flash Briefing and Other Scenarios with No Metadata

      There may be instances when no metadata is returned from a NowPlaying request. In this instance, use the Controls-Only Template, which includes a minimized set of visuals.

      Note: For certain Music Service Providers, the PlayerInfo directive is sent after the PlaybackStarted Event. In these cases, we recommend adding logic to wait 2 seconds for the PlayerInfo directive. If metadata is not returned after this time, display the Controls-Only Template.

      Controls-Only Template

      Alexa Display Cards for TV: NowPlaying Controls-Only Template
      Click to enlarge

      Style

      Alexa Display Cards for TV: NowPlaying Controls-Only Style
      Click to enlarge

      Layout

      Alexa Display Cards for TV: NowPlaying Controls-Only Layout
      Click to enlarge

      Data

      Alexa Display Cards for TV: NowPlaying Controls-Only Data
      Click to enlarge

      Transitions

      Transitions should be quick (< 1 sec) and employ easing to create a smooth feel. Display Cards enter from the right for partial-screen Cards, and fade in for full-screen Cards. The Card enters first, followed by the content fading in. To account for latency, a background placeholder box should appear in place of an image, which transitions to the fully loaded image when it arrives.

      Cards exit the opposite way they came in. The content fades out first and then the Card removes. Partial-screen Cards slide off to the right and full-screen cards fade out.

      Alexa Display Cards for TV: TV Transition Example
      Click to enlarge

      Interruption Scenarios

      Card to Card

      Alexa Display Cards for TV: Interruption Scenarios: Card to Card
      Click to enlarge

      Step 1: Utterance1

      At Utterance1, voice chrome overlays the existing screen.

      Step 2: TTS1 + GUI1

      Alexa responds.

      Step 3: Utterance 2 (Interruption)

      When the customer interrupts Alexa (via tap or wake word), Alexa stops speaking and voice chrome overlays the existing card.

      Step 4: TTS2 + GUI2

      Alexa responds to utterance2 via voice and replaces the old card with a new one. This card dismisses according to regular dismissal rules.

      NowPlaying to Card

      Alexa Display Cards for TV: Interruption Scenarios: NowPlaying to Card
      Click to enlarge

      Step 1: Utterance1

      At Utterance1, voice chrome overlays the existing screen.

      Step 2: TTS1 + GUI1

      Alexa responds. Music plays.

      Step 3: Utterance 2 (Interruption)

      When the customer interrupts Alexa (via tap or wake word), the music attenuates and voice chrome overlays the nowPlaying GUI.

      Step 4: TTS2 + GUI2

      If the utterance is understood and a card is required, Alexa responds to the utterance via voice and a new card. Once the TTS completes, the music returns to the regular volume. The card dismisses according to regular dismissal rules, except that when dismissed, the customer returns to the nowPlaying card.

      If the song changes during this time, when returning the nowPlaying GUI should reflect the new song.

      Card to NowPlaying

      Alexa Display Cards for TV: Interruption Scenarios: Card to NowPlaying
      Click to enlarge

      Step 1: Utterance1

      At Utterance1, voice chrome overlays the existing screen.

      Step 2: TTS2 + GUI1

      Alexa responds.

      Step 3: Utterance2 (Interruption)

      When the customer interrupts the music (via tap or wake word), Alexa stops speaking and the voice chrome overlays the existing card.

      Step 4: TTS + GUI2

      Alexa responds to Utterance 2 via voice and a new card. Once the TTS completes, music begins playing. This card dismisses according to regular dismissal rules.

      NowPlaying to Error

      Alexa Display Cards for TV: Interruption Scenarios: NowPlaying to Error
      Click to enlarge

      Step 1: Utterance1

      At Utterance1, voice chrome overlays the existing screen.

      Step 2: TTS2 + GUI1

      Alexa responds. Music plays.

      Step 3: Utterance2 (Interruption)

      When the customer interrupts the music (via tap or wake word), the music attenuates and voice chrome overlays the nowPlaying GUI.

      Step 4: GUI1

      If no utterance is understood, the voice chrome removes, returning to the nowPlaying GUI, and the music returns to it’s original volume.

      Assets

      These resources are provided for you to use with your display cards.

      Alexa

      Transport controls

      The following are assets for media player controls. Controls might have default, disabled, focus, and enabled states.

      The focus icon (With Focus) should be used when the customer navigates to the icon with their remote control. The enabled icon (Enabled) is used when the customer presses a button to activate that control. It is optional, but we recommend using it to make the icon image transition smoother.

      Play

      Pause

      Next

      Prev

      Alexa font

      Use the following font families for Alexa-related screens, features, and functionality:

      • Amazon Ember Display
      • Bookerly
      • Noto Sans CJK

      Bookerly is used mainly for Things to Try text, and Noto Sans CJK is supplied for Chinese, Japanese, and Korean language support. Amazon Ember Display and Bookerly are reserved for Alexa-related uses only.

      Find the Amazon font files on the Amazon Developer Portal (requires login) under the Resources tab.