Documentation

Below is an example of how to add a carousel as a response in fulfillment using the actions-on-google package. We recommend using this package over the dialogflow-fulfillment package.

// for this example, you must require the 'actions-on-google' library
// deconstruct the Carousel and Image classes from the library at the top of your document
// example: const { Carousel, Image } = require('actions-on-google')

function fulfillmentCarousel(agent) {
  // set your agent's requestSource to 'ACTIONS_ON_GOOGLE'
  agent.requestSource = agent.ACTIONS_ON_GOOGLE;

  // declare a variable conv (this can be a global variable or within an intent response function)
  let conv = agent.conv();

  // conv.ask your responses

  // this is a simple text response
  conv.ask('This is a carousel example.');

  // this is a carousel response
  conv.ask(
    new Carousel({
      // items in your carousel
      items: {
        // option key name - sent as a response when a user clicks on this card
        SELECTION_KEY_ONE: {
          synonyms: ['synonym 1', 'synonym 2', 'synonym 3'],
          // title of your carousel item
          title: 'Title of First Carousel Item',
          // description of your item
          description: 'This is a description of a carousel item.',
          // an image associated with a card. note the new 'Image' class we imported
          image: new Image({
            url: 'IMG_URL_AOG.com',
            alt: 'Image alternate text'
          })
        },
        // second carousel item
        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.com',
            alt: 'Google Home'
          })
        },
        // third carousel item
        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.com',
            alt: 'Google Pixel'
          })
        }
      }
    })
  );

  // add your conv variable to your agent
  // this sends all your responses to your botcopy widget
  agent.add(conv);
}

Below is an example of how to add a carousel as a response in fulfillment using the dialogflow-fulfillment package.

// for this example, you must require the 'dialogflow-fulfillment' library
// deconstruct the Payload class from the library at the top of your document
// example: const { Payload } = require('dialogflow-fulfillment')

function fulfillmentPayload(agent) {
  // set your agent's requestSource to 'ACTIONS_ON_GOOGLE'
  agent.requestSource = 'ACTIONS_ON_GOOGLE';

  // use agent.add and the new Payload class to send a raw JSON Carousel to botcopy
  agent.add(
    new Payload(agent.ACTIONS_ON_GOOGLE, {
      expectUserResponse: true,
      richResponse: {
        items: [
          {
            simpleResponse: {
              textToSpeech: 'Choose a item'
            }
          }
        ]
      },
      systemIntent: {
        intent: 'actions.intent.OPTION',
        data: {
          '@type': 'type.googleapis.com/google.actions.v2.OptionValueSpec',
          carouselSelect: {
            items: [
              {
                optionInfo: {
                  key: 'first title'
                },
                description: 'first description',
                image: {
                  url:
                    'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png',
                  accessibilityText: 'first alt'
                },
                title: 'first title'
              },
              {
                optionInfo: {
                  key: 'second'
                },
                description: 'second description',
                image: {
                  url:
                    'https://lh3.googleusercontent.com/Nu3a6F80WfixUqf_ec_vgXy_c0-0r4VLJRXjVFF_X_CIilEu8B9fT35qyTEj_PEsKw',
                  accessibilityText: 'second alt'
                },
                title: 'second title'
              }
            ]
          }
        }
      }
    })
  );
}

Below is an example of how to add a list as a response in fulfillment using the actions-on-google package.

// this example uses the List class from 'actions-on-google'
// the structure of a list is similar to a carousel
// you'll need to destructure the List and Image classes from the actions-on-google package like carousels
// example: const { List, Image } = require('actions-on-google')

function list(agent) {
  // set your agent's requestSource to 'ACTIONS_ON_GOOGLE'
  agent.requestSource = agent.ACTIONS_ON_GOOGLE;

  // declare a variable conv (this can be a global variable or within an intent response function)
  let conv = agent.conv();

  // conv.ask your responses

  // this is a simple text response
  conv.ask('This is a list example.');

  // this is a list response
  conv.ask(
    new List({
      // one main difference between a list and a carousel is the title
      // this title is optional. if you choose to include one, it will be rendered as a header over the list
      title: 'List Title',
      items: {
        // the fields within a list mirror those in a carousel
        SELECTION_KEY_ONE: {
          synonyms: ['synonym 1', 'synonym 2', 'synonym 3'],
          title: 'Title of First List Item',
          description: 'This is a description of a list item.',
          // note the image field uses the Image class like carousels
          image: new Image({
            url: 'IMG_URL_AOG.com',
            alt: 'Image alternate text'
          })
        },
        // Add the second item to the list
        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.com',
            alt: 'Google Home'
          })
        },
        // Add the third item to the list
        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.com',
            alt: 'Google Pixel'
          })
        }
      }
    })
  );

  // add your conv variable to your agent
  // this sends all your responses to your botcopy widget
  agent.add(conv);
}