Having trouble displaying Multiple Home Card Display on Alexa in Single Response - php

Question

I have a application running on ALEXA (Amazon Echo). I'm implementing Home card display with images. When for a particular call if the response has only one card. It shows perfectly fine. Screenshot attached
"Response": {
"version" : "1.0",
"sessionAttributes": {
"UserCityId": "1",
"UserCity": "London",
"latitude": "51.50735090",
"longitude": "-0.12775830",
"categoryID": "900",
"company_id": "1154916",
"first_name": "User FName",
"yes_no_for": "",
"cat_start_limit": "0",
"categoryName": "music",
"total_cat_events": "2178",
"show_rec": "5"
},
"response": {
"outputSpeech": {
"type": "PlainText",
"text": "This is what alexa speaks out"
},
"card": {
"type": "Standard",
"title": "Music events in London",
"text": "The speech passed to alexa",
"image": {
"smallImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg",
"largeImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg"
}
},
"reprompt": {
"outputSpeech": {
"type": "PlainText",
"text": "Would you like to know events for music ,sports, or something else. Please select one category"
}
},
"shouldEndSession": false
}
}
The above code works
The problem is listed below :
But if the same response has array of cards (multiple cards), alexa fails giving an error.
"Response": {
"version": "1.0",
"sessionAttributes": {
"UserCityId": "1",
"UserCity": "London",
"latitude": "51.50735090",
"longitude": "-0.12775830",
"categoryID": "900",
"customer_id": "1154916",
"first_name": "UserFNAME",
"yes_no_for": "",
"cat_start_limit": "0",
"categoryName": "music",
"total_cat_events": "2178",
"show_rec": "5"
},
"response" : {
"outputSpeech" : {
"type": "PlainText",
"text": "5th. Baba Yaga's Hut Presents Jambinai, at Corsica Studios, on Monday, May 16th , 7 30 pm"
},
"card": [{
"type": "Standard",
"title": "Music events in London",
"text": "1. Dove Jones Blues Jam!, at Phoenix Artist Club, on Monday, May 16th , 7pm",
"image": {
"smallImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg",
"largeImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg"
}
}, {
"type": "Standard",
"title": "Music events in London",
"text": "2. The Hillbilly Moon Explosion, at The Borderline, on Monday, May 16th, 7pm",
"image": {
"smallImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg",
"largeImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg"
}
}, {
"type": "Standard",
"title": "Music events in London",
"text": "3. Sian Evans Of Kosheen, at 100 Club, on Monday, May 16th , 7 30 pm",
"image": {
"smallImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg",
"largeImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg"
}
}, {
"type": "Standard",
"title": "Music events in London",
"text": "4. Rinocerose, at The Water Rats, on Monday, May 16th , 7 30 pm",
"image": {
"smallImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg",
"largeImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg"
}
}, {
"type": "Standard",
"title": "Music events in London",
"text": "5. Baba Yaga's Hut Presents Jambinai, at Corsica Studios, on Monday, May 16th , 7 30 pm",
"image": {
"smallImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg",
"largeImageUrl": "https:\/\/xyz.com\/version\/sports-car-1374425_960_720.jpg"
}
}],
"reprompt": {
"outputSpeech": {
"type": "PlainText",
"text": "Would you like to know events for music ,sports, or something else. Please select one category"
}
},
"shouldEndSession" : false
}
}
The above code doesn't work.
Here is the thing that I'm trying to convert : Please see the screenshot
For events in london call I get list of 5 events in single card. To each event I want to assign image and create its card.
Can anyone help with the approach and figure out what is the problem using multiple card in JSON response.
Is it that alexa only support single card in response ?

Answer 1

The card attribute on the response takes an object not an array.
Here is the example that Amazon uses on their site:
{
"version": "string",
"sessionAttributes": {
"string": object
},
"response": {
"outputSpeech": {
"type": "string",
"text": "string",
"ssml": "string"
},
"card": {
"type": "string",
"title": "string",
"content": "string",
"text": "string",
"image": {
"smallImageUrl": "string",
"largeImageUrl": "string"
}
},
"reprompt": {
"outputSpeech": {
"type": "string",
"text": "string",
"ssml": "string"
}
},
"shouldEndSession": boolean
}
}
If you wanted to try and make multiple cards, you could try sending multiple responses, but I am not sure that that would work either.
I think your best option is to consider a different interaction with the user for your problem then presenting multiple cards.