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.
- Import the alexa-layouts package
- AlexaFooter Parameters
- AlexaFooter example
- Use the textToHint transformer
- Related topics
Import the alexa-layouts package
To use AlexaFooter
, import the alexa-layouts package.
The latest version of the alexa-layouts
package is 1.1.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 |
---|---|---|---|---|
|
String |
None |
Hint text to display in the footer. Use |
1.0.0 |
|
String |
dark |
Colors will be switched depending on the specified theme (light/dark). Default to dark theme. |
1.1.0 |
|
String |
None |
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.
To use the transformer, put your hint text in a data source within the properties
object. Include the textToHint
transformer in the transformers
array with an inputPath
that points to the property containing the text.
In the following example, the hint text ("Do something else with this skill!") is in footerExampleData.properties.hintText
. The transformer expects to find the text within footerExampleData.properties
, so the inputPath
just references the property name, hintText
:
{
"footerExampleData": {
"type": "object",
"objectId": "footerExampleData",
"description": "This data source contains data for the footer hint example.",
"properties": {
"hintText": "Do something else with this skill!"
},
"transformers": [
{
"inputPath": "hintText",
"transformer": "textToHint"
}
]
}
}
Then, when you add the AlexaFooter
layout to your document, bind the hintText
property of the component to the property that contains your hint text in the data source. In this example, you put the AlexaFooter
component in your document in the place where you want to display the footer (such as at the end of a Container
that displays the rest of your content).
{
"type": "AlexaFooter",
"hintText": "${payload.footerExampleData.properties.hintText}"
}
On a device with the default Alexa wake word, the hint displays:
Try "Alexa, Do something else with this skill!"
On a device configured with the wake word "Echo", the hint displays:
Try "Echo, Do something else with this skill!"
textToHint
.For more about transformers, see Transformers.