Echo Show and Echo Spot give you the ability to add graphical elements to Alexa skills, creating an immersive voice experience. You can add images, text, and list navigation to enhance the customer experience across Echo devices with screens.

Graphical elements render on Echo Show and Echo Spot in the form of list and body templates. The list template displays content as horizontal or vertical lists with predefined formats. The body template, on the other hand, displays content that can include text and images with predefined formats. There are five types of body templates and two types of list templates. You can find a detailed explanation of each template here.

To help you start building skills for Echo devices with screens, we developed a new sample fact skill called Airplane Facts. In this post, we will walk you through the sample skill and provide a deep dive on building voice-first skills for Echo Show and Echo Spot using the new Alexa Skills Kit (ASK) Software Development Kit (SDK) for Java. You can learn more about the new features of the SDK here.

Quick Note on Cards and Body Templates

You can include cards in your skill’s response to enhance the voice experience by displaying content on the home screen of the Alexa app. A simple card (that displays plain text) renders as Body Template 1 on Echo Show. A standard card (that displays plain text and image) renders as Body Template 2 on Echo Show. If you do not explicitly implement a body template in your skill code, but instead return a simple card in your skill’s response, the card will render on Echo Show in the format of Body Template 1.

Adding a Template to Your Response

Using the new SDK, the overridden handle method of a class that implements the RequestHandler returns the Response object. This Response object is built using the ResponseBuilder of the HandlerInput as shown in the code snippet below:

public Optional<Response> handle(HandlerInput input) {
    String speechText = "Sample output speech text";
    return input.getResponseBuilder()
            .withSpeech(speechText)
            .build();
}

However, to include a body template to be rendered on Echo Show and Echo Spot, the response also needs to have the template set in the response, which you can set by adding the template to addRenderTemplateDirective of the ResponseBuilder as shown in the code snippet below. We have used Body Template 3 in the example:

@Override
public Optional<Response> handle(HandlerInput input) {
    
    String title = "Title";
    String primaryText = "Primary Text";
    String secondaryText = "Secondary Text";
    String speechText = "Sample Output Speech Text";
    String imageUrl = "imageUrl";

    Image = getImage(imageUrl);

    Template = getBodyTemplate3(title, primaryText, secondaryText, image);

    return input.getResponseBuilder()
            .withSpeech(speechText)
            .withSimpleCard(title, speechText)
            .addRenderTemplateDirective(template)
            .withReprompt(speechText)
            .build();
}

Building the Image Object

As seen in the code snippet above, the template object is passed to the addRenderTemplateDirective method of the ResponseBuilder. To build the Template object, we need to pass it an Image object. The code snippet below shows how to build the Image object, which is used to build the template object.

private Image getImage(String imageUrl) {
    List<ImageInstance> instances = getImageInstance(imageUrl);
    return Image.builder()
            .withSources(instances)
            .build();
}

private List<ImageInstance> getImageInstance(String imageUrl) {
    List<ImageInstance> instances = new ArrayList<>();
    ImageInstance instance = ImageInstance.builder()
            .withUrl(imageUrl)
            .build();
    instances.add(instance);
    return instances;
}

Building the TextContent Object

The template also requires the TextContent that will be displayed. The text can be plain text or rich text. The code snippet below shows how to build the TextContent object.

private TextContent getTextContent(String primaryText, String secondaryText) {
    return TextContent.builder()
            .withPrimaryText(makeRichText(primaryText))
            .withSecondaryText(makeRichText(secondaryText))
            .build();
}

private RichText makeRichText(String text) {
    return RichText.builder()
            .withText(text)
            .build();
}

Building a Body Template

Now that we have the Image and the TextContent, we can use that to build the template object:

private Template getBodyTemplate3(String title, String primaryText, String secondaryText, Image image) {
    return BodyTemplate3.builder()
            .withImage(image)
            .withTitle(title)
            .withTextContent(getTextContent(primaryText, secondaryText))
            .build();
}

Building a List Template

We can build the ListTemplate object in a manner similar to building of the Body Template object. The code snippet below shows how to build the List Template 1.

private Template getListTemplate1(String title, Image backgroundImage, List<ListItem> listItems) {
    return ListTemplate1.builder()
            .withTitle(title)
            .withBackgroundImage(backgroundImage)
            .withListItems(listItems)
            .build();
}

The ListTemplate requires a list of ListItem objects, which can be built as shown below. Note: the background image in the list template is what is rendered in the background. However, each ListItem can also have an image. You can see how a ListTemplate gets rendered on Echo Show and Echo Spot here.

private ListItem makeListItem(Image image, TextContent textContent) {
    return ListItem.builder()
            .withImage(image)
            .withTextContent(textContent)
            .build();
}

Configuring the Skill

Because this skill supports display interface, you will have to enable the display interface in the Alexa Developer Console.

You can customize the images that you want to display along with the airplane facts. You will need to update these in the getImageMap() method of the FactsUtil class.

Testing the Body Templates

Once the image URLs are set, you can test the skill using the Alexa simulator in the developer console.

This will show you the approximation of how the skill displays the body templates on Echo Show and Echo Spot when a customer invokes your skill. This will render the Body Template 6 with the background image that you selected.

Body Template 6 Rendering on Echo Show

 

Body Template 6 Rendering on Echo Spot

Similarly, you can use the Alexa simulator and “ask Airplane Facts for an airplane fact,” which will result in the Body Template 3 being rendered with the images that you added along with the facts, which are set in the FactsUtil class.

Body Template 3 Rendering on Echo Show

Body Template 3 Rendering on Echo Spot

Learn More and Get Started

You can find these code samples and more in the airplane facts sample skill in the Alexa skill-building cookbook. Check out the render template documentation for more ways to create engaging Alexa skills for Echo Show and Echo Spot.

Here are some additional resources to learn more as you build:

• 7 Tips for Creating Great Multimodal Experiences for Echo Show
• Designing Skills for Echo Show: Choosing the Right Display Template
• Designing Skills for Echo Show: Choosing the Right List Template
• Build Skills for Echo Show and Echo Spot
• Display Interface and Template Reference  

Build a New Skill, Earn Developer Perks

Bring your big idea to life with Alexa and earn perks through our tiered rewards system. US developers, publish a skill in June and earn an AWS IoT button. Add in-skill purchasing to any skill in June can earn an Alexa-enabled device for the car. If you're not in the US, check out our promotions in Canada, the UK, Germany, Japan, France, Australia, and India. Learn more about our promotion and start building today.