Dialogflow Requirements:

agent.requestSource = agent.ACTIONS_ON_GOOGLE; is required to precede const conv = agent.conv(); for your response payloads.

When using the actions of google package, ensure your dependencies are up to date. "dialogflow-fulfillment" should be at least version ^0.6.1.

Note: When creating a new agent on Dialogflow, the package.json that is generated does not use the latest dependencies.

package.json example with updated dependencies:

{
	"name": "dialogflowFirebaseFulfillment",
	"description": "This is a Botcopy example for dependencies for a Dialogflow agents using Cloud Functions for Firebase",
	"version": "0.0.1",
	"private": true,
	"license": "Apache Version 2.0",
	"author": "Google Inc.",
	"engines": {
		"node": "6"
	},
	"scripts": {
		"start": "firebase serve --only functions:dialogflowFirebaseFulfillment",
		"deploy": "firebase deploy --only functions:dialogflowFirebaseFulfillment"
	},
	"dependencies": {
		"actions-on-google": "^2.5.0",
		"firebase-admin": "^6.4.0",
		"firebase-functions": "^2.1.0",
		"dialogflow": "^4.0.3",
		"dialogflow-fulfillment": "^0.6.1"
	}
}

For reference, here is the default fulfillment package.json generated by Dialogflow.

{
	"name": "dialogflowFirebaseFulfillment",
	"description": "This is the default fulfillment for a Dialogflow agents using Cloud Functions for Firebase",
	"version": "0.0.1",
	"private": true,
	"license": "Apache Version 2.0",
	"author": "Google Inc.",
	"engines": {
		"node": "8"
	},
	"scripts": {
		"start": "firebase serve --only functions:dialogflowFirebaseFulfillment",
		"deploy": "firebase deploy --only functions:dialogflowFirebaseFulfillment"
	},
	"dependencies": {
		"actions-on-google": "^2.2.0",
		"firebase-admin": "^5.13.1",
		"firebase-functions": "^2.0.2",
		"dialogflow": "^0.6.0",
		"dialogflow-fulfillment": "^0.5.0"
	}
}

Simple Responses are text responses from your agent. They are required by Google to precede a rich response (Suggestion Chips, Carousels, Browse Carousels etc)

See a simple response

  function simpleResponse(agent) {
        agent.requestSource = "ACTIONS_ON_GOOGLE";
  	let conv = agent.conv();
  	conv.ask('This is a simple response from fulfillment.');
  	agent.add(conv);
  }

Suggestion Chips offer options to users.

See a suggestion chip

Here is a working example for a Suggestion Chips using the actions-on-google package.

// for this example, you must require the 'actions-on-google' library
// deconstruct the Suggestions class from the library at the top of your document

const { Suggestions } = require('actions-on-google')

function suggestions(agent) {
        agent.requestSource = "ACTIONS_ON_GOOGLE";
    	let conv = agent.conv();

    	conv.ask('This is a simple response from fulfillment.');
         //adds a single suggestion chip
    	conv.ask(new Suggestions('Suggestion Chips'));
         //adds multiple suggestion chips
    	conv.ask(new Suggestions(['suggestion 1', 'suggestion 2']));
    	agent.add(conv);
    }

Link-out Suggestions display a button that links out to a URL.

See a link out suggestion

Here is a working example for a Link Out Suggestion using the actions-on-google package.

// for this example, you must require the 'actions-on-google' library
// deconstruct the LinkOutSuggestion class from the library at the top of your document

const { LinkOutSuggestion } = require('actions-on-google')

function linkOut(agent) {
	agent.requestSource = agent.ACTIONS_ON_GOOGLE;
	const conv = agent.conv();
	conv.ask('Simple responses are required before a rich response');
	conv.ask(
		new LinkOutSuggestion({
			name: 'Title of Link Out',
			url: 'https://botcopy.com'
		})
	);
	agent.add(conv);
}

See a basic card

Here is an example on adding a Basic Card in fulfillment with the actions-on-google package

// deconstruct the Basic Card and Button classes from the library at the top of your document
const { BasicCard, Button, Image } = require('actions-on-google')

function aogBasicCard(agent) {
  agent.requestSource = agent.ACTIONS_ON_GOOGLE;
  const conv = agent.conv();
  conv.ask('Here is a basic card through fulfillment');
  conv.ask(
    new BasicCard({
      buttons: [
        new Button({ title: 'Test Button', url: 'https://botcopy.com' }),
        new Button({ title: 'Test Button 2', url: 'https://botcopy.com' })
      ],
      text: 'Test formatted text',
      image: new Image({
        url:
          'https://cdn-images-1.medium.com/max/1200/1*s-JvYKXGEnYPdyIgT0w7gw.png',
        alt: 'Bot banner'
      }),
      subtitle: 'Test subtitle',
      title: 'Test title'
    })
  );
  agent.add(conv);
}

See a carousel

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'
              }
            ]
          }
        }
      }
    })
  );
}

See a browse carousel

Here is an example on adding a Browse Carousel Card in fulfillment with the actions-on-google package

Note: To open links in a new tab versus within the chat window, add ?nt=t at the end of your url: https://botcopy.com?nt=t

// deconstruct the BrowseCarousel, BrowseCarouselItem and Image classes from the library at the top of your document

const { BrowseCarousel, BrowseCarouselItem, Image } = require('actions-on-google')

function browseCarousel(agent) {
        agent.requestSource = "ACTIONS_ON_GOOGLE";
	let conv = agent.conv();
	conv.ask('This is a browse carousel example from fulfillment.');
	// Create a browse carousel
	conv.ask(new BrowseCarousel({
		items: [
			new BrowseCarouselItem({
				title: 'Title of item 1',
				url: 'https://botcopy.com',
				description: 'Description of item 1', 
				image: new Image({
					url: 'https://www.botcopy.com/wp-content/uploads/2019/01/Screen-Shot-2019-01-27-at-3.37.28-PM.png',
					alt: 'Image alternate text',
				}),
                                footer: 'Item 1 footer', //Supported in next update
			}),
			new BrowseCarouselItem({
				title: 'Title of Item 2',
				url: 'https://botcopy.com',
				description: 'Description of Item 2',
				image: new Image({
					url: 'https://www.botcopy.com/wp-content/uploads/2019/01/Screen-Shot-2019-01-25-at-10.31.54-AM.png',
					alt: 'Image alternate text',
				}),
                                footer: 'Item 2 footer', 
			}),
		],
	}));
	agent.add(conv);
}

See a list

Below is an example of how to add a List 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 deconstruct the List and Image classes from the actions-on-google package

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);
}

Note: Can be triggered through your bot or website.

Below is an example of how to trigger a webview from an intent through fulfillment and providing a response in case the user closes the webview. Uses the actions-on-google package.

// this example uses a Basic Card from 'actions-on-google'
// you'll need to deconstruct the BasicCard and Button classes from the actions-on-google package

const { BasicCard, Button } = require('actions-on-google')

 function LitePackageButtonFunction(agent) {
 	// set your agent's requestSource to 'ACTIONS_ON_GOOGLE'
 	agent.requestSource = 'ACTIONS_ON_GOOGLE';
 	// set a context that is passed to Botcopy to trigger your webview
 	const urlContext1 = {
 		name: 'openWebview',
 		lifespan: 1,
 		parameters: {
 			hideBrowserTab: false,
 			webViewTarget: 'self',
 			webViewUrl: 'https://yourwebsite.com/page'
 		}
 	};
 	//If using multiple webviews, set a unique context per intent
 	agent.context.set(urlContext1);
 	// declare a variable conv (this can be a global variable or within an intent response function)
 	const conv = agent.conv();
 	conv.ask("Opening a webview!");
 	conv.ask(new BasicCard({
 		buttons: [new Button({
 			title: 'Button Title',
 			url: 'https://yourwebsite.com/page'
 		})],
 		title: 'title text'
 	}));
 	// add your conv variable to your agent to send your responses to your botcopy widget
 	agent.add(conv);
 }