Amazon announced today the ability for all skill developers to create Alexa Widgets. Alexa Widgets display information related to your favorite Alexa content (like a recipe of the day, weather forecast, or shopping list) and let users take quick actions without leaving the home screen or asking for updates.
This blog supplements our technical documentation and can help you create a sample widget in 15 minutes or less. After it’s up and running and you’re comfortable with how all the pieces work together, you’ll have everything you need to build your own widget.
Import the Skill/Widget Sample
- Go to the Alexa Developer Console to create a new skill (if you don’t already have a developer account you will need to create one).
- As part of the skill creation workflow you’ll need to do the following:
- Enter a skill name (don’t worry about what you name it, you can change it later).
- Set the primary locale to “English (US)”.
- Choose "Other" as the experience type.
- Keep default settings for model and hosting service (Model: Custom, Host: Alexa-hosted (Node.js)).
- Choose an hosting region (doesn’t matter which).
- Once you reach the “Templates” step, click the “Import skill” button in the upper right corner.
- When asked for a public git repository, provide https://github.com/alexa-samples/skill-sample-plant-care-widget and click “Import”.
- The import process will take a minute or two to complete.
- Once the import is completed, select “Invocations” > “Skill Invocation Name” from the left-hand navigation and update the invocation name from “change me”.
- Click “Build Model” to save and rebuild your model. Once the rebuild completes, move on to the next section.
Update Alexa Client ID and Secret
- Select "Tools" > "Permissions" from the left-hand navigation, scroll down to the bottom of the page, and copy the "Alexa Client Id" and "Alexa Client Secret" to a temporary location.
- Go to the "Code" tab, and replace AlexaClientID and AlexaClientSecret with your own values on lines 11 and 12 in index.js.
3. Once all the variables have been updated, click “Deploy” to save and deploy the changes.
Enable Skill Testing
- Go to the “Test” tab, click the drop down, and select “Development” to enable testing for your skill.
View Your Widget
- Go back to the “Build” tab, click “Multimodal Responses” from the left-hand navigation. Then select “Widget” from the section in the middle of the screen. At this point you should see a list showing one “plant-care” widget.
- Click “Edit” to open the “plant-care” widget it in the authoring tool.
- Note: The “plant-care” widget uses widget responsive templates that are designed to be responsive across different viewports.
- Note: The “plant-care” widget uses widget responsive templates that are designed to be responsive across different viewports.
Push to Device
- Assuming you have an Echo Show 8, 10, or 15, select any of those devices from the drop down list at the bottom of the screen, switch from “Preview” to “Install”, and click “Send to Device” to install the widget on that device.
- Note: You will see a placeholder appear in the Favorite Widgets Panel on the device you sent your widget to and within a few seconds the “plant-care” widget should appear in that location.
- A customer can install the same widget as many times as they like, generating a different instanceId each time. For the purposes of this demo, install multiple instances of the widget using the Send to Device button. You can choose to do it on the same device or on different devices.
Test Data Store Push
- On one of the widget instances, press the "I watered my plant" button. If the button gets disabled on other widget instances and updates with the text "Plant already watered", everything is working as expected.
Congratulations! You Now Have a Functioning Widget.
As a next step, we encourage you to take a look at the backend code (visible from the “Code” section of the Developer Console). The sample you’ve just imported demonstrates how to handle the most common events in a widget’s lifecycle including:
- UsagesInstalled - The event sent when a widget is installed by a user.
- UsagesRemoved - The event sent when a widget is removed by a user.
- UpdateRequest - The event sent when Alexa updates your widget on a user's device.
All of these concepts (and more) are covered in our technical documentation so be sure to reference that as well. As always, thank you for your interest in Alexa. We are excited to see what you build!
How Nick Schwab grew his Alexa skill from a hobby to a business with 5 employees
Grow your business on Alexa
