Your Alexa Dashboards Settings

AVS Display Cards for Tablets

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 Tablet
Click to expand

If you are implementing Alexa on a device, it is expected that the implementation will 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 decribed 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 Display Cards in response to certain non-media queries. All Display Cards in this section have the following global elements.

Alexa Display Cards for Tablet: Global Elements
Click to expand

Elements

  1. Alexa Skills icon This icon (top right) appears when a third-party provides the information being displayed on the card. If the information is not being provided by a third-party, this icon will not appear.

  2. Barge-in button This button (bottom center) can be tapped at anytime to activate and talk to Alexa.

  3. GUI dismiss button Tapping the “X” hides the GUI, but should not stop Alexa from speaking.

Currently all Display Cards appear in landscape mode. If your device is only used in portrait mode, you may modify the templates to work within your dimensions as long as no content is removed or obfuscated.

Voice Chrome

Voice chrome is a visual indicator of the Alexa attention states, such as listening, thinking, etc. Most tablets will use on-screen voice chrome, although it is possible to use on-device LEDs to display the states instead.

Details of how and when voice chrome should display can be found in the Interactions and Interruption Scenarios sections.

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 Tablet: Interactions
Click to expand

Step 1: Invocation

The customer activates Alexa with the wake word “Alexa” or with a control on the device (depending on the device). This activates Voice Chrome to show Alexa is listening.

Step 2: Listening

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 Alexa doesn’t hear anything from the customer within 5 seconds, voice chrome dismisses.

Step 3: Response and Dismissal

Alexa responds verbally, and when applicable, with a Display Card. Audio and visuals should always be in sync, showing the card and playing audio simultaneously.

Once Alexa finishes speaking, the card should dismiss automatically after 2 seconds of inactivity.

If, before playback is complete, the user:

  1. Taps the barge-in button (the Alexa logo), then TTS stops, and voice chrome opens on top of the card.

  2. Taps the “X”, then the card clears and the TTS stops.

The card should not be dismissed before TTS is complete, unless the user has done so manually.

Tapping the barge-in button (the Alexa logo) should stop the TTS, dismiss the card, and open the voice chrome.

Additional interactions scenarios are defined in the Interruptions Scenarios section.

BodyTemplate1

When to Use

BodyTemplate1, along with BodyTemplate2, is used for Q&A, Wikipedia queries, and third-party Skill requests. Sample utterances that would invoke BodyTemplate1 include:

  1. “What is 5 miles in kilometers?”
  2. “What is the definition of “paradox”?”
  3. “Who is Aristotle?”
  4. “How deep is the ocean?”
Display Cards for Tablet: BodyTemplate1
Click to expand

Style

Display Cards for Tablet: BodyTemplate1 Style
Click to expand

Layout

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

Display Cards for Tablet: BodyTemplate1 Layout
Click to expand

Notes

  1. mainTitle and subTitle should never exceed one line. If the text exceeds the width of the container, the text crops and ellipses are used.

  2. The body content (textField) can extend off the bottom of the screen, which the user can access by scrolling.

Data

Display Cards for Tablet: BodyTemplate1 Data
Click to expand

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..."
    }
  }
}

URLs

Barge-in button: https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/medium/avs-logo.png

“X” button: https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/medium/footer-close.png

BodyTemplate2

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

  1. “Who is Usain Bolt?”
  2. “Who wrote To Kill a Mockingbird?”
  3. “Where is New Mexico?”
  4. “When was Angela Merkel born?”
Display Cards for Tablet: BodyTemplate2
Click to expand

Style

Display Cards for Tablet: BodyTemplate2 Style
Click to expand

Layout

Display Cards for Tablet: BodyTemplate2 Layout
Click to expand

Notes

  1. mainTitle and subTitle are only one line max. If the text exceeds the width of the container, the text should crop and use ellipses should be used.

  2. The image height and width are max dimensions. Images should resize to avoid exceeding either dimension.

Data

Display Cards for Tablet: BodyTemplate2 Data
Click to expand

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
            }
          ]
      }
    }
  }
}

URLs

ListTemplate1

When to Use

ListTemplate1 is used to display items in a list, such as a calendar or shopping list. Sample utterances that would invokeListTemplate1 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.”
Display Cards for Tablet: ListTemplate1
Click to expand

Style

Display Cards for Tablet: ListTemplate1 Style
Click to expand

Layout

Display Cards for Tablet: ListTemplate1 Layout
Click to expand

Notes

  1. mainTitle and subtitles crop and use ellipses to avoid spilling over the max.

  2. The distance between leftTextField and rightTextField is static. For example, if leftTextField displays more characters than shown here, rightTextField should push right.

Variation: Calendar

Display Cards for Tablet: ListTemplate1 Calendar
Click to expand

Note: Distance based off the longest leftTextField length.

Data

Display Cards for Tablet: ListTemplate1 Calendar
Click to expand

JSON


{
  "directive": {
    "header": {
      "namespace": "TemplateRuntime",
      "name": "Render"
    },
    "payload": {
      "token": "{{STRING}}",
      "type": "ListTemplate1",
      "title": {
        "mainTitle": "Title",
        "subTitle": "Subtitle"
      },
      "skillIcon": {
        "contentDescription": "Source for the skill icon.",
        "sources": [
          {
            "url": "https://example.com/smallSkillIcon.jpg",
            "size": "small"
          }
        ]
      },
      "listItems": [
        {
          "leftTextField": "1.",
          "rightTextField": "Alfa"
        },
        {
          "leftTextField": "2.",
          "rightTextField": "Bravo"
        },
        {
          ...
        }
      ]
    }
  }
}

URLs

WeatherTemplate

When to Use

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]?”
Display Cards for Tablet: WeatherTemplate
Click to expand

Style

Display Cards for Tablet: WeatherTemplate Style
Click to expand

Layout

Display Cards for Tablet: WeatherTemplate Layout
Click to expand

Data

Display Cards for Tablet: WeatherTemplate Data
Click to expand

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°"
        },
        {
          ...
        }
      ]
    }
  }
}

URLs

Night Mode

If desired, you can adapt the templates for nighttime use by implementing a night mode. Night mode provides a more pleasant experience in low-lighting. To implement night mode, make the following three changes to display during nighttime hours.

  1. Change all backgrounds from white (#ffffff) to black (#000000).
  2. Change all black text (#151320) to white (#ffffff). Grey text remains the same.
  3. For image URLs on the WeatherTemplate, use “darkBackgroundUrl” instead of “url”.

Here are examples of the result.

Display Card Night Mode: BodyTemplate1
Click to expand
Display Card Night Mode: WeatherTemplate
Click to expand

NowPlaying Cards

When to Use

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]”
Display Cards for Tablet: NowPlaying
Click to expand

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.

Display Cards for Tablet: NowPlaying Global Elements
Click to expand

The global elements in the NowPlaying Display 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. Barge-in button (Alexa logo) This button can be tapped at anytime to activate and talk to Alexa.

  5. “X” button Tapping the “X” should hide the GUI and stop playback.

  6. Media artwork (rectangle) This could be album art, a radio station logo, a program logo, or book artwork.

  7. 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 user views the following screen states when interacting with Alexa.

Display Cards for Tablet: NowPlaying Interactions
Click to expand

Step 1: Invocation

The customer activates Alexa with the wake word “Alexa” or with a control on the device (depending on the device). 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 GUI.

If Alexa doesn’t hear anything from the customer within 5 seconds, clear the voice chrome.

Step 3: Response and dismissal

In response to media requests, Alexa displays a NowPlaying GUI, with media metadata and playback controls.

If the user:

  1. dismisses the GUI by tapping the “X” or navigating away from the Card with device controls, then both the Card dismisses and audio stops. Note: If your device supports playback controls elsewhere on your device (see Additional Playback Controls), then the “X” should only dismiss the GUI and allow music to playback to continue.
  2. pauses or stops the music via voice or the button, then the audio stops and the Card remains. The Card should then auto-dismiss after one minute of inactivity.
  3. activates Alexa again while the music is playing, the music attenuates, and voice chrome reappears, awaiting the next command.

Additional interactions scenarios are defined in the Interruptions Scenarios section.

Specs

Style

Display Cards for Tablet: NowPlaying Style
Click to expand

Layout

Display Cards for Tablet: NowPlaying Layout
Click to expand

Note: Art is constrained by the container shape and should never exceed these dimensions. In cases where art is not a square or is smaller than the container shape, it should be horizontally and vertically centered within the container shape.

Display Cards for Tablet: NowPlaying Layout
Click to expand

Notes

  1. If content extends past its max number of lines, the text truncates with ellipses.
  2. When mainTitle has two lines, titleSubtext1 and titleSubtext2 push down to accommodate. The controls and progress bar do not move.

Data

Display Cards for Tablet: NowPlaying Data
Click to expand

URLs

The following URLs for media player controls and the Alexa logo. Controls might have a default, disabled, and/or focus states.

Next

Pause

Play

Previous

Alexa logo

Example 1: Amazon Music

“Alexa, play Smoke & Retribution”

Display Cards for Tablet: NowPlaying Amazon Music
Click to expand

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": "Smoke & Retribution",
        "titleSubtext1": "Flume",
        "titleSubtext2": "Skin",
        "mediaLengthInMilliseconds": 191000,   
        "art" : {
          "sources" : [
            {
              "size" : "medium",
              "url" : "http://example.com/AlbumArt.svg"
            }
          ]
        },     
        "provider": {
          "name": "Amazon Music",
          "logo" : {
            "sources" : [
              {
                "url" : "https://example.com/ProviderLogo.jpg"
              }
            ]
          },            
        },                
      },
      "controls": [
        {
          "type": "BUTTON",
          "name": "PREVIOUS",
          "enabled": true,
          "selected": false
        },
        {
          "type": "BUTTON",
          "name": "PLAY_PAUSE",
          "enabled": true,
          "selected": false
        },
        {
          "type": "BUTTON",
          "name": "NEXT",
          "enabled": true,
          "selected": false
        },
      ]
    }
  }
}

Example 2: iHeartRadio Live Radio

“Alexa, play Hollywood Breakdown on iHeartRadio”

Display Cards for Tablet: NowPlaying iHeartRadio Live Radio
Click to expand

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
        },
      ]
    }
  }
}

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.

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

Controls-Only Template

Display Cards for Tablet: NowPlaying Controls-Only Template
Click to expand

Style

Display Cards for Tablet: NowPlaying Controls-Only Style
Click to expand

Layout

Display Cards for Tablet: NowPlaying Controls-Only Layout
Click to expand

Data

Display Cards for Tablet: NowPlaying Controls-Only Data
Click to expand

Additional Playback Controls

Many tablets support playback controls on the user’s notifications panel or other universally accessible panel. If your device supports this native framework, then you should support the use of these controls for music playback from Alexa.

This playback controller should display the following metadata: art (album artwork), title, titleSubtext1, provider name, and any applicable playback controls. Tapping on the metadata should return the user to the nowPlaying GUI of the current song.

Transitions

Transitions should be quick (< 1 sec) and employ easing to create a smooth feel. First the background fades in followed by the content. 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 text fades out first and then the Card fades.

Alexa Display Cards for Tablet: Tablet Transition Example
Click to expand

Interruption Scenarios

Card to Card

Display Cards for Tablet: Interruption Scenarios: Card to Card
Click to expand

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

Display Cards for Tablet: Interruption Scenarios: NowPlaying to Card
Click to expand

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

Display Cards for Tablet: Interruption Scenarios: Card to NowPlaying
Click to expand

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

Display Cards for Tablet: Interruption Scenarios: NowPlaying to Error
Click to expand

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.