How to add Suggestion Chips through Fulfillment for the Dialogflow Messenger integration?

Question

So I have the Dialogflow Messenger embedded in a website and want to add some Suggestion chips. It's easy through the Custom Payload Response type and they show up just fine. But how do I add them through fulfillment?

I currently have a custom webhook setup and the idea is to have something like this:

if (x) {
  agent.add('blablabla');
  agent.add(new Suggestion('One');
} else {
  agent.add('blablabla');
  agent.add(new Suggestion('Two');
}

new Suggestion doesn't work though, so is there another way of doing this? I was thinking about something like this:

agent.add(new Payload(
  "richContent": [
    [
      {
        "options": [
          {
            "text": "One"
          },
          {
            "text": "Two"
          }
        ],
        "type": "chips"
      }
    ]
  ]));

Essentially trying to insert the Custom Payload directly into the response JSON, if that makes any sense. But yeah no idea how to actually do it. Anyone know how?

Answer 1

It is unclear to me what you exactly mean by new Suggestion() doesn't work . You mean the suggestion chips do not show in Dialogflow Messenger? Do they show in Dialogflow itself?

Let me share a few points:

• As far as I know the structure agent.add(new Suggestion(“One”)); should work. I tried a simple example and it is working fine in Dialogflow UI, with the code:

const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
 
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
 
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
  const agent = new WebhookClient({ request, response });
  console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
  console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
  
  let intentMap = new Map();
  intentMap.set('Default Welcome Intent', welcome);
  intentMap.set('Default Fallback Intent', fallback);
  function welcome(agent){ 
    agent.add("What is your favorite animal?");
    agent.add(new Suggestion("Dog"));
    agent.add(new Suggestion("Cat"));
  }

  function fallback(agent) {
    agent.add(`I didn't understand`);
    agent.add(`I'm sorry, can you try again?`);
  }

  agent.handleRequest(intentMap);
});

• If suggestions chips are not rendered even in Dialogflow UI I would suggest trying the previous code to discard any potential issues with your Dialogflow setup. You may need to upgrade some dependencies eg "dialogflow-fulfillment": "^0.6.1" .

• Some integrations, like Google Assistant use the Suggestions library from actions-on-google . See for example official Google Assistant code example . You may try to follow a similar behavior if it fits your use case although I do not think it is the case. As a reference you can check this github issue.