Alexa Visual Output
Learn more about how to build Alexa Skills with visual output using the Jovo Framework.
- Introduction to Alexa Visual Output
- Cards
- Display Templates
- Alexa Presentation Language
- Video App Interface
Introduction to Visual Ouput
Visual output is used to describe or enhance the voice interaction. This ranges from simple cards, Echo Show and Echo Spot Display Templates to displaying a video.
Cards
Cards are used for the most basic cases of visual output. They can be used to display plain text and images or to ask for certain permissions (Account Linking, to-do/shopping lists, etc.) in addition to the speech output.
Simple Card
The simple card can only contain plain text, which is split up into a title and content.
Standard Card
The standard card allows you to add an image in addition to the plain text, which has to be provided in two different sizes.
Display Templates
Display Templates can be used to include content on the screen of the Echo Show or Spot. There is a variety of templates, each having a different composition and features. You can find the official Amazon reference here.
To be able to use display templates for devices like Echo Show, add the following configurations to your project.js
:
Then, use the Jovo CLI to deploy to the Amazon Developer Portal:
Alternatively, you can enable it in the Interfaces tab in the Amazon Developer Console:
You can check whether the current device supports the Display interface using the following helper method:
Body Templates
Body templates are only capable of displaying images and text. There are multiple body templates, each having a different composition.
List Templates
The list template is used to display a set of scrollable and selectable items (text and images).
Alexa Presentation Language
Tutorial: Using the Alexa Presentation Language (APL) with Jovo
With Jovo, you can also use the Alexa Presentation Language (APL). To add APL directives, use the following method:
You can either directly add documents and data sources, or require them from JSON files:
To enable APL, add the following configurations to your project.js
:
Then, use the Jovo CLI to deploy to the Amazon Developer Portal:
You can check whether the current device supports the APL interface using the following helper method:
Video App Interface
To launch videos on an Echo Show you can use the VideoApp
interface:
You can also optionally add a preamble message that Alexa will read before the video plays:
Find the official Amazon reference here.
To enable the video app interface, add the following configurations to your project.js
:
Then, use the Jovo CLI to deploy to the Amazon Developer Portal: