Alexa, How to create skills that support display ?

Over the past few years there have been a tremendous increase in the number of Alexa skills published. Deploying an Alexa skill is not hard. All that is required is an AWS lambda function and an interaction model. It's easier if you use one of the built in templates provided . So instead of creating a basic skill, let's take a look at how to customize skills for devices with display.

 When Amazon echo was launched, these devices had no display interface. It could only handle speech. But skills had the option to use cards to display minimal details in the Alexa app. Later on  devices like Echo show and Echo Spot were introduced. These devices come with screens and so nowadays while creating skills it's really important to make sure customers that use devices with display and those who use headless devices have an optimized experience.

Supporting devices with display

If you decide to create an Alexa skill that supports devices with display, then the first thing to do is to edit your skill in the developer console and enable the display interface option in your interaction model. Once this is done the model will be updated with the required intents for display.

Now that's done, it's time to move on to the skill code. In the skill code, we need to check whether the target device supports display interface. This is necessary since using display features on headless devices will result in a crash. This information can be extracted from the Alexa request. All supported interfaces will be sent in the request. Parse the request and see if the target device supports display.

If Display is supported, then the next step is to add Display.RenderTemplate directive in the skill response. A skill reponse can have several directives.  Display.RenderTemplate directive is the one that provides all info required for displaying content. Alexa skill SDK provides various templates that can be used to change the look and feel of the display.

This is a sample Display.RenderTemplate directive

{
  "directives": [
    {
      "type": "Display.RenderTemplate",
      "template": {
        "type": "BodyTemplate1",
        "token": "string",
        "backButton": "VISIBLE",
        "backgroundImage": "Image",
        "title": "string",
        "textContent": {
          "primaryText": {
            "text": "string",
            "type": "string"
          },
          "secondaryText": {
            "text": "string",
            "type": "string"
          },
          "tertiaryText": {
            "text": "string",
            "type": "string"
          }
        }
      }
    }
  ]
}

The 2 main categories of display templates available are:
BodyTemplate
ListTemplate

BodyTemplates are usually used to display simple text and images, and list template can display a scrollable list of items. Each of these can have optional images and text.

In order to provide flexibility to the skill developer, there are 7 body templates available with different layouts. Pick the one that suits your skill, fill in the title, image url and add it to the Render directive. Add this directive in the skill response. There! That's all there's to be done to customize a skill for Echo Spot & Echo Show.

To see such a skill in action, try out Event Finder
This skill can search for live events like concerts or games.

To start the skill say, "Alexa, open event finder"
Once skill is started, search for events as follows
"Search for Taylor Swift"

http://bit.ly/alexaeventfinder