How to respond with Image in Amazon-Lex

Question

I am getting Error while displaying image as a response. I am getting this error :

An error has occurred: Invalid Lambda Response: Received invalid response from Lambda: Unrecognized field "responseCard" (class IntentResponse), not marked as ignorable at [Source: {"sessionAttributes":{},"dialogAction":{"type":"Close","fulfillmentState":"Fulfilled","message":{"contentType":"PlainText","content":"

function close(sessionAttributes, fulfillmentState, message) {
    return {
        sessionAttributes,
        dialogAction: {
            type: 'Close',
            fulfillmentState,
            message,
        },
        responseCard: {
            version: '2',
            contentType: "application/vnd.amazonaws.card.generic",
            genericAttachments: [
                  {
                     imageUrl:"URL of the image to be shown",
                  }
               ] 
        }
    };
}

exports.handler = (event, context, callback) => {
    console.log( "EVENT= "+JSON.stringify(event) );

    const intentName = event.currentIntent.name;
    var sessionAttributes = event.sessionAttributes;

    var responseMsg = "";

    if (intentName == "greetings") {
        var message = {
            'contentType': 'PlainText', 
            'content': 'Hi! How can I help you?'
        }

        responseMsg = close( sessionAttributes, 'Fulfilled', message );
    }
    else {
        console.log( "ERROR unhandled intent named= "+intentName );
        responseMsg = close( sessionAttributes, 'Fulfilled', {"contentType":"PlainText", "content":"Sorry, I can't help with that yet."});
    }

    console.log( "RESPONSE= "+JSON.stringify(responseMsg) );
    callback(null,responseMsg);
}

How should i display image on the chat box? What mistake i am doing here?

score 2 · Accepted Answer · edited Sep 01 '20 at 14:26

2

The responseCard needs to be inside dialogAction.

Try:

function close(sessionAttributes, fulfillmentState, message) {
    return {
        sessionAttributes,
        "dialogAction": {
            "type": "Close",
            fulfillmentState,
            message,
            "responseCard": {
                "version": "2",
                "contentType": "application/vnd.amazonaws.card.generic",
                "genericAttachments": [
                      {
                         "imageUrl":"http://...",
                      }
                ] 
            }
        }
    };
}

I also added quotation marks to the keys that are not variables just to be safe.

More Information on Response Cards:

ResponseCard format: contentType, genericAttachments, version
GenericAttachments format: attachmentLinkUrl, buttons, imageUrl, subtitle, title
Buttons format: text, value
None are required, but here is an example of all responseCard properties:

"responseCard": {
  "version": integer-value,                                     //change to integer
  "contentType": "application/vnd.amazonaws.card.generic",      //don't change
  "genericAttachments": [
      {
         "title":"card-title",                                  //change to any string         
         "subTitle":"card-sub-title",                           //change to any string 
         "imageUrl":"http://...",                               //change to full url 
         "attachmentLinkUrl":"http://...",                      //change to full url 
         "buttons":[ 
             {
                "text":"button-text",                           //change to any string 
                "value":"Value sent to server on button click"  //change to any string
             }
          ]
       } 
   ] 
}

edited Sep 01 '20 at 14:26

Ajay J G

886
7
21

answered Feb 17 '18 at 14:31

Jay A. Little

3,239
2
11
32

No Errors but also No Images or Button are showing up, what can be the issue? In the details section i am getting genericAttachments but no image. – Noob Feb 17 '18 at 19:09
I've added some links and an example guideline for the responseCard format in the answer. Just checking...did you replace this: `"URL of the image to be shown"` with an actual URL string? – Jay A. Little Feb 18 '18 at 02:25
yes, this is the link i am using : [link] (https://www.wikihow.com/images/thumb/c/c1/Get-the-URL-for-Pictures-Step-1-Version-4.jpg/aid597183-v4-728px-Get-the-URL-for-Pictures-Step-1-Version-4.jpg ) , neither did the button is showing up. – Noob Feb 18 '18 at 07:31
Looks alright to me. Where are you testing this? The response card will not show in the test chatbot in the Lex console. But once you go through connecting your Lex bot to Facebook or Twilio-SMS, then you should see the response card appear. – Jay A. Little Feb 18 '18 at 07:42
oh, i didn't know that, i was testing it on my console. – Noob Feb 18 '18 at 07:48
np, common mistake, I'll add it to my answer for the next person. – Jay A. Little Feb 18 '18 at 08:06
1

Upvoted thank you Sir! Note you can test it in the console – Krik Mar 27 '20 at 09:35

score 0 · Answer 2 · answered Jul 26 '22 at 04:05

For Lex V2 you need to use an ImageResponseCard.

Example Response Format which sends both a link (CustomPayload) and an image (ImageResponseCard):

{
    "sessionState": {
        "dialogAction": {
            "slotToElicit": "select_number_0",
            "type": "ElicitSlot"
        },
        "intent": {
            "slots": {
                "select_number_0": null,
            },
            "confirmationState": "None",
            "name": "TestIntent",
            "state": "InProgress"
        }
    },
    "messages": [
        {
            "contentType": "CustomPayload",
            "content": "[Cute Kitten 13.jpg](https://1.bp.blogspot.com/-ld1w-xCN0nA/UDB2HIY55WI/AAAAAAAAPdA/ho23L6J3TBA/s1600/Cute+Kitten+13.jpg)"
        },
        {
            "contentType": "ImageResponseCard",
            "imageResponseCard": {
                "title": "Uploaded file",
                "imageUrl": "https://1.bp.blogspot.com/-ld1w-xCN0nA/UDB2HIY55WI/AAAAAAAAPdA/ho23L6J3TBA/s1600/Cute+Kitten+13.jpg"
            }
        }
    ]
}

Note: For the example link to work, your client will need to be capable of processing markdown.

How to respond with Image in Amazon-Lex

2 Answers2