deploying my inline editor code in Dialogflow Essentials to show webpage

Question

I want my app to show a webpage when I start my AoG, but I could not figure out how to make it possible with my code. Here's my code :

'use strict';
 
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
const {dialogflow, HtmlResponse} = require('actions-on-google');
const CANVAS_URL = 'http://www.example.com';

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));
 
  function welcome(agent) {
    agent.add(`Welcome to my agent!`);
    agent.add(new Canvas({
      url: CANVAS_URL,
    }));
  }
 
  function fallback(agent) {
    agent.add(`Fullfillment_Fallback`);
  }


  // Run the proper function handler based on the matched Dialogflow intent name
  let intentMap = new Map();
  intentMap.set('Default Welcome Intent', welcome);
  intentMap.set('Default Fallback Intent', fallback);
  agent.handleRequest(intentMap);
});

Answer 1

Hey it seems like you're mixing a few programming libraries together in a way that doesn't work. Let's simplify this to only using actions-on-google. Note that some similar concepts are named differently.

In the actions-on-google library, the Canvas element is named HtmlResponse.

'use strict';
 
const functions = require('firebase-functions');
const {dialogflow, HtmlResponse} = require('actions-on-google');
const CANVAS_URL = 'http://www.example.com';

process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements

const app = dialogflow({debug: true});

app.intent('Default Welcome Intent', conv => {
    conv.ask('Welcome to my agent!');
    conv.ask(new HtmlResponse({
        url: CANVAS_URL,
    });
});

app.intent('Default Fallback Intent', conv => {
    conv.ask('Fullfillment_Fallback');
});

exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);