The year 2017 will open a new era of how humans interact with digital services. Chatbots are the new interface for humans to interact with computers. Chatbots allow us to get the same digital services that we have been using but without the need of any installation of an app. And that is not even the best part of Chatbots. Chatbots do all the stuff using natural language.
So we can just say stuff like “Order A Game of Thrones book from Amazon”. The Chatbot sees the rest of the things and will order on your behalf. All this happen without even installing or opening Amazon App.
So when Facebook first announced the Messenger platform last year, I started learning about it and created some of my pet projects. I wanted to write tutorials about my experiences but was very busy with other kinds of stuff. But now, I have decided that I will continue posting some new tutorials related to ChatBots and Natural Language Processing.
We are going to make a simple messenger chatbot which will just reply the same thing back that it received to the user. So suppose if I message “Hiii” to the Bot, it will reply “Hiii” back to me. I know this is very simple and not of any use. But this is like the Hello World project for people who want to learn how to make ChatBots.
Let’s Get Started. 😀
For this facebook messenger bot to work online, we need to host it somewhere. So for this tutorial, we will be using Heroku as our hosting platform. For this, we need to have Heroku installed on your machine.
If you have not installed the Heroku CLI installed, go to this page and install it.
Apart from Heroku, we will also need some libraries that I have added to requirements.txt in github repo.
Part #1: Creating Webhook
Step 1: Open Terminal or Command Prompt and type this command
git clone https://github.com/adityathakker/fb-messenger-chatbot.git
Step 2: Change the directory to the fb-messenger-chatbot directory.
Step 3: Now create a new Heroku app that will be used to host our Facebook Messenger Bot.
Take a note of the link that is provided after creation. Which in our case is “https://serene-forest-36685.herokuapp.com/”
Step 4: Finally, just push the whole project to Heroku so that it becomes live.
git push heroku master
Part #2: Creating Page For Messenger Bot
Step 1: Go to Create New Page link.
Step 2: Click on Brand or Product section.
Step 3: Select the category of the page as App Page and type the name of your Facebook ChatBot. Finally, click on Get started button.
This will create a new page with the given information. If you want, you can add more details to the page like description, photo, cover and more.
Part #3: Creating App and Hosting it on Heroku
Step 1: Firstly, go to Facebook Developer Apps page.
Step 2: Click on Add a New App button.
Step 3: Type a Display Name (name of the bot), Contact Email and select a Category of the new app.
Step 4: You will be redirected to the dashboard of the newly created app. Go to Messenger Tab that is on the left sidebar.
Step 5: Go to the section of Token Generation on that page and select the newly created page that you created in the drop down. You will get a Page Access Token. Just copy that.
Step 6: Now, go to the directory of the project that you cloned from Github and open the info.cfg file.
Step 7: Change the line 2. Replace the “<YOUR ACCESS TOKEN>” with your new copied Access Token that you just generated.
Step 8: Change the line 3. Replace the “<YOUR VERIFY TOKEN>“ with “temptoken” (This can be anything you want. I’m taking “temptoken” for example in this tutorial)
Step 9: Now just open the terminal and type this below command and wait for it to execute.
git add info.cfg && git commit -m “Updated Config” && git push heroku master
Step 10: Now go to Webhook section of the page in the browser and click on Setup Webhooks button.
Step 11: Enter the Callback URL which is the URL of the Heroku app that you noted when you created the app in Webhook Part of Tutorial, Enter the Verify Token (i.e. “temptoken” in our case), select the messages option in the Subscription Fields and Finally click on Verify and Save button.
Step 12: Again, go to the Webhook Section on the page and select the newly created page from the drop-down and click on the Subscribe button.
That’s It. I know it was a long tutorial, but this will be worth it once you see your chatbot working.
Now open up the Facebook Messenger and search for the newly created page (in our case “Messenger Bot”). Once found, type any message and send. It will send you back the same message again.
For better user experience, you can also a page photo so that it looks a bit more intuitive to the users who are chatting to you newly created chatbot.
I will be adding nee stuff related to chatbot soon. So stay tuned.