In this tutorial, I will explain how you can connect ManyChat to DialogFlow and use Google’s AI in your ManyChat chatbot.
With this integration, you can:
- Understand the intent of the user and reply with a ManyChat Flow
- Handle entities and use the value of entities in your ManyChat flow
- Handle multiple languages inside your ManyChat chatbot by using DialogFlow
Use this connection on all channels of ManyChat
The best part: the first two months it’s free and after that, it will only cost you $5 per month!
Set up of the connection
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 ManyChat and DialogFlow.
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)
- ManyChat 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. This code was originally made by GAN Media, and this code is practically the integration between ManyChat 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/manychat-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 manychat-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 fill in the Service account name, set the Role to Owner (Project -> Owner) and the Key Type to “JSON”:
If you clicked on “Create”, a JSON file will be automatically downloaded to your computer (make sure to save it!), which will look something like this:
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 ManyChat API Key
Now, head over to ManyChat, click on Settings, choose for API and copy your ManyChat API key:
Then, head back to Github, and edit the manychat-dialogflow.py file (just like I did before with the config.json file).
On the 39th line, you need to paste your Dialogflow Project ID and on the 47th line you need to paste your ManyChat API Key:
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”:
Following, you need to give your app a name and click on “Next”:
Also, in the next screen, just 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 ManyChat 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 Reply Flow in ManyChat
Again, head back to ManyChat, choose for Settings, go to Messenger and edit your Default Reply:
The Default reply 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 Reply, you need to add:
- Create action –> Set custom field “language_code” to “en”
- Send message –> Dynamic
So it looks like this:
NOTE: The Custom Field must be ‘language_code’, it cannot be a different one!
And within the Dynamic request, you need to paste the URL from Digital Ocean to the “Request URL” and set the Request Body to “Full Contact data”:
And that’s it! Now every time the chatbot doesn’t understand the user, Dialogflow will be triggered.
So now we created the integration, we can create an intent in Dialogflow and respond with a ManyChat flow!
Let’s see how we can do that.
Create Intent in Dialogflow and respond with ManyChat flow
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 Manychat flow, 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 “flow”:”content[number]”:
NOTE: Make sure you use double parentheses (“), single parentheses (‘) will not work!
Here, the “content[number]” corresponds to a specific flow in ManyChat. But how do we get the number of the right flow?
Just go inside one of your ManyChat flows, go to the URL bar in your browser and copy the last part of the URL:
That’s the part that you need to add in the custom payload of Dialogflow. And now if this intent is triggered, you will automatically respond with a ManyChat flow!
Handle entities in DF and send to ManyChat
But as you already could see from the screenshot above, I also have an entity topping, so how do you handle that?
For every Dialogflow entity, automatically a custom field in ManyChat is created. So if the entity in Dialogflow is called “topping”, the custom field in ManyChat will be “topping”.
And then, you can just create a condition in your ManyChat flow to handle different values of the entity:
Understand multiple languages with DialogFlow and ManyChat
The last thing you can do with this integration is understanding multiple languages.
To do this, you need to go back to your Default Reply in ManyChat 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 ManyChat 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 ManyChat chatbot?
Let me know by leaving a comment below.