How To Connect ManyChat to DialogFlow

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 is originally made by Daian Gan, 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/daiangan/manychat-dialogflow-connector and click on “Begin Import”:

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

But this code doesn’t do anything yet, it is just saved to your Github account. You can compare it with saving a file on your Google Drive.

So to actually use this code for our integration, we need to put it live. And that’s where Digital Ocean comes in.

 

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

By the way, make sure that you check the Autodeploy checkbox, so that if you make a change in Github this would be automatically updated to Digital Ocean.

Following, you need to click on Edit plan:

For some reason, Digital Ocean automatically gives you the $24/month plan. But this is way too high for this simple integration.

So that’s why you need to click on Basic and select the $5/month plan:

Then, if you go back, you can just click on Skip to review:

And scroll to the bottom and click on Create resources:

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.

 

Create a ManyChat application

The next step is to create our own ManyChat application that works with the Digital Ocean app we created above.

So if you log in to ManyChat, you need to click on My profile at the left-bottom:

Click on Applications and select Create New Application:

Here, we need to set a title for our application (ManyChat Dialogflow Integration), put “-” in the description (you cannot leave this blank) and paste some JSON code:

And you can find the JSON code that you need to paste here in your Github repository.

So if you go to your Github repository (the one we created before), you can just click on manychat_json_app.json:

And then copy all the JSON code that is there and paste it in the JSON section of your ManyChat application:

Now, you need go to the tab “API Access” and give three permissions:

• View contact data (under Contact level methods)
• Manage contact data (under Contact level methods)
• Send messages (under Send API)

So you can just check those and click on Create the application at the right top:

 

Install the ManyChat Application on your page

Once you’ve created the application, you can see it in your Applications overview and click on the three dots and select Install:

Here you need to click on Install again:

And then select the Facebook page you want this integration to be installed on:

Once you’ve installed the app, you can click on to go to your app’s settings.

And here we need to set 4 settings:

• The server URL
• ManyChat API Key
• Dialogflow Project ID
• Dialogflow Agent ID

The server URL is the URL we copied before from Digital Ocean, so you can paste it over there.

To get your ManyChat API key: Go to Settings, choose for API and copy your ManyChat API key:

For your Dialogflow project ID, you can just head over to Dialogflow, click on the Settings of your agent (gear wheel icon) and you can see the Project ID over there:

Lastly, we need the Agent ID of your Dialogflow project. To get this, head over to Integrations and click on the Web demo:

Here, you need to copy the last part of the URL and click on Enable:

If you have pasted in all the correct settings, you can just click on Save:

Now we have successfully connected ManyChat to Dialogflow!

Let’s use this connection inside our ManyChat flows.

 

Set Default Reply Flow in ManyChat

The Default Reply is the message that appears when your chatbot doesn’t know the answer to a question.

So this is the perfect place to send the question to Dialogflow and check if Dialogflow can understand the question for you.

To do that, go to Settings in ManyChat, select Messenger and edit your Default Reply:

In your Default Reply, you need to add an action:

Choose for the ManyChat Dialogflow Integration (the name of your ManyChat application):

And select the language of your Dialogflow agent and hit Save:

Now you Default Reply flow looks like this:

And that’s it! Now every time the chatbot doesn’t understand the user, Dialogflow will be triggered.

Let’s see how we can create an intent in Dialogflow and respond with a ManyChat flow!

 

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

You can also understand multiple languages with this integration.

To do this, you need to go back to your Default Reply in ManyChat and change the language inside the Action from English to another one (for example ‘Dutch’ — my native language):

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.

 

Use this integration on all channels

Lastly, I want to show you how you can extend this to all channels that ManyChat supports.

Before, ManyChat only supported Facebook Messenger, but now they also support WhatsApp and Instagram (and maybe more in the future).

To do this, you need to do two things:

1. Add the ManyChat Dialogflow Integration action to the Default Reply of the channel you would like to use (just as we did above with Messenger)
2. Add a condition to your response flow

For the response flow, you need to start the flow with a condition:

And within that condition, you can check whether “Opted-in for Instagram” is “true”:

What this does, is that it checks if the user is an Instagram user or not. If it is true, we can reply with an Instagram message and if not we can reply with a Facebook message:

And if you want more channels, you can just add them to the condition!

 

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