Alexa Skills Kit: How to add an image to a standard card using JS

Question

I've been building off the examples in alexa-skills-kit-js/samples/

but they don't have any where you add an image to the response card.

response.askWithCard(speechOutput, repromptOutput, cardTitle, cardContent);

Where does the image go? The cardContent is usually a string. Do I just make it into an object containing an image...?

Answer 1

I followed a reply to a similar question on the Amazon developer support forums from Mark Stringer:

I have been struggling with this myself and now have it working. If you are using the sample AlexaSkill.js module that Amazon provide then you need to add a couple of sections to it to deal with picture cards.

In the buildSpeechletResponse section add this after the similar type "Simple" section:

  if (options.cardSmallImageURL && options.cardLargeImageURL) { alexaResponse.card = { type: "Standard", title: options.cardTitle, text: options.cardContent, image: { smallImageUrl: options.cardSmallImageURL, largeImageUrl: options.cardLargeImageURL } }; } 

Then after the askWithCard definition further down add this:

  askWithPictureCard: function(speechOutput, repromptSpeech, cardTitle, cardContent, smallImageURL, largeImageURL) { this._context.succeed(buildSpeechletResponse({ session: this._session, output: speechOutput, reprompt: repromptSpeech, cardTitle: cardTitle, cardContent: cardContent, cardSmallImageURL: smallImageURL, cardLargeImageURL: largeImageURL, shouldEndSession: false })); 

Now you can call it, probably using variables rather than constants I was testing with using;

response.askWithPictureCard('This is the speech output', 'This is the reprompt', 'this is the card title', 'This is the card text, note the field is called text not cardContent', ' https://s3.amazonaws.com/thisisthesmallpictureurl-small.jpg ', ' https://s3.amazonaws.com/thisisthebigpictureurl-big.jpg ' );

Then follow a similar process to add a tellWithPictureCard function.

There's one small typo in the code there where Stringer put crd when he meant card which I corrected in my paste above. Other than that this approach worked for me.

Answer 2

Unfortunately, it looks like 'Simple' is hardcoded, and 'Standard' cards are required for small and large image URLs. Here is the code from

https://github.com/amzn/alexa-skills-kit-js/blob/master/samples/historyBuff/src/AlexaSkill.js#L142

    if (options.cardTitle && options.cardContent) {
        alexaResponse.card = {
            type: "Simple",
            title: options.cardTitle,
            content: options.cardContent
        };
    }

You would need to modify your local copy of AlexaSkill.js to add the functionality.

Here is API usage of Flask-Ask library (mine) showing how cards work:

https://johnwheeler.org/flask-ask/responses.html#displaying-cards-in-the-alexa-smartphone-tablet-app