3

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?

Giorgie Goiati
  • 31
  • 4
  • There is another question that solve same question [here](https://stackoverflow.com/questions/68635831/how-to-use-rich-response-messages-like-suggestion-chips-on-dialogflow-messenger). – Peter Oct 11 '21 at 00:37

1 Answers1

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 e.g. "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.

aemon4
  • 1,037
  • 6
  • 11