Dialogflow Step by Step Guide

In this tutorial, you will learn the building blocks of Dialogflow by developing a chatbot which can answer user questions about a specific topic (Planets) by fetching the replies from a database.

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.

The answer that you see (e.g. "163 billion cubic kms") is coming from a database. In other words, it is dynamic, and you can change the answer by updating the data in the database.

Build the basic bot without the webhook

We will first learn the basic concepts of intents, entities and contexts before building the webhook. These are foundational concepts that you must know if you want to build non-trivial Dialogflow bots.

Intents

First, we will take a look at intents. Intents define what the user wants - i.e. they represent the user's intention.

---

Entities

Dialogflow entities allow us to capture values for specific types of objects.

---

---

Contexts

Contexts help you keep track of what has already happened in the conversation.

---

Note: without doing the step above (that is creating the basic bot without the webhook) the rest of this tutorial will not be of any help. 

Before you build your webhook

Now, we are ready to build the webhook which will actually fetch and display the data inside our PlanetsBot.

There are just a couple more things to do:

• Set an action for each intent which calls the webhook
• Make sure you turn on the "Call webhook" toggle on each intent

Here is what the UserAsksForAttributeOfPlanet intent looks like:

Note that the action is called getPlanetAttribute and we have toggled the "Enable webhook call for this intent" switch.

Similarly, this is what the UserChangesAttribute intent looks like:

The third intent is homework for the student. 🙂

Action

The action is a way to tell the webhook what piece of code you wish to execute.

For example, in the actual code which fetches data from the database, there are two code blocks.

The Action that you set will determine which code block is used.

Note, the code for these code blocks are actually from the RunKit notebook which I talk about later in this tutorial.

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.

Now select the JavaScript tab at the top, and copy the baseID as shown below

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.

Not working?

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.

Summary

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