4

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?

starball
  • 20,030
  • 7
  • 43
  • 238
clueless user
  • 1,301
  • 2
  • 11
  • 12

2 Answers2

3

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.

hofo
  • 522
  • 1
  • 4
  • 16
0

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

John Wheeler
  • 275
  • 2
  • 4