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
//})
// )
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: More info on using suggestion chips with Dialogflow Messenger is present in the document.