How To Connect Chatfuel to Dialogflow

In this tutorial, I will explain how you can connect Chatfuel to Dialogflow and use Google’s AI in your Chatfuel chatbot.

With this integration, you can:

• Understand the intent of the user and reply with a Chatfuel flow
• Handle entities and use the value of entities in your Chatfuel flow
• And even handle multiple languages inside your Chatfuel chatbot by using Dialogflow

The best part: the first two months it’s free and after that, it will only cost you $5 per month!

 

The chatbot strategy

Before we are going to create the integration, I will firs tell you how the chatbot strategy works for this integration.

It works in 4 simple steps:

1. If someone messages your Chatfuel chatbot and the chatbot does not recognize the input, the Default Answer will be triggered.
2. From the Default Answer, we will send a request to our own server. That server is the integration between Chatfuel and Dialogflow.
3. With the server, we send the input from Chatfuel to Dialogflow. In Dialogflow, we then check if the input matches with a Dialogflow intent
4. If the input matches with a Dialogflow intent, we can automatically respond with a specific block or flow in Chatfuel.

The tutorial is split into two parts:

1. We will first set up the Chatfuel-Dialogflow integration on our own server
2. Then, we will create the flows in Chatfuel and I will show you how you can use this integration inside your chatbot

Important: You don’t need to code yourself! You only have to edit some code, which is pretty simple.

By the way, I understand if this article gets a bit technical, but don’t worry. If you follow every step I take, you will get the connection between Chatfuel and Dialogflow.

 

Set up the connection

For this connection, we need 4 accounts:

• Github account (because we need to copy some code for the integration)
• Google account (because we use Dialogflow)
• Chatfuel account 
• Digital Ocean account (this is where we host the code of Github)

If you don’t have any of the four accounts, I recommend you to create those, because you will need them!

 

Copy the code from Github

First, we will start by copying the code from Github. I created some code for you that you can just copy (for free!), which is the integration between Chatfuel and Dialogflow.

So head over to your Github account and click on “New” next to “Repositories”:

By the way, “Repository” is just a fancy name for “folder” 😉

Then, fill in the name of the repository, set the repository to “Private” and click on “Create repository”:

Once the repository is created, you need to scroll down and click on “Import code”:

Here, you need to fill in https://github.com/chatimize/chatfuel-dialogflow-integration and click on “Begin Import”:

After this, you would see your Github repository with the following code:

In the rest of this tutorial, we are only going to change the config.json file and the chatfuel-dialogflow.py file, so don’t worry about the rest of the files.

 

Create Google Cloud Project

Next, we need to create a new project in Google Cloud.

So, go to your Google Cloud Console, and click on “Select Project” (or if you already have a project, the name of the project will appear there):

Then, a pop-up will appear and you need to click on “New project” (on the upper-right corner):

And ultimately, you need to fill in the project name and create the new project:

 

Create Google Service Account Key

Once you’ve created your Google Project, you need to go to the Google Authentication Page and click on “Go to the Create Service Account Key page”:

Then, you need to select the right project:

Following, you need to fill in the Service account name and click on Create and Continue:

And set the role to Owner and click on Continue:

Eventually, just click on Done. Here, you will see an overview of your service accounts, and you need to click on the one you just created:

And then go to Keys, click on Add Key and choose Create new key:

Set the Key Type to JSON and click on Create:

If you clicked on “Create”, a JSON file will be automatically downloaded to your computer (make sure to save it!).

NOTE: Don’t share this JSON key with anyone else besides yourself! If you give someone access to that key, they will have access to your Google account and that is not something that you want.

Now, go over to Github and click on the config.json file:

Then, you can edit the JSON file by clicking on the pen icon in the upper-right corner:

And eventually, paste your JSON key file there and click on “Commit changes” at the bottom:

So far so good, let’s move on to Dialogflow!

 

Create DialogFlow agent and get Project ID

If you go over to Dialogflow, you need to click on the Settings icon (upper left corner) and click on “Create new agent”:

Then, you need to fill in the Agent name and select a Google project (make sure you connect it to the Google Project we’ve set up before):

If the agent is created, go to the Agent settings and copy the Project ID:

Paste this Project ID somewhere, because we will need it later on!

 

Get Chatfuel Broadcasting API Token and Bot ID

Now, head over to Chatfuel, click on Configuration, scroll down until you see “Broadcasting API Token” and copy your Chatfuel Broadcasting API Token:

Also, you need to know the Bot ID of your chatbot in Chatfuel. You can grab your Bot ID from the URL in Chatfuel that comes after /bot/:

Then, head back to Github and edit the chatfuel-dialogflow.py file (just like I did before with the config.json file).

On the 19th line, you need to paste your Chatfuel API Token, on the 20th line you need to paste your Chatfuel Bot ID and on the 21st line you need to paste your Dialogflow project ID:

Now the code on Github is ready. But it is just code, it is not on a server yet, so it will not do anything.

Therefore, we need to host this code on a server… (this sounds a bit techy, but it is actually really simple).

Let’s move on to Digital Ocean!

 

Host code on Digital Ocean

If you haven’t created an account at Digital Ocean yet, I recommend using this link to create an account (it will give you $100 free credit in the first two months).

When you’ve created your account, go to Create (upper-right corner) and choose “Apps”:

Then, connect your Github account to Digital Ocean:

And choose the right Github repository in Digital Ocean and click on “Next”:

Also, I recommend activating the auto-deploy code changes, because then every time you update your code on Github in the future, the integration will be automatically updated.

In the next screen, just click on “Next”:

Then, you need to give a name to your integration and click on Next:

Now, we need to choose the right Pricing plan. So you need to select the Basic plan, set the Basic size to $5 and click on “Launch” at the bottom of the page:

Digital Ocean will now create the App, which means that we can use it to connect Chatfuel to Dialogflow. In general, this will last a few minutes. If Digital Ocean has built the app, you will get this screen:

Here, you need to copy the URL displayed below the title, because we will need this later on.

 

Set Default Answer in Chatfuel

Again, head over to Chatfuel, go to Automation -> Blocks and select the Default Answer.

The Default Answer is the message that appears when your chatbot doesn’t understand the user. And that’s when you need Dialogflow to handle the question asked by the user.

In your Default Answer, you first need to set the User attribute {{language_code}} to “en”:

NOTE: The User Attribute must be {{language_code}}, it cannot be a different one!

Then, you need to choose the JSON element. Here, you need to set the Type to “Post”, paste the Digital Ocean URL under URL, set the Send to JSON and paste the following code:

{

“messenger_user_id”: “{{messenger user id}}“,

“last_input”:”{{last user freeform input}}“,

“language_code”:”{{language_code}}”

}

And that’s it! Iif you click on Test Request you should get a “200 OK” response, which means it is working.

Now every time the chatbot doesn’t understand the user, Dialogflow will be triggered.

So we created the integration, we can create an intent in Dialogflow and respond with a Chatfuel flow!

Let’s see how we can do that.

 

Create Intent in Dialogflow and respond with Chatfuel Block

I already went ahead and created a simple Dialogflow intent that triggers when someone wants to order a pizza:

Then if you want to reply with a Chatfuel block, you need to scroll down to “Responses”, delete the default text response and add a new response with “Custom Payload”:

Inside the Custom Payload block, type in “block”:”[block-id]”:

NOTE: Make sure you use double parentheses (“), single parentheses (‘) will not work!

Here, the “[block-id” corresponds to a specific block in Chatfuel. But how do we get the block ID of the right block?

Just go to one of your Chatfuel blocks, go to the URL bar in your browser and copy the last part of the URL:

That’s the part you need to add in the custom payload of Dialogflow. And now if this intent is triggered, you will automatically respond with a Chatfuel block!

By the way, it is not possible to automatically send the user to a Chatfuel flow. If you want to do that, just send them to a Chatfuel Block and add the “Redirect to Flow or Block” element (we will also do this in the next section).

 

Handle entities in Dialogflow and send to Chatfuel

But as you already could see from the screenshot above, I also have an entity called topping, so how do you handle that?

The first thing we need to do is switch to a Chatfuel flow. So, just create a flow inside Chatfuel called “Order Pizza Flow” and then add the “Redirect to Flow or Block Element” inside your Chatfuel block:

For every Dialogflow entity, you need to create a user attribute inside Chatfuel. Also, the name of the user attribute must be the same as the name of the entity. In our case, the Dialogflow entity is called topping, so the name of the user attribute in Chatfuel must be topping.

Then, inside the Chatfuel flow, we can add a condition to send different messages when somebody said they wanted to have a topping on their pizza and when they did not mention any topping:

 

Understand multiple languages with DialogFlow and Chatfuel

The last thing you can do with this integration is understanding multiple languages.

To do this, you need to go back to your Default Answer in Chatfuel and change the {{language_code}} from ‘en’ to another one (for example ‘nl’ for Dutch):

Then, you need to go to Dialogflow and click on the Plus sign next to “en” (in the upper left corner):

And add an additional language in the settings of your Dialogflow agent:

That’s it! For the additional language, you can also create intents and handle entities, just as I showed you above.

 

Now It’s Your Turn

And that’s how you create a connection between Chatfuel and Dialogflow.

One last thing: A common question people ask is how many requests you can handle with this integration. Based on my calculations, you can handle 4,000,000 requests per month with this integration, so that will have you covered!

It’s a bit of work, but then you can use Google’s AI in your chatbot and make it smarter, for only $5 a month.

Now, let me ask you: What do you think of this integration?

And do you already use Dialogflow inside your Chatfuel chatbot?

Let me know by leaving a comment below.