Echo Chat Bot In Facebook Messenger Using Microsoft Bot Framework

In this article, we will learn about an Echo bot configuration for the Facebook messenger channel and its required resource list.

Chatbots

 
A chatbot acts as a virtual agent with users. It is trained by using Artificial Intelligence (AI) software used to stimulate conversations with users in a natural language through telephones, websites, messages, and mobile apps. It saves time and money and improves the customer experience, reduces the need for human intervention for any business in all messaging channels. A chatbot responds based on the input from a user to any messaging channel, these are smart chatbots that answer questions. They receive the questions, process them by understanding the question using cognitive services (LUIS.AI, IBM Watson, etc) and then deliver the answer that the user needs through the messaging channel. Chatbots are more useful to give quick support to customers (Users) without any resource (employment) dependencies, we can utilize these chatbots by engaging in customers in Enterprise level as a virtual assistant. A chatbot is able to speak, listen, and understand your users with native integration to Azure Cognitive Services.
 
 

Chatbots Benefits

  1. To automate a business process,
  2. For 24/7 Customer support,
  3. Supports in multiple messaging platforms like Skype, Teams, webchat in the web site, Facebook Messenger, WhatsApp, telegram, etc,
  4. Connecting with cross-platform services,
  5. Proactive interaction with customers or users.
  6. Serverless and PAY-AS-YOU-GO services (Cost-efficient).   
Now we start with creating azure resource group & web app bot services (PAAS) services for echo bot in the facebook messaging channel, Go to http://portal.azure.com/ and Login with your Azure credentials. Now create a new resource group to maintain all our app services in a single resource group.
 
Steps
  1. Login to your http://portal.azure.com/ 
  2. Go to Resource group and  click new to create a new resource group
 
 
Click on Review + Create button and it will validate with subscription details, naming for the new resource group name and Selected region to deploy our resources in selected datacenter regions.
 
Subscription: You can select your subscription details(one id has multiple subscription details, as of now I'm showing with Azure for students subscription for demo).
Resource Group: AZRG-PAAS-CBPR (Follow some coding standards to maintain multiple resource groups for your organization. Here I'm following simple naming standards like AZRG(Azure Resource Group)-PAAS(Platform as a Services)-CBPR(Chatbot Program Review)).
Resource Details:  We need to choose resource deployed regions(choosing data center regions to deploy our resource group).
 
These details are very important to maintain in the documentation for the developer's future use, we can get quick customer support from Microsoft by using the above details in the resource recovery time period.
 
 
 
Once validation is passed, please click on the create button to create a new resource group.
 
Now go to home and click on resource group to validate whether new resource group are created or not. Open resource group and click on Add button shown in the below figure.
 
 
 
Click on +Add button to add apps to the resource group.
 
 
 
Type Web app bot in search for quick results or else you can click on AI+ Machine learning. In this category, we have an option to Web App Bot.
 
 
 
Click on the create button and fill the details as shown in the below figures.
 
 
 
We need to fill Bot Handle(Bot app service name), Subscription details, Resource group, Location, Pricing tier, App Name(Default generated), Bot Template with C#.Net, App service plan and Application insights & its location. These fields are mandatory to onboard a new chatbot.
 
 
 
 
Click on Create button to create web app bot services.
 
 
 
Once the deployment is done, we get below four services.
  1. Web App Bot.
  2. Application Insights
  3. App Service plan
  4. App Service
Register an account at http://developers.facebook.com/ and create a new app for our Facebook page messenger channel.
 
 
 
Creating a new App with a valid name and contact email id is mandatory. In the future, if we’re going with any app review for accessing all webhook services from facebook, they’ll communicate with register email id based on the app id.
 
 
  1. Display Name (Facebook Developer App Name),
  2. Contact Email (Email ID is mandatory to communicate for facebook app review),
  3. Click on Create App ID button to create a facebook developer app.
Once you click on to create an app id button, it will be redirected to security check to complete and Click on submit.
 
 
 
Now a new facebook app is created and we need to collect information like App ID and App Password as shown in the below screenshot, click on Advanced options under settings to allow API access to app settings.
 
 
 
 
You need to add webhooks and messenger products for activating the messaging channel. Now go to setting under Messenger and generate a page access token, for newly created facebook page has admin rights to generate a page access key. I’ll click on add existing page to generate a page access token.
 
 
 
It will check with permission to continue the activity, click on Continue as {Name of the Facebook developer app admin and Admin of the page} example shown in below figure.
 
 
 
Select our Facebook page to generate the page access token key, make sure to selecting proper Facebook page which we have admin rights in and click in Next.
 
 
 
Click on Next.
 
 
 
Click on Done. Now we linked facebook page and Facebook developer app, we can do limited business integrations with this facebook developer app. For every business requirement, we need to get approval from facebook by providing our page and app details to review the app.
 
 
 
See in below screenshot, our page is added in this developer app but the token key is not generated. Click on Generate token for a new key and make sure to please maintain it in a separate notepad or sticky notes as per your convenience.
 
 
 
Check on I understand and Copy the token and keep it for safety.
 
 
 
Still, our products are not enabled and we can check that empty status  is generated. Click on Add Callback Url and go to Azure resources now to enable webhooks integration.
 
 
 
 
 
Now we have AppID and App Password from a Facebook developer app, page access token key from messenger product, and Page ID from the facebook page.
 
App ID: 41XXXXXX2XXXX33,
App Password: 8XXXXXXXXXXXXXXXXXXXXX
Page Access Token:
EAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX9XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXsXKrVWg7XrJ
Facebook Page ID: 2124191797878417.
 
Switch to your Azure portal and open web app bot service, select channels. In the channel, you need to choose the Facebook messaging channel to add this webhook URL as shown in the below figure.
 
 
 
Fill in the details provided above for the facebook messaging channel to enable facebook messenger channel to your page.
 
 
 
Copy call back URL token and paste it in facebook messenger webhooks URL to link app.
 
 
 
Click on the Save button.
 
 
 
Again switch to Facebook developer app and add call back URL's from Azure Facebook messaging channel to facebook developer app to enable webhooks.
 
Click on Verify and Save button (make sure your app id, app password, facebook page id and the page access token is given as shown in the above screenshot).
 
 
 
Now webhooks are enabled and facebook channel is enabled but we need to activate messenger for messaging.
 
 
 
Now webhooks are enabled as shown in the below figure. Click on Add Subscriptions button to enable messaging services.
 
 
 
Select messages, messaging _postbacs, messaging options, message_deliveries and click on save button.
 
 
 
Now go to the messenger and open your facebook page messenger and send any message to activate messenger product in the facebook developer app.