1

Hi guys I am using webhook as a backend and Dialogflow as a frontend I am using Dialogflow-fulfillment library in node js I know how to make use of rich response messages like buttons using Dialogflow frontend but how can I use it from the webhook code maybe using some JSON? I want to use suggestion chips currently, I know how to use the card see below code now I would like to use the Suggestion chip response how to do that?

//agent.add(new Card({
    //title: `RDF Graph Visualization`,
     //buttonText: 'open website',
     //buttonUrl: 'https://xxherokuapp.com/visualize/' + graphId
       //})
    // )
x jd
  • 23
  • 4

1 Answers1

1

I have tried the following code with Fulfillment as Webhook and tested it on Dialogflow Messenger. The response contains suggestion chips with links.

Index.js :

const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
const { Payload } = require("dialogflow-fulfillment");
process.env.DEBUG = 'dialogflow:debug';
exports.myfunction = 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));
 function welcome(agent) {
   agent.add(`Welcome to my agent!`);
 }
 function fallback(agent) {
   agent.add(`I didn't understand`);
   agent.add(`I'm sorry, can you try again?`);
 }
 
 function pet(agent){
   agent.add(`which one u want`);
   const payload = {
    
     "richContent":[
       [
         {
           "type":"chips",
           "options":[
             {
               "text":"Dog",
               "link" : "https://en.wikipedia.org/wiki/Dog"
             },
             {
               "text":"Cat",
               "link":"https://en.wikipedia.org/wiki/Cat"
             },
             {
             "text":"Rabbit",
             "link" : "https://en.wikipedia.org/wiki/Rabbit"
             }
           ]
         }
       ]
     ]
    
   };
   agent.add(new Payload(agent.UNSPECIFIED, payload, {rawPayload: true, sendAsMessage: true}));
 }
  let intentMap = new Map();
 intentMap.set('Default Welcome Intent', welcome);
 intentMap.set('Default Fallback Intent', fallback);
  intentMap.set('mypet',pet);
  agent.handleRequest(intentMap);
});

Package.json :

 "name": "myfunction",
 "description": "This is the webhook",
 "version": "0.0.1",
 "private": true,
 "license": "Apache Version 2.0",
 "author": "Google Inc.",
 "engines": {
   "node": "10"
 },
  "dependencies": {
   "actions-on-google": "^2.2.0",
   "firebase-admin": "^5.13.1",
   "firebase-functions": "^2.0.2",
   "dialogflow": "^0.6.0",
   "dialogflow-fulfillment": "^0.6.1"
 }
}

Output:enter image description here More info on using suggestion chips with Dialogflow Messenger is present in the document.

Krish
  • 752
  • 3
  • 10
  • This worked for me as well !!! Thank you! For not to forget `const { Payload } = require("dialogflow-fulfillment");` should exists. – Peter Oct 10 '21 at 09:21