How To Connect Chatfuel to Dialogflow

By Joren Wouters Updated on

YouTube video player

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.

chatfuel-dialogflow-chatbot-strategy

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:

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”:

new-repository-github

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”:

chatfuel-dialogflow-github

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

import-code-github

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

import-chatfuel-dialogflow-code

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

chatfuel-dialogflow-code-github

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):

google-cloud-select-project

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

google-cloud-new-project

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

google-cloud-create-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”:

google-authentication-page

Then, you need to select the right project:

select-chatfuel-google-project

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

chatfuel-google-service-account

And set the role to Owner and click on Continue:

chatfuel-google-service-account-role

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:

chatfuel-google-service-accounts

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

google-service-account-new-key

Set the Key Type to JSON and click on Create:

chatfuel-google-json-key

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:

chatfuel-dialogflow-config

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

github-config-edit

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

chatfuel-paste-json-key

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”:

dialogflow-add-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):

chatfuel-dialogflow-agent

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

chatfuel-get-dialogflow-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:

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/:

chatfuel-bot-id

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:

chatfuel-dialogflow-code

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”:

digitalocean-select-app

Then, connect your Github account to Digital Ocean:

digitalocean-connect-github

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

chatfuel-dialogflow-select-repository

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”:

digitalocean-step-3

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

chatfuel-dialogflow-digital-ocean-app

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:

digitalocean-right-pricing

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:

chatfuel-digital-ocean-url

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”:

chatfuel-default-answer-set-attribute

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}}
}

chatfuel-json-api-dialogflow

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:

dialogflow-simple-intent

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”:

dialogflow-add-custom-payload

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

dialogflow-custom-payload-chatfuel

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:

chatfuel-bot-block-id

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:

chatfuel-redirect-to-flow

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:

chatfuel-condition-dialogflow-entity

 

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):

chatfuel-dialogflow-multiple-languages

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

dialogflow-agent-add-language-chatfuel

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

dialogflow-select-additional-language

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.

 

Comments (4)

  1. Viv

    Hey,

    Thanks for sharing this easy-to-follow steps. I ran into issues when trying to deploy the Digital Ocean droplet after creating app there. I’ve tried several time and even redo the steps from the beginning but I kept getting failure deployment. On your instruction video, you only have one component package (web service and docker), but on mine I saw two packages that also have python in it. And the repository plan instead of $5/month it’s $10/month because it created two packages. The reply fails with a Deploy Error: Container Terminated and on another try it gave me ‘DeployContainerExitNonZero’ error.

    What am I doing wrong? this is my repo: https://github.com/vnsavitri/chatfuel-dialogflow-brev

    1. Joren Wouters

      Hey Viv! Can you send a video of your setup to info@chatimize.com? Then, I can have a better look at it. Just troubleshooting from a comment is a bit hard with these kinds of integrations 🙂

      1. Steven

        I’m having the same problem. Was a resolution determined?

        1. Joren Wouters

          Hey Steven! Yes, it was. If you want, you can send an email with a video as well 🙂

Leave a Reply