0
votes

I have seen most of the examples related to how to return rich content via webhooks involving just basic response and Card.

https://github.com/dialogflow/fulfillment-webhook-nodejs/blob/master/functions/index.js

What's the structure needed in dialogflow webhook V2 response to return either List or Carousel?

1

1 Answers

0
votes

If you want to incorporate carousels and lists with Dialogflow, you'll need to import the actions-on-google module, as not all rich responses are supported by Dialogflow alone. You can see on the Actions on Google Rich Responses reference docs. Also there's a Fulfillment-Actions on Google sample

const { WebhookClient } = require('dialogflow-fulfillment');
const { Carousel } = require('actions-on-google');

conv.ask(new Carousel({
  items: {
    // Add the first item to the carousel
    [SELECTION_KEY_ONE]: {
      synonyms: [
        'synonym of title 1',
        'synonym of title 2',
        'synonym of title 3',
      ],
      title: 'Title of First Carousel Item',
      description: 'This is a description of a carousel item.',
      image: new Image({
        url: IMG_URL_AOG,
        alt: 'Image alternate text',
      }),
    },
    // Add the second item to the carousel
    [SELECTION_KEY_GOOGLE_HOME]: {
      synonyms: [
        'Google Home Assistant',
        'Assistant on the Google Home',
    ],
      title: 'Google Home',
      description: 'Google Home is a voice-activated speaker powered by ' +
        'the Google Assistant.',
      image: new Image({
        url: IMG_URL_GOOGLE_HOME,
        alt: 'Google Home',
      }),
    },
    // Add third item to the carousel
    [SELECTION_KEY_GOOGLE_PIXEL]: {
      synonyms: [
        'Google Pixel XL',
        'Pixel',
        'Pixel XL',
      ],
      title: 'Google Pixel',
      description: 'Pixel. Phone by Google.',
      image: new Image({
        url: IMG_URL_GOOGLE_PIXEL,
        alt: 'Google Pixel',
      }),
    },
  },
}));