Footer

The Alexa footer responsive component (AlexaFooter) displays a hint at the bottom of a screen. This is intended to suggest other utterances the user might try. Use the textToHint transformer to automatically show the wake word configured for the device.

Compatibility

AlexaFooter is designed to work with all standard viewport profiles in the alexa-viewport-profiles package:

  • All hub round profiles
  • All hub landscape profiles
  • All hub portrait profiles
  • All mobile profiles
  • All TV profiles

If you use AlexaFooter on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaFooter, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaFooter was introduced in version 1.0.0.

Use the Other Versions option at the top of this page to see documentation for different versions of AlexaFooter. The table of parameters notes the version of alexa-layouts in which each parameter was added.

AlexaFooter Parameters

All parameters except type are optional.

Name Type Default Description Widget support Version added

accessibilityLabel

String

A string describing the footer. Voice over reads this string when the user selects this component.

Not supported

1.7.0

entities

Array

—

Array of entity data to bind to this component.

Not supported

1.2.0

hintText

String

—

Hint text to display in the footer. Use the textToHint transformer to add the correct wake word to the hint.

Not supported

1.0.0

lang

String

${environment.lang}

The language for the text displayed in the footer. This language determines the default font used for the text. For example, when set to ar-SA, the component uses Arabic fonts when available on the device. Set to a BCP-47 string.

For more details about language-specific fonts for responsive components, see Language-specific fonts in the components and templates.

Not supported

1.4.0

layoutDirection

String

inherit

Specifies the layout direction for the content. Set this property to either LTR (left-to-right) or RTL (right-to-left). When not set, this property inherits the layoutDirection specified in the parent component.

For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.

Not supported

1.4.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

Not supported

1.1.0

type

String

—

Always set to AlexaFooter

Not supported

1.0.0

AlexaFooter example

{
  "mainTemplate": {
    "item": {
      "type": "AlexaFooter",
      "hintText": "Hint Text"
    }
  }
}

Use the textToHint transformer

Use the textToHint transformer to automatically add the correct wake word to your hint string. This ensures that the device displays your hint text with the user-configured wake word, such as "Alexa" or "Echo". Users can choose the wake word for their devices, so avoid hard-coding the word "Alexa" in your hint.

This data source configures the transformer:

This document includes AlexaFooter and uses the transformer output for hintText:

Display the device-configured wake word in the hint
Display the device-configured wake word in the hint

For details about how you use textToHint, see Use the device wake word in your hints in Combine Content with Backgrounds, Borders, and Headers

For more about transformers, see Transformers.

Was this page helpful?

Last updated: Nov 28, 2023