Footer (1.1.0 - 1.3.0)
(This is not the most recent version of AlexaFooter
. Use the Other Versions option to see the documentation for the most recent version of AlexaFooter
)
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.
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 | Version added/updated |
---|---|---|---|---|
|
Array |
— |
Array of entity data to bind to this component. |
1.2.0 |
|
String |
— |
Hint text to display in the footer. Use the |
1.0.0 |
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
1.1.0 |
|
String |
— |
Always set to |
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
:
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.
Related topics
- Alexa Design System Overview
- Responsive Components and Templates
- Combine Content with Backgrounds, Borders, and Headers
- Transformers
- Alexa Design Guide: Responsive Components
Last updated: Nov 28, 2023