Error using actions-on-google Carousel or List with dialogflow's WebhookClient

Question

I tried everything to get this example working (In particular the Carousel part). Every time I try to use List or Suggestions or Carousel from actions on google, it gives me in the google simulator this error: error from actions on google simulator

Here's the Intent code from my heroku webhook (it's copy paste from the example)

function prova(agent){
let conv = agent.conv();
const imageUrl = 'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png';
const imageUrl2 = 'https://lh3.googleusercontent.com/Nu3a6F80WfixUqf_ec_vgXy_c0-0r4VLJRXjVFF_X_CIilEu8B9fT35qyTEj_PEsKw';
const linkUrl = 'https://assistant.google.com/';

conv.ask(new Carousel({
  title: 'Google Assistant',
  items: {
    'WorksWithGoogleAssistantItemKey': {
      title: 'Works With the Google Assistant',
      description: 'If you see this logo, you know it will work with the Google Assistant.',
      image: {
        url: imageUrl,
        accessibilityText: 'Works With the Google Assistant logo',
      },
    },
    'GoogleHomeItemKey': {
      title: 'Google Home',
      description: 'Google Home is a powerful speaker and voice Assistant.',
      image: {
        url: imageUrl2,
        accessibilityText: 'Google Home'
      },
    },
  },
}));
agent.add(conv);
}

So, here's my dependencies:

package.json dependencies

Anyone who has already solved this issue? I didn't find anything on this...

Thank you in advance!

Answer 1

You can try adding the JSON payload for Carousel directly like this:

function prova(agent){
    const imageUrl = 'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png';
    const imageUrl2 = 'https://lh3.googleusercontent.com/Nu3a6F80WfixUqf_ec_vgXy_c0-0r4VLJRXjVFF_X_CIilEu8B9fT35qyTEj_PEsKw';
    const linkUrl = 'https://assistant.google.com/';

    agent.add(new Payload(agent.ACTIONS_ON_GOOGLE,   {
        "expectUserResponse": true,
        "richResponse": {
            "items": [
                {
                    "simpleResponse": {
                        "textToSpeech": "Please choose an item:"
                    }
                }
            ]
        },
        "systemIntent": {
            "intent": "actions.intent.OPTION",
            "data": {
                "@type": "type.googleapis.com/google.actions.v2.OptionValueSpec",
                "carouselSelect": {
                    "items": [
                        {
                            "optionInfo": {
                                "key": "WorksWithGoogleAssistantItemKey"
                            },
                            "description": "If you see this logo, you know it will work with the Google Assistant.",
                            "image": {
                                "url": imageUrl,
                                "accessibilityText": "Works With the Google Assistant logo"
                            },
                            "title": "Works With the Google Assistant"
                        },
                        {
                            "optionInfo": {
                                "key": "GoogleHomeItemKey"
                            },
                            "description": "Google Home is a powerful speaker and voice Assistant.",
                            "image": {
                                "url": imageUrl2,
                                "accessibilityText": "Google Home"
                            },
                            "title": "Google Home"
                        }
                    ]
                }
            }
        }
    }));
}

Result:

Answer 2

In your implementation you missed a line from the original example. You need to have a SimpleResponse before your carousel. So you would need a line such as

conv.ask('Please choose an item:');

on the line before the conv.ask() for the new Carousel.