Free AI web copilot to create summaries, insights and extended knowledge, download it at here

1779

Abstract

">Similarly, enable webhook call for <b>Default Fallback Intent. </b>This option lets your agent call the webhook API with a post request. You can enable webhook calls for all those intents that required some backend processing, database query, or any this-party API integration.</p><p id="cd4e">2. Now let's create the webhook server.</p><p id="19c9"><i>create app.js file, add one API route with ‘/dialogflow’. All the agent webhook requests will be handled by this route.</i></p> <figure id="60e3"> <div> <div>

            <iframe class="gist-iframe" src="/gist/abhinavkumar985/e601279c1f3982ec8ed9a8d7a372e6c9.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="6840">When the agent will grow, it will have a number of intent based on different functionality. It is recommended to create a different intent handler file, based on the feature.</p>
    <figure id="c597">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/abhinavkumar985/8427b55da6456ab0dca8eacaf80b920e.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="a19f">Now, we are ready to run the server. let's configure some commands and check out the <b>package.json</b> file.</p>
    <figure id="9e70">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/abhinavkumar985/6e2b644787551d025992b5f2be1f68de.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">

Options

</div> </div> </figure></iframe></div></div></figure><p id="afac">Let's look at the configured script in package JSON.</p><p id="c452"><b>“dev”: “nodemon — inspect src/app.js”, </b>I am using <a href="https://nodemon.io/">nodemon</a>, that automatically run the file whenever its content changes.</p><p id="99ac"><b>"tunnel”: “ngrok http 8080” </b>This is a very important part. <a href="https://ngrok.com/">Ngrok</a> will create a public URL for our webhook and listen to the 8080 port.</p><p id="b46b"><i>Run both the npm script, one is to start the server in development mode the other is to get the public URL for webhook.</i></p><figure id="d716"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*FCj8FRPSwaowmq9IqrAkbg.png"><figcaption>Server and tunnel up</figcaption></figure><p id="4cf8">You will get the URL like <a href="https://028b9d62.ngrok.io">https://028b9d62.ngrok.io</a>. For Dialogflow fulfillment, you will need https secured server localhost will not work.</p><p id="d8ef">3. Now configure the URL in Dialogflow fulfillment.</p><figure id="13d6"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*TP2SAuzpGO8kbocw0vWGxw.png"><figcaption>Webhook configuration in Dialogflow</figcaption></figure><p id="d481">That's it. Now your webhook is ready to respond to the Dialogflow request.</p><p id="a53c">Let me know with a comment if you tried it or anything, really. Bye! Happy Coding!</p><blockquote id="f5ff"><p>I hope you found it interesting to read. If you’d like to support me as a writer, consider signing up to <a href="https://abhinavkumar985.medium.com/membership"><b>become a Medium member</b></a><b>. </b>It’s just $5 a month, as you get unlimited access to Medium.</p></blockquote></article></body>

NodeJS Webhook for Dialogflow Fulfillment

When you are building an agent on Dialogflow, it is important to set up webhook fulfillment especially when your agent grows and has a number of intents. It becomes difficult to manage those intent and intent handlers, especially when you are dealing with any 3rd party API or building a multi-channel agent within the default provided Inline Editor(Powered by Cloud Functions for Firebase). So, it’s a good idea to create and set up a webhook server from your local codebase.

So, let's create a NodeJS webhook fulfillment

Prerequisite: Beginner-level knowledge of JavaScript, NodeJS, ExpressJS, Dialogflow

Steps:

Create an agent, it will have Default Fallback Intent, Default Welcome Intent and enable webhook call for Default Welcome Intent

Now enable the webhook call for this intent. You can find the option in the fulfillment section at the bottom.

Similarly, enable webhook call for Default Fallback Intent. This option lets your agent call the webhook API with a post request. You can enable webhook calls for all those intents that required some backend processing, database query, or any this-party API integration.

2. Now let's create the webhook server.

create app.js file, add one API route with ‘/dialogflow’. All the agent webhook requests will be handled by this route.

When the agent will grow, it will have a number of intent based on different functionality. It is recommended to create a different intent handler file, based on the feature.

Now, we are ready to run the server. let's configure some commands and check out the package.json file.

Let's look at the configured script in package JSON.

“dev”: “nodemon — inspect src/app.js”, I am using nodemon, that automatically run the file whenever its content changes.

"tunnel”: “ngrok http 8080” This is a very important part. Ngrok will create a public URL for our webhook and listen to the 8080 port.

Run both the npm script, one is to start the server in development mode the other is to get the public URL for webhook.

You will get the URL like https://028b9d62.ngrok.io. For Dialogflow fulfillment, you will need https secured server localhost will not work.

3. Now configure the URL in Dialogflow fulfillment.

That's it. Now your webhook is ready to respond to the Dialogflow request.

Let me know with a comment if you tried it or anything, really. Bye! Happy Coding!

I hope you found it interesting to read. If you’d like to support me as a writer, consider signing up to become a Medium member. It’s just $5 a month, as you get unlimited access to Medium.