1. Home
  2. Docs
  3. Tutorials
  4. Create Skills for Echo Devices With a Screen

Create Skills for Echo Devices With a Screen

Echo devices with a screen, such as Echo Show and Echo Spot, allow developers to create skills for Alexa that use both screen and voice interaction. The screen displays and interactions are created with the use of templates. In this tutorial, we will extend the voice response wit ha graphical rich text response, that will be displayed when the user accesses the application from an Alexa device with a screen.

Create a conversational app

A Conversation.one application represents your conversational interface through Amazon Alexa, Google Home or Facebook Messenger bot. To create an app:

  1. If you don’t already have a Conversation.one account, sign up. If you have an account, log in.
  2. Click on Create New App in the navigation. If it’s your first application, you will be redirected to the Create New App wizard automatically.
  3. Select your industry and enter your company name. For the purpose of this tutorial, select “Other” for the industry. Click Next to continue.
  4. Enter “Test Display” as your company name. Click Next to continue.
  5. Select the devices you want to support with your app. For this demo select Amazon Alexa. Click Next to continue.
  6. Select the pre-made question “Opening Hours”.
  7. Click “Customize”

Test your new bot

To test your bot, enter in the simulator, the text:

“What are your opening hours”

The bot will respond using the default answer:

“We are open every weekday, between 9:00 AM and 5:00 PM”

Enable support for Amazon Alexa display

  1. Click “Settings”
  2. Select “Staging”
  3. Select “Alexa”
  4. Enable “Render Template”
  5. Click “Save”
  6. Click “Edit App”

Add graphical response

We will add a code response, that will check if the user has a graphical display, and will return a graphical response, that will be presented to users using an Echo device with a display.

  1. Click “OpeningHours”
  2. Add a new Response
  3. Select “Code”
  4. Enter the following code:
    if (!req.isDisplayEnabled()) {
        return;
    }
    res.addDirective({
        "type": "Display.RenderTemplate",
        "template": {
            "type": "BodyTemplate3",
            "title": "Opening Hours",
            "token": "SampleCard_92347",
            "textContent": {
                "primaryText": {
                    "type": "RichText",
                    "text": "We are open every weekday, between 9:00 AM and 5:00 PM"
                }
            },
            "backgroundImage": {
                "contentDescription": "Open",
                "sources": [{
                    "url": "https://s1.mob-server.com/files/6280/background.jpg"
                }]
            },
            "image": {
                "contentDescription": "Open",
                "sources": [{
                    "url": "https://s1.mob-server.com/files/6280/open.jpg"
                }]
            },
            "backButton": "VISIBLE"
        }
    });

    req.isDisplayEnabled returns true, if the user’s device has a display
    You can find a full reference to the different template options here.

  5. Click “Update”
  6. Click “Save”

Deploy to Amazon Alexa

Select “Deploy to Alexa” from the Amazon menu.

You will need an Amazon Alexa developer account. If you don’t have one, create a new one for free here.

If it’s the first time that you created an Alexa skill using the Conversation.one dashboard, you will have to approve the access.

Be patience, It might take a few minutes to build the new app.

Test your new Amazon Alexa skill

Using an Echo device with a screen

Ask your Echo device:

“Alexa, ask Test Display what are the opening hours”

Alexa will respond with the default answer, and will also present a graphical response.

The Amazon account on the Echo device must be your Amazon Alexa developer account

Using Amazon Alexa simulator

  1. Browse to the Amazon Alexa developer console https://developer.amazon.com/alexa/
  2. Open your skill
  3. Click “test”
  4. Enter “open test display”
  5. Amazon Alexa simulator will respond with the default welcome response.
  6. Enter “what are the opening hours”
  7. Amazon Alexa simulator will respond with the default answer, and will also present a graphical response.

 

 

Was this article helpful to you? Yes No

How can we help?