Post
Ask Question

Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Day Three - Integrate And Test On Slack And Facebook Messenger

Chatbot Tutorial Roadmap

 
Since this is a vast topic and beyond the scope of a single article, I have divided the sections into multiple articles. In the first article, we saw how to create a chatbot using Google’s Dialogflow and test the bot in the Dialogflow console. We also saw how it could be integrated with Slack. The second article demonstrated how to create a custom chatbot using Microsoft’s Bot Framework and enable the webhooks in Dialogflow and return the response from the custom bot to Dialogflow intents as a fulfillment response. This third article of the series (this one) will demonstrate how to integrate the complete created bot in part two and three with Facebook Messenger and Slack and test the webhook response in the two environments. Following are the links of all three articles of the tutorial series about learning how to create a custom chatbot.
 
 
Prerequisites
 
The reader of this article is expected to have covered the first two articles in the series.
 

Deploy the Chatbot in Facebook Messenger

 
Our initial basic bot is completed. You can enhance it more as per your will and requirement. In this section, we’ll see how to deploy the bot on Facebook messenger as a chatbot to our custom Facebook page.
 
So, the need here would be like this. Suppose you have a Facebook page for your business/company and you need to deploy a feature of auto chatbot in that page so that any visitor can seek information or talk to that bot.
 
First things first; for the deployment of the bot to the Facebook page, we need to have a Facebook page.
  1. Open the Facebook URL and sign in with your existing Facebook credentials or create a new account.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. I am signing in with my existing Facebook account. It will ask to create a Facebook developers account, and yes, we need to, so click Next.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Provide the App Name (whatever you want) and contact email and click Next.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Pass the security check and click Submit.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. It will show the welcome message and ask to add your first product. Click on “Add Your First Product” button.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. The next screen you’ll see is the Facebook developer’s dashboard. Since we need to set up the Facebook Messenger, click on the button to setup messenger as shown below.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. You need to have an access token and a secret key for that. So, navigate to Settings and scroll down to the section that says Token Generation. Select an existing page if you have or create a new one as per your wish.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Select the type of page you want to create i.e. Community or Business.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Provide the page name and the category.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. You can skip the steps like providing profile pic or choose to apply one.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. In the next step, you’ll see the page created.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Now again go to settings and Token generation section and choose the newly created page.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. It will again prompt you for authentication. Do that.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. After the authentication, in the Token Generation section, we see now a Page Access token is generated. Copy that token and keep that at some location. We’ll soon need that.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. No, go to Settings->Basic to get the App Secret key as shown below. Copy and keep the App Secret key at some safe location, we’ll need that soon.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Go back to Dialogflow console’s Integration section and enable Facebook messenger option.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Follow the instructions shown on the popup.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Again, go back to Facebook’s developer's account and click Settings. Go to Webhooks section and click Setup Webhooks to provide the webhook to that copied call-back URL in the last,

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. In the New Page Subscription, i.e., the page opened after clicking setup webhooks, provide the Callback URL and verify token name that we stored earlier. Check the options like messages, postbacks, and optins as shown below. Click Verify and Save.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Once the webhook setup is complete, select the page to subscribe to webhook events. So, select your Facebook page there.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Click on the “Subscribe” button.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Once done, go back to the Facebook page and add a new button by clicking “Add a button” button as shown below.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Provide details for all the steps i.e. selecting Contact you feature for my messenger type. Select the option to send messages.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger

Live Chatbot on Facebook

 
After performing all the steps in the last section, we can say that our bot is successfully deployed and integrated with our Facebook page. Time to test it.
  1. Click on newly added “Send Message” button and from the context menu click “Test Button”.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. As soon as the Test Button link is clicked, the chatbot will open and note that the name of the chatbot is CodeBusiness. You can start typing your request to book a table and it will respond as expected.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
Our bot seems to be working well. Like-wise you can test everything that we tested on the BotService on Lex like talking to a human, seeing slot information and all. You can also provide the tester permissions to the user you want to see this bot when they see your page on Facebook. I find it very cool.
 

Deploy the Chatbot in Slack

 
You can also deploy and test the chatbot in Slack.
  1. Go to the Integrations section of the Google Dialogflow console and enable Slack.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Follow the instructions as shown in the popup.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Create your new slack app and get the needed details to be filled in this section.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
  1. Open the newly created Slack app and type “Hi”. It will respond as expected.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger

    So, we get the response from the webhook.

    Create Chatbot Using Microsoft's Bot Framework And Dialogflow API - Integrate And Test On Slack And Facebook Messenger
 
Yay!!!
 

Conclusion

 
In this detailed article, we learned how to integrate the chatbot developed using Google’s Dialogflow API and Microsoft’s Bot Framework on Facebook and Slack. The bot integration could also be done to other platforms like Alexa, Cortana, Twilio, etc - just a matter of exploring and playing with it.


Similar Articles