Image for post
Image for post

Updating You Skill for Echo Show

From voice to visuals and back again

Tom Hudson
Jul 11, 2017 · 6 min read

Amazon has come out with the new Echo Show, an expansion to their smart speaker that gives you the ability to add a visual, interactive interface to your conversations with Alexa.

Given my recent recognition from Amazon as an Alexa Champion, I had the opportunity for a first look at the Echo Show and a chance to update my Alexa skills to support this new visual interface. I started with the ATX Dillo Skill, a skill that helps you find happy hours and events around Austin. This article describes that process and seeks to provide a starting point for updating your own skill to be supported on the Echo Show.

Image for post
Image for post

Meet Dillo

Specific to happy hours, Alexa sometimes has some issues saying (very important) words such as “micheladas”, “sake”, and (very surprisingly) “beer”, but for the most part it gets the information across in an understandable manner. For instance, this:

I sure would like some drinks, here in Austin, Texas. Maybe a few micheladas, or perhaps an unfiltered sake? Or how about a nice cold beer. Not a bear in the woods, a beer to drink.

Reads like this:

Taking Dillo to the Show

Editing global fields

Image for post
Image for post

Build your template data for display

Image for post
Image for post

In order to support this template, I have to build those properties into my JSON response. A typical response that supports the regular audio-only version of the Echo looks like this:

{
"version": "1.0",
"response": {
"outputSpeech": {
"type": "PlainText",
"text": "Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts"
},
"card": {
"content": "Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts",
"title": "Mohawk Austin",
"type": "Simple"
},
"speechletResponse": {
"outputSpeech": {
"text": "Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts"
},
"card": {
"title": "Mohawk Austin",
"content": "Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts"
},
"shouldEndSession": false
}
},
"sessionAttributes": {}
}

Including BodyTemplate1 for the Echo Show looks like this:

{
"version": "1.0",
"response": {
"outputSpeech": {
"type": "PlainText",
"text": "Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts"
},
"card": {
"content": "<font size='4'><b>Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts</b></font>",
"title": "Mohawk Austin",
"type": "Simple"
},
"speechletResponse": {
"outputSpeech": {
"text": "Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts"
},
"card": {
"title": "Mohawk Austin",
"content": "<font size='4'><b>Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts</b></font>"
},
"directives": [
{
"template": {
"backButtonBehavior": "VISIBLE",
"backgroundImage": {
"contentDescription": "The Image",
"sources": [
{
"url": "https://example.com/barimage.png",
"size": "x-small",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"title": "Mohawk Austin",
"textContent": {
"primaryText": {
"text": "<font size='4'><b>Happy Hour 5-8 PM: Over 60 Beers, 60 Spirits and 16 Drafts</b></font>"
}
}
}
}
],
"shouldEndSession": false
}
},
"sessionAttributes": {}
}

Notice the added “Directives” list. This is where we define a directive of type “Display.RenderTemplate” and a “BodyTemplate1” template. From there you include those properties that are supported in the response JSON for BodyTemplate1.

Also, notice that there are tags such as “font” and “b” for styling the text. Amazon supports a limited set of markup for styling text in your template.

The backend code for the ATX Dillo skill is hosted on Lambda using Node.js. Most likely, regardless of the language you wrote your skill in, it should be fairly easy to update in order to add the objects to your current JSON response. Note: If you used the Alexa Skills Kit SDK for Node.js, it is currently (as of this article) not supported. This is a known issue, and is on the roadmap to be updated soon. For the code below, when creating the Directives part of the response object, I clearly wrote out all the nested objects so you could work from the bottom up and understand how that was built.

Image for post
Image for post

You may notice in the definition for BodyTemplate1, items like backgroundImage and textContent properties have values Image and TextContent, respectively. In order to see what those objects look like, you can scroll down the page to Display Template Elements and view their definitions.

The ATX Dillo Skill has been updated and submitted for certification. Once Amazon has approved it, you can see it work on your Echo Show!

Image for post
Image for post

And show’s over!

Good luck, and let me know in the comments if you run into any issues or have any tips of your own!

Image for post
Image for post

thirteen23 is a digital product studio in Austin, Texas. We are an award winning team specializing in human-centered design. Together with our clients, we conceive, design, and develop intelligent software.Ready to build the next big thing? Let’s talk.

Find us on Facebook, Twitter, and Instagram or get in touch at thirteen23.com.

Image for post
Image for post

The Garage

Thoughts and experiments from the team at thirteen23, a…

Thanks to Lani DeGuire

Tom Hudson

Written by

Tech Director at @thirteen23. I write about new and emerging platforms and other tech-related stuff.

The Garage

Thoughts and experiments from the team at thirteen23, a digital product studio in Austin, Texas.

Tom Hudson

Written by

Tech Director at @thirteen23. I write about new and emerging platforms and other tech-related stuff.

The Garage

Thoughts and experiments from the team at thirteen23, a digital product studio in Austin, Texas.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store