How do I change the background image on an Alexa Show skill card? - background

Question

I'm new to programming Alexa skills, especially with the Echo Show. I am trying to change the background image of the skill card from the default dark grey to something else. I know there has to be a way to do this because when I say, "Alexa, tell me a joke." that skill's background is red. And when I say, "Alexa, tell me about LeBron James." Alexa changes the background to LeBron James and the text auto scrolls. Any help on this would be great.

Answer 1

You can indeed change the background of an Alexa Show skill. Unfortunately, at this time Amazon does not offer a bunch of styling functionality beyond that for the Show skills.
The display interface reference is the documentation that you should read. It will give you an understanding of how all your calls and responses will be sent/received as JSON objects. In order to change the background you must choose one of the few template options they have available and add the background key and value to your JSON response structure.
For example, check out the following response structure you should send back from your AWS lambda function. It renders BodyTemplate2 which displays an image on the side of the screen with text on the other side. (This was taken from the display interface reference). Look at the key, "backgroundImage" and the following value.
{
"type": "Display.RenderTemplate",
"template": {
"type": "BodyTemplate2",
"token": "A2079",
"backButton": "VISIBLE",
"backgroundImage": {
"contentDescription": "Textured grey background",
"sources": [
{
"url": "https://www.example.com/background-image1.png"
}
],
"title": "My Favorite Car",
"image": {
"contentDescription": "My favorite car",
"sources": [
{
"url": "https://www.example.com/my-favorite-car.png"
}
]
},
"textContent": {
"primaryText": {
"text": "See my favorite car",
"type": "PlainText"
},
"secondaryText": {
"text": "Custom-painted",
"type": "PlainText"
},
"tertiaryText": {
"text": "By me!",
"type": "PlainText"
}
}
}
}
}