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

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

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/daiangan/manychat-dialogflow-connector and click on “Begin Import”:

github-begin-import

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

manychat-dialogflow-github-repo

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

digital-ocean-free-credit

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

digital-ocean-app-github-repo

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:

digital-ocean-app-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:

digital-ocean-change-price-plan

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

digital-ocean-app-skip-review

And scroll to the bottom and click on Create resources:

digital-ocean-app-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:

digitalocean-copy-app-url

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:

manychat-my-profile

Click on Applications and select Create New Application:

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

manychat-application-settings

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:

manychat-json-github

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

manychat-app-paste-json

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:

manychat-create-the-application

 

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:

manychat-install-application

Here you need to click on Install again:

manychat-confirm-install

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

manychat-application-install-page

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:

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:

dialogflow-copy-project-id

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

dialogflow-integrations-web-demo

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

dialogflow-agent-id

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

manychat-dialogflow-app-settings

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:

manychat-edit-default-reply

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

manychat-default-reply-action

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

manychat-dialogflow-integration-action

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

manychat-dialogflow-action-settings

Now you Default Reply flow looks like this:

manychat-dialogflow-default-reply

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:

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

manychat-handle-dialogflow-entities

 

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

manychat-dialogflow-language

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.

 

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:

manychat-response-flow-condition

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

manychat-condition-instagram-channel

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:

manychat-response-instagram-facebook

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.

 

Comments (16)

  1. Pat

    At first, I have only English language. But right now, I have added 2nd languages in Dialogflow. Since I want to test whether it’s working or not first, I just changed language_code on Manychat from ‘en’ to ‘th’ but seems like it always replies to me in English. Do I miss any steps? Could you please help me with that? Thank you

    1. Joren Wouters

      Hey Pat! Could you send a video of your setup in Dialogflow and ManyChat to info@chatimize.com? Then, I can have a look at it!

  2. Mark

    Hi Joren,
    thanks for your guide, but it seems that it applies to the Dialogflow ES version only. Have you tried to connect ManyChat to DialogFlow CX as well?

    1. Joren Wouters

      Hey Mark! That is true, it only applies to Dialogflow ES. I haven’t tried Dialogflow CX, but I do not think my integration will work with that.

  3. Sandra

    Hello, thank you for this very interesting tutorial. Unfortunately when I test the chatbot, I don’t have intent detection.
    I tested the request in the dynamic block and the server gives me an internal error.

    1. Joren Wouters

      Hey Sandra! I just updated this post and the video to a new version. Could you use the new version to see if that works?

  4. paul

    how can I text Responses from Dialogflow to manychat – for understand Custom Fiel.
    I was try,
    ” you order $topping pizza”
    ” you order #topping pizza”
    But the manychat not display the as: “you order veggie pizza”.

    1. Joren Wouters

      Hey Paul! Are you creating this response inside Dialogflow or inside ManyChat?

      1. paul

        that response inside dialogflow

        1. Joren Wouters

          If you use “$topping” inside Dialogflow, it should work. You can always test it in the Dialogflow console itself whether it gives the desired response 🙂

  5. paul

    I using your old version. Should I update that.?

    1. Joren Wouters

      Yes! I just updated the video and this post, so I would recommend updating to the new version!

  6. Zealot

    Can I create a multil lingual bot on manychat and it should be able to reply to whatsApp group messages

    1. Joren Wouters

      Hey Zealot! Unfortunately, WhatsApp does not allow bots in WhatsApp groups, so this it not possible.

  7. Eric

    Hi, I installed Whatsapp on my Manychat. I saw that the Dialogflow agent saw the message from my customer on whatsapp and it goes to the correct intent. BUT the whatsapp does not show the response from the Intent.

    I created another message block after the Dialogflow block and it will show on my whatsapp.

    Please advise?

    Thank you very much

    1. Joren Wouters

      Hey Eric! Are you using the {“flow”:”content_xxx”} as response? Or are you using the Text Response?

Leave a Reply