Gracias por tu visita. Esta página solo está disponible en inglés.

Display Cards

Display Cards are visual aids that complement the Alexa voice experience. There are several types of Display Cards available. These are provided through various templates described below.

Type Description Example Use Cases
BodyTemplate1 Text only with title, subtitle, text, and skill icons. Wikipedia entries without images, and simple cards provided by Alexa Skills.
BodyTemplate2 Text and a single image. Wikipedia entries with images.
ListTemplate1 Vertical scrolling list. Shopping lists, to-do lists, calendar entries and search results.
WeatherTemplate Weather text and images. Daily and weekly forecast.
NowPlaying (RenderPlayerInfo) Media metadata, player controls and album art. Music, news, podcasts, audiobooks..


Some Display Cards are purely informative. They supplement Alexa's verbal response, reinforcing that she understood your request, and provide additional details such as images, text and source attribution.

My alternative image text
BodyTemplate1 example
My alternative image text
BodyTemplate2 example

Other Display Cards are actionable and provide a secondary way for the customer to interact with Alexa. For example, when asking Alexa about nearby points of interest (POIs), Alexa will provide a list of destinations. The list items can be tapped and the destination should be sent to the navigation system.

My alternative image text
ListTemplate1 example

(Required) For vehicles with displays, show Alexa Display Cards including all available templates, content, attributions, and controls.

In order to provide customers with the best possible experience, it's important to support all of the available Display Cards and content from Alexa. For vehicles with displays, the following requirements and recommendations apply.

(Required) Show Display Cards when Alexa begins speaking.

Alexa's responses should not be delayed. Display Cards should be shown when Alexa begins speaking, however do not wait for elements including title, icons, text or images to download before initiating the verbal response.

(Required) Ensure content of cards match Alexa's verbal response.

Display Cards compliment what Alexa says. It's essential to keep cards in sync with verbal responses from Alexa.

(Required) Allow voice chrome to appear over Display Cards without obscuring the card below.

If you dim the display when showing Alexa voice chrome, ensure that the card's content is still legible. This is to support follow-up conversation with Alexa about the currently displayed card.

My alternative image text
Alexa voice chrome

(Required) Provide a way for the customer to dismiss Display Cards.

Display cards can be dismissed in the following ways.

  1. Back button: When the customer taps the back button the card should be dismissed.
  2. Automatic timeout (non-actionable): For Display Cards that do not have actionable content, automatically dismiss the card after 8 seconds of inactivity.
  3. Automatic timeout (actionable content): If the Display Card is actionable such as a POI or contact list, dismiss the card after 30 seconds of inactivity. As an exception, Media (NowPlaying) cards should not be automatically dismissed unless the media is no longer available. (Recommended) Use smooth transitions when displaying and dismissing cards.

For example, smooth fades or sliding transitions when showing and hiding cards.

Styling

Alexa is intended to be integrated into your vehicle's IVI in a seamless way. Display Cards should be styled according to your own HMI's design language. The look and feel (fonts, colors, etc.) of Display Cards should match that of your IVI.

Global elements

Display Cards (except NowPlaying) require the following global elements.

  1. Title: All cards have a mainTitle and most will have a subTitle.
  2. Alexa Skills Icon: When a third-party provides the information being displayed on the card, show the associated skills icon.
  3. Back button: In addition to the above, provide a way for the customer to dismiss the card. For example use a back arrow, close or “X” button. End Alexa's verbal response the moment a card is dismissed.
  4. Alexa logo: Always show the Alexa logo on Display Cards.
My alternative image text

BodyTemplate1

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

  1. "What is the Karman line?"
  2. “What is the definition of “paradox”?”
My alternative image text

BodyTemplate2

BodyTemplate2 is similar to BodyTemplate1 but also returns an image. Sample utterances that would invoke BodyTemplate2 include:

  1. “How deep is the ocean?”
  2. “How fast is Usain Bolt?”
  3. “What is 5 miles in kilometers?”
My alternative image text

Note: In some cases, not all of the body content (textField) will fit on screen. Use an ellipsis or fade-out to indicate more content is available. As an alternative, when the vehicle is in park, provide the option to scroll to full text.

My alternative image text
Example: scrollable text (only display when vehicle is in park)

You may choose to restrict the number of lines of text shown and whether images are displayed while driving. However attribution to Alexa and skills must be displayed. When the vehicle is in park, we recommend supporting display of the full text and images sent by Alexa.

See UI text guidelines for more information on handling truncation of text.

ListTemplate1

ListTemplate1 is used to display items in a list, such as a calendar or shopping list. Sample utterances that 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. “Show me nearby coffee shops.”
My alternative image text
ListTemplate1 - To-do list “Alexa, what's on my To-do list?”
My alternative image text
ListTemplate1 - Shopping list “Alexa, what's on my shopping list?”
My alternative image text
ListTemplate1 - Calendar “Alexa, what's on my agenda?”
My alternative image text
ListTemplate1 - POI list “Alexa, what's the closest coffee shop?”

WeatherTemplate

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

  1. “What’s the weather?”
  2. “Will it rain today?”
  3. “How's the weather in San Francisco?”
My alternative image text
My alternative image text

NowPlaying

My alternative image text

See Media services for details on media player implementations.