Alexa Header Layout

The Alexa header layout is used to consistently display a title, subtitle, attribution, and back button. The Alexa header layout is supported across different device displays.

Import the Alexa header layout into your document

To use the Alexa header layout, add the 'alexa-layouts' package to your document's package import array. The version must always be specified in the import, and is currently 1.0.0. See APL Document properties.

        "name": "alexa-layouts",
        "version" : "1.0.0"

Alexa header parameters

All parameters are optional.

Name Type Default Description
headerTitle string None Primary text to render in header.
headerSubtitle string None Secondary text to render in header.
headerAttributionText string None Attribution text to render in the header. The headerAttributionText value is shown only when no headerAttributionImage is provided and when headerAttributionPrimacy is true, or on a device that shows both Title/Subtitle and Attribution.
headerAttributionImage string None URL for attribution image source. Only shown when headerAttributionPrimacy is true, or on a device that shows Title/Subtitle and Attribution.
headerAttributionPrimacy boolean true On devices that can only display one element due to screen size, Attribution is prioritized. Setting to false displays Title/Subtitle. Defaults to true.
headerBackButton boolean false Toggle to display back button in header. Defaults to false.
headerNavigationAction string None Argument to pass via the SendEvent command when the button is pressed/clicked.
headerBackgroundColor string transparent Optional color value to use as the background color for the Header. Defaults to transparent.

AlexaHeader sample

"mainTemplate": {
      "item": {
            "type": "AlexaHeader",
            "headerTitle": "Header Title",
            "headerSubtitle": "Header Subtitle",
            "headerAttributionImage": "http://Header Attribution Image",
            "headerBackgroundColor": "red",
            "headerBackButton": true,
            "headerNavigationAction": "Go Back"