1/24/17 AlexaDev Tuesday: Amazon’s Tips for Using Cards with Your Alexa Skill

Alexa skill display cards have gotten a real shot in the arm thanks to Amazon’s recent release of enhanced cards. They’re more attractive and more versatile than ever before, with the option to use custom images or use the card to facilitate account linking.

 

Rated My App 1 Star

 

Here, from Amazon Alexa Evangelist Dave Isbitski, are Amazon’s tips for using cards with your Alexa skill:


The Alexa Skills Kit provides the ability to display visual information, both text and images, via skill cards. These cards are a useful way to provide your users with additional information from your Alexa skill that may be too verbose or too difficult to include in the voice user interface. Skill cards can be displayed in many form factors across different types of devices. This includes the Alexa app via iOS and Android devices, the Alexa app via a web browser, on Fire Tablet, and on the big screen while interacting with skills on Fire TV.

 

Creating a Skill Card

There are currently three types of skill cards you can create: Standard, Simple and LinkAccount.

Standard – these cards card display both text and an image. You provide the card title, content, and an image (via a URL).

Simple – use this type to display only text. You provide the text for the card title and content.

LinkAccount – these cards are used during Account Linking to third-party accounts. LinkAccount cards are the same as Simple cards with additional link to your authorization URL.

When you create a skill card, you will provide textual information (in both plain text and SSML) along with an optional image. Here is an example of a Standard card that I have added to my own skill hosting in AWS Lambda using the well-known alexa-skills-kit-color-expert blueprint. When my skill’s LaunchRequest returns its JSON response, you can see both the SSML as well as a new image inside of the Alexa App, in this case running on my iPhone.

You can see I have provided the following information in the card:

Title: “Color Picker with Images – Welcome”

Skill name: “standard cards demo”

Image: small image of Echo devices hosted via an Amazon S3 instance

Content: displaying some SSML-embedded text

 

 

Creating a similar card in your own Alexa skill is a simple process and involves updating your existing skill card JSON response and adding the proper permissions to your hosted image. For more information on the building a JSON skill card response check out this post.

 

Tips for Displaying Skill Card Text

1. You may have noticed something in the skill card above however, that doesn’t look quite right. While having SSML tags is important to enabling a more human like conversation with Alexa it will appear as a bunch of gibberish to your users. By default, SSML is not stripped out of the skill card display which is why you are seeing both the and tags rendered. This is a common skill card error we have seen during Alexa skill certification and one that can easily be fixed using a regex expression or string replace.

2. You can also use either “\r\n” or “\n” within the text of the card to insert line breaks. Use line breaks to help format individual lines of addresses, product details or information. However, we don’t recommend adding double line breaks when separating parts of a street address to make this content more easily legible.

3. Keep your text responses short, informative and clear: Structure text for cards in brief, informative sentences or lines of text. Avoid unstructured product details.

4. Also, don’t rely on large blocks of text but instead keep details to a minimum so your users can evaluate the card at a quick glance.

5. Since URLs in cards are not clickable links, don’t just include URLs on cards to direct users to other sites. Instead, provide instructions to direct the user vocally. For example, have Alexa say, “Go to the Settings section of (the website name).”

 


Click here to read the full post on the Amazon Developer Blog. The full post goes on to address skill card Do’s and Don’ts, Tips for Displaying Skill Card Images, When to Use Skill Cards, and includes links to related Alexa skill card resources.

 

* * *

The Symphonized NXT Premium Genuine One Piece Solid Hand Carved Walnut Wood Bluetooth Portable Speaker (UK visitors – click here) makes a very stylish and affordable partner for an Echo Dot or any other Bluetooth streaming device. Currently priced at $39.99 and rated 4.5/5 stars.

Advertisements make it possible for Love My Echo to bring you great content for free, so thanks for your support.

* * *

 

Tags: , , ,

Top