In this tutorial, we will be learning the following:
- how to create simple webhooks in Dialogflow
- how to access data from the webhook
This guide is meant for technical non-programmers. At the same time, you will still be able to get some useful stuff from this guide if you are a programmer new to Dialogflow.
A small note before you start
Even though Dialogflow is quite friendly for non-programmers, you still need to be fairly technical to be able to use it (this is why I repeatedly use the phrase "technical non-programmers" on my website).
In that sense, this tutorial is also a good test for your technical skills.
What we will be building
We will be building a PlanetsBot. What can the PlanetsBot do?
It can answer questions about planets, naturally!
Notice that in the first response, the bot is able to understand that we are asking for a specific attribute (volume) of a planet (Mars). And then in the second response, it understands that "its" refers to the planet Mars.
Build the basic bot without the webhook
First build the basic bot without the webhook. To learn how to do that, check out my free Step by Step Dialogflow course and watch the following chapters in sequence: Intents, Entities and Contexts.
Note: without doing the step above (that is creating the basic bot without the webhook) this tutorial will not be of any help.
The best database for non-programmers building Dialogflow bots
For non-programmers, working with spreadsheets is easy. But working with databases is not. A good compromise is Airtable - which is a sort of a combination of a spreadsheet and a database.
On the one hand, it is trivial to input data into Airtable because everything looks like a grid of cells.
On the other hand, you can do some database like operations - notably enforce data types and create links between table records - that you cannot do in regular spreadsheets like Excel and Google Sheets.
Finally, Airtable provides an easy to use API to move data in and out of their tables (if you ever need to migrate away) and also has probably the best UX for non-programmers who wish to do complex workflows without learning how to code.
All this to say, I have decided to use Airtable as the database for this tutorial. 🙂
Airtable Basic Concepts
Instead of trying to define them, I will just link to this Wikipedia article which explains it succinctly.
Create an Airtable table for the Planets data
You don't have to input the data by yourself. You can simply use the data from my Airtable table.
1 First, sign up for Airtable (referral link - I get free Airtable credits if you sign up and confirm your account).
2 Make sure you are logged in to your Airtable account.
3 Then click on the Copy Base link at the bottom of this table and you will have a replica of all the data inside your own Airtable account!
Build the webhook
Once you have your Airtable "database" ready, it is now time to write the webhook code.
However, you will not be writing any code, because it is possible to "clone" my Runkit notebook and get the code for your webhook.
Here are the steps:
1 Create a Runkit account
First go here and create a Runkit account.
2 Clone the Runkit notebook
Then, go to the URL where I have created my Runkit notebook. You should be logged in to Runkit to be able to do this step correctly.
Then click on the Clone and Edit this document at the top of the page.
3 Click on endpoint link
Click on the endpoint link at the top of the document.
You will actually see the following error: (don't worry, it is expected)
4 Get Airtable API key
Log in to your Airtable account and go to Account settings.
Copy your Airtable API key and save it.
5 Get Airtable Base ID
Now go to the API page of your Airtable account. Again, you should be logged in.
Click on the Planets base you just copied into your Account. (Note: you probably will not see as many bases in your account if you just created it).
Click on the Authentication link on the left panel.
6 Add API Key and Base ID to Runkit environment settings
In your Runkit account, go to settings. (Again, you should be logged in)
Scroll down to the Environment Variables section.
Now add an environment variable called AIRTABLE_API_KEY and paste the value you copied in step 4. Then create another environment variable called PLANETS_BASE and paste the value you copied in step 5. Runkit automatically saves these values once you paste them in, so no need to explicitly save them.
7 Test the endpoint
Now go to the AirtableDF notebook you cloned in step 2 and click on the endpoint link again. This time you should see some actual data coming back from your Airtable table.
Even after those two minutes, if you don't see some output message such as "The Volume of Earth....", your set up is not working properly. Retrace your steps.
8 Publish the notebook
Click on the publish link.
You don't need to fill anything out. Click on the Publish button in the popup.
9 Copy the endpoint link
Now click on the endpoint link again after publish.
Copy the endpoint URL from the browser bar. Note that it ends with .sh.
10 Paste the URL into Dialogflow fulfillment
Go to your Dialogflow agent and paste the URL into Dialogflow fulfillment.
Don't forget to save it by clicking on the blue Save button. 🙂
11 Test it in your Dialogflow simulator
Try a query like "what is the color of Mars" inside the Dialogflow simulator. You should see a response similar to the following.
Access the endpoint in your browser, just as you did in step 7. Do you see an error message? If yes, wait for a few minutes and try again.
On the other hand, if you do see a proper output when you access the endpoint in your browser and you see your query fail inside the simulator, there is something else going on. Please copy the error message from inside the DIAGNOSTIC INFO of your Dialogflow simulator and leave a comment with the error message that you see.
12 Update the data inside Airtable and test again
Now, you actually have an end to end webhook working. Not only that, it is actually fetching data live from your Airtable table.
To test this, tweak the value of the attribute above.
Test it in the Dialogflow simulator again. All data changes happen in real time in Airtable, so you should see the updated value right away inside the simulator.
If you have reached this far and have gotten everything working without any issues, congrats! You have built a working webhook which accesses data from a real database using Dialogflow.
Now you can fill out all the entries marked as n/a in the Airtable base with real data and complete the PlanetsBots. 🙂