How To Connect ManyChat to DialogFlow

By Joren Wouters Updated on

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
  • And even handle multiple languages inside your ManyChat 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!

 

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:

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

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

create-repository-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/manychat-dialogflow-integration and click on “Begin Import”:

begin-import-github

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

integration-code-github

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

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 fill in the Service account name, set the Role to Owner (Project -> Owner) and the Key Type to “JSON”:

google-create-service-account-key

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:

google-json-key-example

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:

github-config-click

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:

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

dialogflow-create-agent

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

dialogflow-copy-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:

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:

paste-mc-df-keys

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

digitalocean-select-github-repository

Following, you need to give your app a name and click on “Next”:

digitalocean-name-app

Also, in the next screen, just click on “Next”:

digitalocean-step-3

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 ManyChat to Dialogflow. In general, this will last a few minutes. If Digital Ocean has built the app, you will get this screen:

digitalocean-copy-app-url

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:

manychat-edit-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:

manychat-flow-default-reply

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

manychat-edit-dynamic-request

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:

dialogflow-simple-intent

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

dialogflow-add-custom-payload

Inside the Custom Payload block, type in “flow”:”content[number]”:

dialogflow-manychat-response-flow

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:

manychat-flow-from-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:

manychat-handle-dialogflow-entities

 

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

manychat-change-language-code

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

dialogflow-add-language

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

connect-manychat-dialogflow

Leave a Reply