Skip to content

Incorporate a component to Dialogflow with fulfillment.

In the following tutorial we'll add a component into Dialogflow.

The component will be triggered when a relevant intent matches. More specifically, we'll use the CoCo register component from the CoCo Marketplace.

Here's how the end result looks like:

CoCo SDK Installation To Dialogflow:

Import CoCo Dialogflow SDK functions.

  • Access your agent fulfillment tab:

  • Enable the inline editor functionality:

  • Add CoCo SDK To Package JSON:

Copy the line(don't forget the comma in the end of line above):

    "@conversationalcomponents/dialogflow-sdk": "^1.0.2"
  • Import CoCo SDK functions:

Copy the line:

const { cocoComponent, cocoContext } = require("@conversationalcomponents/dialogflow-sdk");

Create Intent For CoCo Context.

The intent is needed to maintain CoCo context through the conversation as long as CoCo handles the multi-turn session with the end user.

  • Access intent tab:

  • Create CoCo context intent:

The intent must have an input context called coco, also it has to be configured with the catch all functionality (It is illustrated in the Training Phrases section of the picture below).

  1. Add any string as a training example
  2. Double click on the training example string
  3. Pick @sys.any from the list
  4. Enable webhook call for the intent (scroll all the way down and click on the toggles)

Map CoCo Context Intent To cocoContext SDK Function:

To maintain context in multiturn components use the cocoContext helper function: Copy the line:

intentMap.set('coco.incontext.intent', cocoContext);


In order to be able to send external requests to APIs from the fulfilment function(in other words calling CoCo), you need to activate your Google firebase account. It will ask you for billing info.Google provides a substantial free quota for this service, so you won't actually be charged.

Plug Component To Your Conversation Flow.

  • Add the component to your CoCo workspace:

  • Plug the component in to your conversation flow by mapping the relevant intent:
  • First create or use an exisiting intent.
  • Enable webhook call for the intent (scroll all the way down and click on the toggles)

  1. Add mapping in the intentMap

Copy the line:

intentMap.set('', cocoComponent("register_vp3"));

Click on DEPLOY

Check Your Bot:

In the image blow, you can see that we received an answer from the component when the correct intent triggered:

Also you'll notice a multi-turn conversation supplied by the component:


  • Getting the intent responses instead of the responses from the component:

log in to the firebase dashboard -> functions -> delete dialogFulfillmentFunction -> click on the deploy button again in the fulfillment tab in Dialogflow.

package.json and index.js might reset to the default code so repeat the steps from above