Visual Output

In this section, you will learn about the different ways to add visual output to your voice application.

Cards

With both Amazon Alexa and Google Assistant, developers have the ability to display visual information in the respective companion app. These visual elements are sometimes called cards, or home cards.

You can find detailed documentation provided by the platforms here:

SimpleCard

A SimpleCard contains a title and body content. You can use the method showSimpleCard to display it.

Result in Alexa app:

Alexa SimpleCard

Result in the Actions on Google simulator:

Google Action SimpleCard

Image Card

An ImageCard (StandardCard in Alexa terms) contains an additional image for more visual information. It can be added with the method showImageCard:

Result in Alexa app:

Alexa ImageCard

Result in the Actions on Google simulator:

Google Action ImageCard

You can also pass an object as imageUrl to provide a smallImageUrland largeImageUrl (for Alexa Skills):

Image dimensions:

  • Amazon Alexa: Small images (720px x 480px) and large images (1200px x 800px)
  • Google Assistant: Height is fixed to 192dp (see here)

Important: Image files must be accessible by the public and support CORS (cross-origin resource sharing). For example, if you're hosting the file with the wrong permissions on AWS S3, and try to access it, the response could look like this:

You can find a troubleshooting guide by Amazon here.

Alexa Specific Visual Output

You can find out more about Alexa specific cards and render templates for Amazon Echo Show here: Platform Specifics > Amazon Alexa.

Google Assistant Specific Visual Output

You can find out more about Google Assistant specific cards and suggestion chips here: Platform Specifics > Google Assistant.

Comments and Questions

Any specific questions? Just drop them below. Alternatively, you can also fill out this feedback form. Thank you!

Join Our Newsletter

Be the first to get our free tutorials, courses, and other resources for voice app developers.