Alexa Headline template

The Alexa Headline template (AlexaHeadline) displays short informational text on the screen. It is a responsive full-screen template including header, footer, background, and a logo image.

For the Tic-Tac-Toe skill, you'll use AlexaHeadline to design screens for the following parts of the user experience:

  • Welcome screen
  • User gives an illegal move
  • User wins
  • Alexa wins
  • Game results in a draw

The best way for you to start is to think about the Welcome screen first, and then to identify what all screens have in common. You'll include the AlexaHeadline as a mainTemplate item, and use the following parameters of AlexaHeadline.

Name Type Default Description
type String None Always set to AlexaHeadline
primaryText String   Primary text to display in up to two lines. Text is truncated to fit to two lines.
backgroundImageSource String None URL for the background image source. Note that you must use https, rather that http in the URL.
backgroundColorOverlay Boolean false When true, apply a scrim to the background to make it easier to read the text displayed over the image or video.
footerHintText String None Hint text to display in the footer. Use textToHint to add the correct wake word to the hint.
headerAttributionImage String None URL for attribution image source. We will use this image for a logo. Note that you must use https, rather that http in the URL.

For more details, see Headline in the Alexa Skills Kit. For design guidance, see Headline in the Alexa Design Guide.

If you add the AlexaHeadline as an item of mainTemplate, the example below shows how the JSON updates.

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen"
            }
        ]
    }
}

Keep in mind that it is always a good idea to define a string value as an id for every item in the mainTemplate, especially if your APL document uses many components. That's why you use "informationScreen".

Exercise 1

Update the APL document to produce the following informational screen.

img

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen",
                "backgroundImageSource": "",
                "backgroundColorOverlay": true,
                "headerAttributionImage": "",
                "primaryText": "",
                "footerHintText": ""
            }
        ]
    }
}

Use the following assets and text:

  • Background image: https://d3j5530a0cofat.cloudfront.net/adlc/background.png
  • Logo image: https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png
  • Header text: Welcome to Tic-Tac-Toe!
  • Footer text: Try, "Alexa, top row, left column"

Tip: Use the escape character \ to display double quotes within text, like "\"Alexa, ...\"".

Important: Click here and then Blank Document to test your solution against the APL authoring tool in the developer console. Save this link as a bookmark because you will use it throughout the course.

Solution

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen",
                "backgroundImageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/background.png",
                "backgroundColorOverlay": true,
                "headerAttributionImage": "https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png",
                "primaryText": "Welcome to Tic-Tac-Toe!",
                "footerHintText": "Try, \"Alexa, top row, left column\""
            }
        ]
    }
}

Was this page helpful?