Visual Output
In this section, you will learn about the different ways to add visual output to your voice application.
Quick-Replies
It is possible to set quick-replies for every platform that supports them by using showQuickReplies.
Additionally, it is also possible to pass a QuickReply-object:
This is useful for platforms that support quick-replies with label that is different from the payload.
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.
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:
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):
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.
Platform Specific Visual Output
Each platform might support other kinds of visual output besides the ones listed above. You can find the detailed list in each platform's documentation here.