1

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.

John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
maestro777
  • 161
  • 1
  • 2
  • 17
  • I don't think AWS has an option to change card color to custom color. Only thing you can do is to select different card type, which will give you different styles. – Vijayanath Viswanathan Sep 01 '17 at 08:45

1 Answers1

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"
        }
      }
    }
  }
}
peachykeen
  • 4,143
  • 4
  • 30
  • 49
  • is this directive needs to be added to every response while a dialog is in progress? – fdistorted Apr 06 '18 at 08:57
  • @AndrewRomanenko yes, you need to specify what that state of the device looks like after each interaction with the user. Since the device is stateless it doesn't remember what the previous background was, so you need to add it to the response JSON again. Does that help? – peachykeen Apr 07 '18 at 13:06
  • yes, Thanks. I tried on the simulator and I needed to add image every time and was not sure that behavior is the same on the real device. – fdistorted Apr 09 '18 at 15:44