Tutorial: Use the Developer Console to Create a Skill for a Website

This tutorial walks you through how to create a fictional "City Guide" skill for a website by using the Alexa Skills Kit developer console. No code is required.

Steps to create a skill for a website

To create a skill for a website, take the following steps:

  1. Create a skill and provide deep links to a website.
  2. Select a website category.
  3. Add an intent and slots.
  4. Add example phrases.
  5. Review and build the skill.
  6. Test the skill.

Step 1: Create a skill and provide deep links to a website

In this step, you create a skill based on the App/Website model. Then, you enter the deep links that you want Alexa to send the user to when the user opens the skill.

To create a skill and provide deep links to your website

  1. Log in to the Alexa Skills Kit developer console.
  2. Click Create Skill.
  3. For Skill name, enter City Guide.
  4. For this tutorial, leave the Primary locale at its default value.
    For a real skill, you might choose a different primary locale or add additional locales later, to expand your user reach. A locale is a combination of a language and a location. For example, en-IN is a locale that represents the English language spoken in India.
  5. For Choose a model to add to your skill, select App/Website.
    App/Websites skill selection.
  6. At the top right, click Create skill.
  7. On the Step1: Add app & invocation name page, select Add your websites.
  8. For Website domain, enter www.example.com.
  9. For Skill invocation name, enter city guide (all lower case).
    Website domain and skill invocation name.
  10. For What should Alexa do when a user says Alexa, open <skill invocation name>?, select Open your app or website.
    Website domain and skill invocation name.
  11. Under ANDROID DEEP LINKS, specify where you want Alexa to take users with an Android mobile device. Because you are currently configuring the skill to take users to a website (you selected Add your websites in step 6), the Android target is your website domain and the deep link type is restricted to WEBSITE_LINK.
    • Android target: Select www.example.com
    • Deep link type: Use WEBSITE_LINK
    • Deep link: Enter https://www.example.com/search, which takes the user to a search page within this fictional website.
      The deep link can be any page of your website.
  12. Under iOS DEEP LINKS, configure the settings the same as you did for Android in the previous step.
    Specifying deep links for Android and iOS.
  13. At the top right, click Save & Next.

Step 2: Select a website category

In this step, you select the category that best describes the website. In this example, the website is "City Guide," so you choose Maps and Navigation. Every category comes with customizable pre-built intents. Some categories, like Maps and Navigation, also include custom pre-built intents specific to that category. For this category, an example of a custom intent is "Alexa, ask City Guide to find a Whole Foods near me." If a category doesn't have an example utterance at the bottom of its tile, the category doesn't have a pre-built set of custom intents.

To select a website category

  1. Continuing from the previous step, on the Step 2: Select your app category page, select Maps and Navigation.
    Maps and Navigation category.
  2. At the top right, click Save & Next.

Step 3: Add an intent and slots

In this step, you specify an intent that the website can handle. An intent represents an action that fulfills a user's spoken request. For App/Website skills like this one, when the user makes the request that maps to an intent, Alexa takes the user to the specified deep link within the app or website. Intents can optionally have arguments called slots.

Skills can have multiple intents and each intent can have multiple deep links.

In this example, you select the pre-built NAVIGATION_SearchLocations intent. This intent captures the following user questions (and many more):

  • find {establishment}
  • find a location in {region}
  • find a location near {streetName}
  • search for {streetAddress}

As you can see from the previous user questions, this intent has four possible slots:

  • {establishment}
  • {region}
  • {streetName}
  • {streetAddress}

When you configure the skill in the next procedure, you add a URL parameter that you then link to a slot. All pre-built slots have a pre-built slot mapping. You can edit the slot mapping if required.

To add an intent and the required slots

  1. Continuing from the previous step, scroll down to Navigation pre-built intents, and then, next to NAVIGATION_SearchLocations, click Add Intent.
    At the top of the page, an intent appears in the Added Intents list. The intent requires configuration, which you do next.

    NAVIGATION_SearchLocations requiring configuration.

  2. Under Added Intents, next to NAVIGATION_SearchLocations, click Configure.
  3. Under the utterance chart at the top, click View more examples to see a complete list of utterances that this intent covers.
    NAVIGATION_SearchLocations utterances.
  4. Scroll down beneath the table, and add an Android deep link by using the following steps:
    1. Under What links should Alexa fire when a user interacts with this intent?, leave Single deep link template (default) selected.
    2. Select Add deep links for Android.
    3. For Android Link Target, select www.example.com.
    4. Click Add Android deeplinks.
      Add Android deeplinks.
    5. In the Add a deeplink dialog box, under Link type, select WEBSITE LINK.
    6. For Alexa link format, enter https://www.example.com/search{?establishment}, and then click Add link.

    Adding an Android deep link.

    The deep link is added to the deep link list.
    Deep link list.

    1. For the deep link you just added, next to the establishment parameter, click Link slot.
    2. For the establishment URL parameter, select slot {establishment}.
    3. Leave the other fields at their default values, so that the {establishment} slot type is a variable of type AMAZON.LocalBusiness.
      If you want to make sure that the slot type covers certain values, you can add your own slot type values. This action appends the values you provide to the built-in values defined by Amazon. For example, AMAZON.LocalBusiness provides names of businesses. If you want to include additional businesses – such as smaller businesses that might not be included – you can add them to the list. The slot then recognizes both the original set of values as well as the custom values you added.

      Deep link list.

    4. Click Save.
    5. (Optional) Repeat steps 4c through 4i to add Android deep links that map to the three additional slots:
      Link type Alexa link format URL parameter slot

      WEBSITE_LINK

      https://www.example.com/search{?streetName}

      {streetName}
      (The slot type populates to AMAZON.StreetName.)

      WEBSITE_LINK

      https://www.example.com/search{?establishment, streetName}

      {establishment} and {streetName}
      (The slot types populate to AMAZON.LocalBusiness and AMAZON.StreetName.)

      WEBSITE_LINK

      https://www.example.com/search

      None

      Finished Android deep link list.

    6. At the top, click Save.
  5. Add the corresponding iOS deep links by using the following steps:
    1. Still on the Intents/NAVIGATION_SearchLocations page, scroll down and select Add deep links for iOS.
    2. For iOS app, select www.example.com.
    3. Click Add iOS deeplinks.
    4. Add four deep links with the same settings you used for Android.
    5. After you configure the iOS deep links, scroll to the top of the Intents/NAVIGATION_SearchLocations page, and then click Save intent.
  6. After you return to the Intents page, click in to the NAVIGATION_SearchLocations configuration again, and make sure that you have eight deep links specified: four for Android, four for iOS.
  7. At the top of the Intents page, click Save & Next.
    For a real skill, you typically add many more intents. You map each intent to a deep link that you want to send the user to when they say that intent, and you specify the slot type for any slots that the intents contain.
  8. On the Slot Types page, ensure that there are four slots listed, and then click Save & Next.
    Slot types.

Step 4: Add example phrases

In this step, you add example phrases to let the user know what types of requests they can make of the skill.

To add example phrases

  1. On the Discover "What can I say" page, in the Example phrase 1 box, enter find a whole foods (all lower case).
    This gives the user an idea of the type of request the website can handle.
  2. Add a few more example phrases, like search for a whole foods on main street and find a whole foods on madison street.
    Example phrases.
  3. At the top of the page, click Save & Next.

Step 5: Review and build the skill

In this step, you review your skill configuration and then you build the skill.

To review and build the skill

  1. On the Review page, ensure that all of the steps have green check marks.
  2. To add or change any settings, click Edit, edit the setting, and then navigate back to the Review page.
  3. Click Build.
    The build takes a few minutes.

Step 6: Test the skill

To test the skill, you must first enable the skill for testing by using the Test tab in the developer console. Then, you can test the skill's deep-linking functionality in a few ways:

  • With the Alexa simulator in the developer console – The simulator operates as if it is an Echo device. Because the simulator is an Echo device, Alexa sends the deep link to your phone as a push notification. When you tap the notification, the link takes you to the website.
  • With the Alexa app on your phone – The Alexa app must be registered to the same account as the account with which you created the skill. When you open the skill, Alexa takes you to the deep link in a browser on your phone. Even though you're using the Alexa app on your phone, Alexa doesn't attempt to open the City Guide app because this tutorial sets up the skill to open a website, not an app. (See step 1.)
  • With an Echo device – The Echo device must be registered to the same account as the developer account with which you created the skill. When you open the skill, Alexa sends the deep link to your phone as a push notification. When you tap the notification, the link takes you to the website.

To enable testing for the skill

  1. After the build completes, in the developer console, at the top, click the Test tab.
  2. At the top left, next to Test is disabled for this skill, click the box, and then select Development.
    The option changes to Skill testing is enabled in with Development selected.

To test the skill with the Alexa simulator

  1. Ensure that you enabled testing for the skill, as previously described.
  2. Still in the Test tab, on the left, in the box that says, Type and click or hold the mic, type open city guide, and then press enter.
    Alexa says something like, "I'll send a link to open city guide. I should send that to <developer account name>, right?" When you say "Right," Alexa says, "Okay, sending to <developer account name>".
  3. Check your phone for the notification.
    If you enabled push notifications from Alexa, your phone should receive a message that deep links to the website called "Example Domain."

To test the skill with the Alexa app

  1. Ensure that you enabled testing for the skill, as previously described.
  2. Open the Alexa app, which is registered to the same account as the developer account with which you created the skill.
  3. Click the Alexa logo, and then say, "Open City Guide."
    Alexa takes you to "Example Domain" in a browser on your phone.

To test the skill with an Echo device

  1. Ensure that you enable testing for the skill, as instructed previously.
  2. On an Echo device that's registered to the same account as the developer account with which you created the skill, say, "Alexa, open City Guide."
    Alexa says something like, "I'll send you a link to open City Guide."
  3. Check your phone for the notification.
    If you enabled push notifications from Alexa, your phone should receive a message that deep links to the website called "Example Domain."