In this hands-on workshop, learn how to use Alexa to reach millions of new customers by developing for multiple screens. We walk step-by-step through the process of building an Alexa skill that takes advantage of a variety of screens, including Echo Show, tablets, and TVs. Learn best practices for combining voice interactions with displays using Alexa Presentation Language display templates. Bring your laptop. You will be coding.

2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Build an Interactive Alexa Voice
Experience for Multiple Screens
A L X 3 1 4
Cami Williams
Alexa Evangelist
Alexa Skills
Justin Jeffress
Sr. Solutions Architect
Alexa Skills
Jaime Radwan
Sr. UX Designer
Alexa Skills
Akersh Srivastava
Sr. Solutions Architect
Alexa Skills
Eric Fahsl
Sr. Solutions Architect
Alexa Skills

3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

4. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Agenda
New Alexa Hosted Skills (Exclusive Beta)
New Alexa Presentation Language
Let’s build a skill with APL
• Understanding Alexa Presentation Language (APL)
• Development tools and framework
• How to implement APL and some of its Features

5. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Alexa Presentation Language
• Deliver richer interactions
• Control layout and visual expression
• Optimize for tens of millions of
Alexa devices
• Simplify navigation for customers

7. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Alexa.Presentation.APL.RenderDocument
handlerInput.responseBuilder
.speak(speechText)
.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
version: '1.0',
document: require('./mainScreen.json'),
datasources: require('./datasources.json'),
})
.getResponse();

8. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Components
Components are reusable, self-contained artifacts used to display visual
elements on the screen such as text, images, and sequences

9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Components in APL
{
"type": "Text",
"text": "Hello, World!"
"color": "#FF0000"
},
{
"type": "Image",
"source": "http://urlto.helloworld",
"width": "100vw",
"height": "70vh"
},

10. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

12. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Designing for multiple form factors
Speakers Smart screens TVs

13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Designing for multiple form factors

14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Designing for screens and customers

15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Storyboards

16. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

17. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Visual characteristics framework
@viewportProfile
• Describes the properties of the screen on
the device
• Accessible in the skill code and on the
template

18. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
When clauses
"import": [
{
"name": "alexa-viewport-profiles",
"version": "1.0.0"
}
],
...
{
"when": "${@viewportProfile == @hubRoundSmall}",
"type": "Container",
"items": [...]
},
{
"when": "${@viewportProfile == @hubLandscapeMedium}",
"type": "Container",
"items": [...]
},

19. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Alexa layouts
Alexa header
Alexa footer
Custom APL

20. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Alexa layouts
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
...
{
"type": "AlexaHeader",
"headerTitle": "Hello World"
},
{
"type": "Text",
"text": "Hello, World!"
},
{
"type": "AlexaFooter",
"footerHint": "Hint to Hello World"
},

21. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity I
35 Minutes

22. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity I—Recap
When clauses
Editing characteristics per device
Layout components
AlexaHeader
AlexaFooter
Adding your own content
Style matching

23. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Food Network

24. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Kayak

25. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

26. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Design best practices for VUI + GUI

27. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Reusing templates with different data

28. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Skill and template data source

29. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Data-binding
• Incorporate user-provided data
• Pass datasource as parameters into main template
• Can be used in when clauses to conditionally inflate components of
templates

30. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Data-binding
{
"type": "Text",
"text": "There are ${datasource.numPeas} peas in the pod",
"color": "@myBlue",
"size": "${@textSizePrimary * 1.2}"
}

31. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Data-binding syntax
Strings
${“Double-quoted string”}
${’Single-quoted string”}
${“Inner quote: ” or ‘”}
Nesting
${“Two plus two is ${2+2}”}
Booleans
${true}
${false}
null
${null}
Resources
${@myBlue}
${@isLandscape ? @myWideValue : @myNarrowValue}
Arithmetic operators
Addition, subtraction, multiplication, division, modulo
Booleans
${true}
${false}
Logical operators
${true || false} // true
${true && false} // false
${!true} // false

32. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity II
25 Minutes

33. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity II - Recap
• AlexaHeader
• Container
• Back button
• Title
• Subtitle
• Icon
• Data-binding
• Populate the grid with live data from a data source
• Hardcoded list or API

34. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Food Network

35. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Food Network

36. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

37. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Design best practices for Hints

38. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Sauce Boss Hints
Try “Alexa, how do I make pesto?”
Try “Echo, how do I make pesto?”
Try “Computer, how do I make pesto?”
Try “Amazon, how do I make pesto?”

39. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Transformations
• Part of the datasource
• Transforms entities of the
datasource to different APL types
• Inflated in the main template

40. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AlexaFooter Hints
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
...
{
"type": "AlexaFooter",
"footerHint": "${datasource.sauceBossData.properties.hintString}"
},

41. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Hint Transformer
{
"sauceBossData": {
"type": "object",
"properties": {
"hintString" : "how do I make pesto?"
},
"transformers": [
{
"inputPath": "hintString",
"transformer": "textToHint"
}
]
}
}

42. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Design best practices for SpeakItem

43. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Commands
• Directive sent alongside the APL
template
• Change the visual or audio
presentation of the components
• Applied alongside transformations
and data binding

44. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
SpeakItem
• Sync what Alexa says with the on-screen text
• Auto-scroll spoken text into view
• Control how text is highlighted
• Customize minimum highlight duration

45. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Synchronized Speech Text Component
{
"type": "Text",
"id": "synchronizedSpeechComponentId",
"text": "${payload.sauceBossData.properties.synchronizedText}",
"speech": "${payload.sauceBossData.properties.synchronizedSpeech}",
"fontSize": "50px"
}

46. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Synchronized Speech Text Component
{
"type": "Text",
"id": "synchronizedSpeechComponentId",
"text": "${payload.sauceBossData.properties.synchronizedText}",
"speech": "${payload.sauceBossData.properties.synchronizedSpeech}",
"fontSize": "50px"
}

47. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Synchronized Speech Transformer
{
"sauceBossData": {
"type": "object",
"properties": {
"recipeSsml": "<speak>This is a recipe Alexa says synchronized with the Text
Component.</speak>",
},
"transformers": [
{
"inputPath": "recipeSsml",
"outputName": "synchronizedText",
"transformer": "ssmlToText"
},
{
"inputPath": "recipeSsml",
"outputName": "synchronizedSpeech",
"transformer": "ssmlToSpeech"
}
]
}
}

48. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Synchronized Speech Transformer
{
"sauceBossData": {
"type": "object",
"properties": {
"recipeSsml": "<speak>This is a recipe Alexa says synchronized with the Text
Component.</speak>",
},
"transformers": [
{
"inputPath": "recipeSsml",
"outputName": "synchronizedText",
"transformer": "ssmlToText"
},
{
"inputPath": "recipeSsml",
"outputName": "synchronizedSpeech",
"transformer": "ssmlToSpeech"
}
]
}
}

49. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Synchronized Speech Command
handlerInput.responseBuilder
.speak(speechText)
.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token: 'synchronizedTextToken',
document: require('./mainScreen.json'),
datasources: require('./datasources.json')
})
.addDirective({
type: 'Alexa.Presentation.APL.ExecuteCommands',
token: 'synchronizedTextToken',
commands: [
{
type: 'SpeakItem',
componentId: 'synchronizedSpeechComponentId',
highlightMode: 'line'
}
]
})
.getResponse();

50. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Synchronized Speech Command
handlerInput.responseBuilder
.speak(speechText)
.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token: 'synchronizedTextToken',
document: require('./mainScreen.json'),
datasources: require('./datasources.json')
})
.addDirective({
type: 'Alexa.Presentation.APL.ExecuteCommands',
token: 'synchronizedTextToken',
commands: [
{
type: 'SpeakItem',
componentId: 'synchronizedSpeechComponentId',
highlightMode: 'line'
}
]
})
.getResponse();

51. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Synchronized Speech Command
handlerInput.responseBuilder
.speak(speechText)
.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token: 'synchronizedTextToken',
document: require('./mainScreen.json'),
datasources: require('./datasources.json')
})
.addDirective({
type: 'Alexa.Presentation.APL.ExecuteCommands',
token: 'synchronizedTextToken',
commands: [
{
type: 'SpeakItem',
componentId: 'synchronizedSpeechComponentId',
highlightMode: 'line'
}
]
})
.getResponse();

52. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity III
25 Minutes

53. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity III - Recap
Built a layout from scratch
Used data-binding to provide
Title
Image
Text
Used textToHint to transform text
Added SpeakItem support for text

54. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
FX network

55. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Food Network

56. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Food Network

57. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

58. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Design best practices for lists

59. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Sequences
Repeats the formatting defined by one or more components for multiple
entities of data

60. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Sequences
{
"type": "Sequence",
"scrollDirection": "vertical",
"data": "${listData}",
"numbered": true,
"items": [
{
"type": "Text",
"text": "${data.text}"
}
]
}

61. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Design best practices for touch

62. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
TouchWrappers
• Wraps a single child
• Responds to touch events
• Commonly used in lists where each
item can be touched
• Can be toggled on and off

63. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Defining TouchWrappers
{
"type": "TouchWrapper",
"item": {
"type": "Text",
"text": "Honey Mustard"
"color": "#66DFFF",
"fontSize": 30
}, ...

64. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Defining TouchWrappers - onPress
...
"onPress": {
"type": "SendEvent",
"arguments": [
"itemPressed",
"honeyMustard"
]
}

65. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
TouchWrapper Events in Skill
• Check for Display.UserEvent
• Access any params
• Provide a response

66. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Defining TouchWrappers - Receiving an event
const itemPressedHandler = {
canHandle(handlerInput) {
const request = handlerInput.requestEnvelope.request;
return request.type === 'Display.UserEvent'
&& request.arguments.length > 0
&& request.arguments[0] === 'itemPressed';
},
...

67. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity IV
BONUS!

68. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Activity IV - Recap
• Add Touch to documents
• Bonus
• Created a custom help screen
• Optimized list scroll direction based on viewport

69. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon Storytime

70. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon Storytime

71. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

72. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What did we just do

73. Thank you!
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Cami Williams
Alexa Evangelist
Alexa Skills
Akersh Srivastava
Sr. Solutions Architect
Alexa Skills
Eric Fahsl
Sr. Solutions Architect
Alexa Skills
Jaime Radwan
Sr. UX Designer
Alexa Skills
Justin Jeffress
Sr. Solutions Architect
Alexa Skills

74. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Related breakouts
Monday, November 26
ALX313-R Use Alexa to Reach Millions of New Customers by Developing for Multiple Screens
12:15PM – 1:15PM | Bellagio
Tuesday, November 27
ALX306-R Everything You Wanted to Know about Developing for Voice Using Alexa
8:30AM – 9:30AM | Aria
Tuesday, November 27
ALX201 Alexa Everywhere: A Year in Review
2:30PM – 3:30PM | Aria

75. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Compete for $150k in total prizing.
Visit alexa.design/multimodalchallenge to learn more.
Alexa Skills Challenge: Multimodal

76. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.