visual-output.md

Visual Output

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

• Cards
• Alexa Specific Visual Output
• Google Assistant Specific Visual Output

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:

• Amazon Alexa: Including a Card in Your Skill's Response, and Best Practices for Skill Card Design
• Google Assistant: Surface Capabilities, and Basic Card

SimpleCard

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

let title = 'Card Title';
let content = 'Card Content';

this.showSimpleCard(title, content)
    .tell('Hello World!');

Result in Alexa app:

Result in the Actions on Google simulator:

Image Card

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

let title = 'Card Title';
let content = 'Card Content';
let imageUrl = 'https://s3.amazonaws.com/jovocards/SampleImageCardSmall.png';

this.showImageCard(title, content, imageUrl)
    .tell('Hello World!');

Result in Alexa app:

Result in the Actions on Google simulator:

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

this.showImageCard('Card Title', ' Card Content', {
        smallImageUrl: 'https://via.placeholder.com/720x480',
        largeImageUrl: 'https://via.placeholder.com/1200x800',
    })
    .tell('Hello World!');

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:

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>DDDE88511DSGS6S86</RequestId>
  <HostId>
    g0asd6dEdsd6X8sdSSD234P9sSsw60SDSDeSdwsdE+sV4b=
  </HostId>
</Error>

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: Platforms > Amazon Alexa.

Google Assistant Specific Visual Output

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