Adding a Card to an Alexa Skill

30 minutes
  • 5 Learning Objectives

About this Hands-on Lab

In this lab, we will create a card for the launch request only. The objectives for this lab include creating a card for an Alexa device with a screen and testing the card using the AWS Alexa Developer Console. **Note:** You must have your own Amazon Developer account, which you can [sign up]( for if you do not already have one.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Configure Amazon Skills Kit to Use Your AWS Developer Account
  1. Initialize the ASK CLI:

    ask init --no-browser
  2. Copy/paste the URL that appears from the terminal to a browser window.

  3. Log in to the developer console when prompted.

  4. Copy/paste the authorization code.

  5. Enter y for Yes to connect to the AWS account already set up on the VM.

  6. Choose the default AWS account.

Clone and Check Out Branch
  1. Clone the template skill:

    ask new --url
  2. Navigate into the directory:

    cd content-aws-skill-builder
  3. To start with a template and perform the tasks for this lab yourself:

    git checkout lab_cards
  4. To start with the solution to the lab:

    git checkout lab_cards_solution
Develop the Skill
  1. In ../lambda/custom/index.js, add withSimpleCard to LaunchRequestHandler:

      const LaunchRequestHandler = {
          canHandle(handlerInput) {
              return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
          handle(handlerInput) {
              const speakOutput = "Exclusive Veterinary Services welcomes you. You can say I want to register my pet.";
              return handlerInput.responseBuilder
                  .withSimpleCard('Exclusive Vet Services', 'We are here for your fur-baby.')
Deploy and Test
  1. Deploy the skill:

    ask deploy 
  2. Go to your Amazon Alexa Developer Console.

  3. Click on the exclusive-vet-services skill to open it.

  4. Near the top, click on the Test tab.

  5. Use the microphone option to say "open exclusive vet".

  6. Check the screen simulation at the bottom of screen for accuracy.

Please note that sometimes the last bit of the screen is cut off in the display. If you retest it, it should show up fine. Seems to be a bug in the developer console, but Amazon says cards should be tested with the phone app.

Clean Up Amazon Developer Account Alexa Console

At this point, the skill you just created should be deleted from your Alexa Developer Console.

Please do so at this link: Alexa Developer Console.

Additional Resources

Exclusive Veterinary Services staff have heard there are Alexa devices with screens.

They have asked that you demo an example of an Alexa device with a screen with the message, "We are here for your fur-baby."

You are going to add this to the LaunchRequest using a simple card.

If you have not created an Amazon Developer account yet, please do so before proceeding: Amazon Developer account creation.

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?