Home / DialogFlow / Webhooks / The easiest way to understand Dialogflow webhooks
DialogFlow | Webhooks

The easiest way to understand Dialogflow webhooks

Are you tired of Dialogflow fulfillment tutorials which seem to be out of date by the time you read them?

What if I said there is a way to understand how Dialogflow fulfillment works without using code? Since there is no code, there is very little chance for this approach to become obsolete.

Use a REST API mock service

There is a service called Mockable.io which allows you to mock your API in no time.

First, go to the website and log in using your Google account. You should see a dashboard like this.

Click on the blue Manage button, and then create a new REST Mock.

At the top of the page, add test to the existing URL (note: your URL will be different), and change the Verb to POST.

Leave other settings as they are.

Now scroll down the page and copy paste the following text into the editor: (Note, I am assuming you are using API v2).

{
  "fulfillmentText": "This is a text response"
}

Scroll further down. First, turn on “Enable Request Logger”. Then click on the Save button.

You will see a message saying the Mock is stopped. This is completely expected.

Scroll down the page again, click on Start.

Now, you will see the button change color to green, meaning the service is available to use.

Create a new Dialogflow agent and copy/paste the URL into the fulfillment section (remember to use https as the prefix).

In your default welcome intent, enable the webhook.

Type Hi (or whatever will trigger the default welcome intent in your agent) into the Dialogflow simulator. You should see the response coming back from the mock service.

Benefits of using a mock API service

So why is this the easiest way to start learning about webhooks?

When I talk to people who don’t have much experience with programming, one of the things I have noticed is that they are not very comfortable with the sequence of steps involved in creating a webhook

  • you need a way to “capture” the JSON sent to your webhook URL
  • you need to parse this JSON to extract relevant information
  • you need to apply some business logic on the JSON data you received inside your code
  • you need to construct a response JSON in the exact format that Dialogflow expects

And naturally, to be able to do every single one of these steps, you already need to understand your programming language quite well.

The big advantage of this approach is that it takes the above steps and removes the hardest step – mastering a programming language. 🙂

So now, you have a way to understand the request-response exchange well without having to write code.

So here are some benefits of using a Mock API service:

Programming language agnostic

Like I mentioned, you can use this even if you don’t know how to code, or you are just learning the basics. (Although ideally, you are actually trying to learn coding. Otherwise, this approach can only take you so far).

Requests can be inspected

Remember I asked you to click on the “Enable Request logger”?

Go to the dashboard, and select “View Logs” option:

Click to expand the request.

Now scroll down and you see the request JSON within the payload:

A quick tip: you may want to copy the JSON from inside the Payload box into a more visualization friendly tool.

This is the exact JSON that is sent to your webhook.

Final response can be generated by copy/paste

By this, I mean that you can very easily copy some JSON mentioned in the documentation, paste it into the JSON response editor, and you are good to go.

Response can also be modified easily

Related to the previous point, it is also possible to quickly modify the actual JSON to slightly change it according to your specific need. If you were to try to make such small changes with code, you probably know that it is going to take you some effort to set it up.

Summary

Use a mock API service such as mockable.io service to start understanding how webhooks work. When you understand the request-response lifecycle well, you can then move on to using your programming language to write code to replicate the behavior of the mock API service.

Related Posts