javascriptnode.jsbuttondialogflow-esdialogflow-es-fulfillment

How to use rich response messages like suggestion chips on Dialogflow messenger?


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
       //})
    // )    

Solution

  • 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.