.png)
How To Make Facebook Messenger Chat Bot With Api.ai
Alright, Time has finally came where we have started moving from GUI to Conversational UI (CUI), We are moving into world where we would be conversing with technology as we would do with any other person, for Iron-Man fans, Yeah its right Jarvis is going to be a real thing soon enough and with this ability computing is going to be much easier and as app and smart phone ecosystem came and changed our life so will the conversational UI.
But understanding human speech has its own challenges, what we humans have learned and created over so many years about language and speech can not be tought to computers via some algorithm or formula it needs much more than that. It needs the computer to recognize patterns and create its own understanding and here is where machine learning comes to rescue you can Google more about it if you are interested.
Part 1 - Creating API.ai Agent and connecting it with Facebook Messenger
Part 2 - How to make a node.js backend for Facebook Messenger Chat Bot
(Connecting our bot to www.themoviedb.org api with Node.js backend for movie recommendation)
But understanding human speech has its own challenges, what we humans have learned and created over so many years about language and speech can not be tought to computers via some algorithm or formula it needs much more than that. It needs the computer to recognize patterns and create its own understanding and here is where machine learning comes to rescue you can Google more about it if you are interested.
But for us developers we don't need to teach our system the language because giants like Google and Facebook are here to help you out. Google provides service called Api.ai which helps you build conversational user experience.
What We Are Going To Build
We are going to build a Facebook messenger bot which would recommend you movie based on your genre preferences selection
This tutorial would be in two parts
This tutorial would be in two parts
Part 1 - Creating API.ai Agent and connecting it with Facebook Messenger
Part 2 - How to make a node.js backend for Facebook Messenger Chat Bot
(Connecting our bot to www.themoviedb.org api with Node.js backend for movie recommendation)
Getting Started With Api.ai
Step 1. Sign up to api.ai and log into your account you would be presented with the dash board.
Step 2. Click on create a new agent, consider agents as your project engine which process language and spits out actions you define when language input matches the pattern you want.
Step 3. Name your agent now, I am naming my agent as "MovieBot", add a description and hit save button
Understanding API.AI Agent
There are two important things that you need to understand about api,ai agents before we move any further, These are the two main components of the service.
1. Intents - Think of intents as actions you want your bot to send to you along with the parameters you want for ex. Our movie bot has only one action and that is to recommend movie, so the intention or the intent can be defined as movie.recommendation
1. Intents - Think of intents as actions you want your bot to send to you along with the parameters you want for ex. Our movie bot has only one action and that is to recommend movie, so the intention or the intent can be defined as movie.recommendation
2. Entities - Entities are concepts that your bot should understand and using this concepts your bot would extract parameter values for your intents, our movie bot is going to recommend movies based on genre you wants so one concept that our bot needs to understand is genre so movie.genre would be one entity for our bot. similarly if we want our bot to recommend movie based on cast we would add movie.cast as one of the entity as well.
Creating Entities
Now as we know about entities lets start with adding one for our movie bot
1. Click on the entities tab on your dashboard
2. Then click on Create Entity button on top right
3. You would be on a page similar to shown in below screen shot.
Step 4. Fill the fields as shown in the above image, First lets name our entity movie-gener then in the space below add a row and in it add some examples of movie geners as you can see in the screen shot. The left hand side is the parameter value that you want your bot to send to your backend and right hand side are the words or phrases that could map to those parameter value for example when your says "show me some funny movies" I want this to send me movie-gener parameter with the value of comedy, so in the left hand side I have named the parameter value and in right hand side I have mentioned some synonyms or phrases that should be used to map.
Step 5. After you have added your examples click on save, give it some time to save do not close the browser.With that we have the Entities part ready.
Creating Intent
As we had discussed earlier we know that intents help us map user said phrases to developer defined actions or we can call it developer defined intents.
Step 1. Click on intent on dashboard and then hit create intents
Step 2. Name your intent, our intent is just one and that is movie recommendation, so I have named it movie.recommendation
Step 2. Name your intent, our intent is just one and that is movie recommendation, so I have named it movie.recommendation
Step 3. There are three sections to creating intents that are
A. User Says
Here you would add some example phrases that would trigger your movie intent, For movie recommendation a user might say something like "I would like to watch a movie" which would trigger our Intent we are also going to handle the genre which a user could say something like "I would like to watch a horror movie" so all such phrases we would add in the user says section while you add those you can highlight a single word in a sentence and define which entity it matches if the agent it self doesn't understands the entities in the sentence you can read more on this from the offical documentation.
B. Action
Here you define what action would be triggered for your user says phrases, for us its our intent action it self so we have mentioned the action to be movie.recommendation along with this action we can see the list of parameters that have been extracted from our user says example phrases, from the list we can define if any parameter is absolutely required for our action by ticking the required box. As we need movie genre to be specified for us to provide the movie result we have marked it as required. But what if user says something like "I want to watch a movie" then we can not just leave the user blank as we dont have a gener to show him the movies. In such case bot will send the prompt question that you have set to extract the required parameter from user. So If user says "I want to watch a movie" our bot would reply with "From which gener do you want ?" and extract the required parameter.
C. Response
And finally when all is perfect and you have your required parameters here is where you define what the response text from the bot would be.
With this we have our conversational engine set up we can test it on Api.ai it self via the "Try it now" console.
Here is the screen shot of our bot in Try It Now console
As you can see It is working fine, We first hit the agent with the query "I would like to watch a movie" for which we receive the response "From which gener to do you want ?" as agent was not able to find the genre from the query . Then we enter "I think I am in mood of horror movies" and agent gives us the response "I think you would like the following movies" with intent value of movie.recomendation and movie-gener parameter value set to Horror just as we had wanted.
With this we have our Converstional UI tested and ready to be integrated with Facebook Messanger Platform
Step 1. Log into Facebook Developer Console and create a new app as shown below.
Name your app with your agent name here, add your email id and select apps for messenger as the category then hit create App ID.
Step 2. Now you would be taken to a screen as shown below, you have to select a page for your messenger bot, if you dont have a page created you can create a new page and come back to this page, after selecting the page facebook will generate a Page Access Token for that page
Copy that Page access token and save it somewhere we would need it in the next step
Step 3. Now time to actually connect the page we created with the api,ai agent we made earlier for that go to api.ai dashboard of your agent and select integration as shown in the picture below.
Enable the Facebook Messenger toggle and click on setting.
In the settings panel enter the details as shown in the picture below
.
Add a verify token which would help verify your bot identity to FB messenger keep it secret and do not share it. Paste the Page Access token that you had generated earlier here in page access token box, now copy the Callback URL which you would need in the next step.
Step 4. Now we need to configure Webhook go to the developer page on Facebook, In the products tabs go to messenger and click on set up webhooks, you would see a screen as shown below, Paste the Callback URL that you copied in last step and also enter the verify token you created previously, tick the messages and messages_postbacks check box and hit verify and save.
Step 5. Now its time to test the first phase of our bot, go to the page you created for your bot and try and send a messenger to the the page, If you have correctly followed the tutorial you would have your bot give you response as below.
A. User Says
Here you would add some example phrases that would trigger your movie intent, For movie recommendation a user might say something like "I would like to watch a movie" which would trigger our Intent we are also going to handle the genre which a user could say something like "I would like to watch a horror movie" so all such phrases we would add in the user says section while you add those you can highlight a single word in a sentence and define which entity it matches if the agent it self doesn't understands the entities in the sentence you can read more on this from the offical documentation.
B. Action
Here you define what action would be triggered for your user says phrases, for us its our intent action it self so we have mentioned the action to be movie.recommendation along with this action we can see the list of parameters that have been extracted from our user says example phrases, from the list we can define if any parameter is absolutely required for our action by ticking the required box. As we need movie genre to be specified for us to provide the movie result we have marked it as required. But what if user says something like "I want to watch a movie" then we can not just leave the user blank as we dont have a gener to show him the movies. In such case bot will send the prompt question that you have set to extract the required parameter from user. So If user says "I want to watch a movie" our bot would reply with "From which gener do you want ?" and extract the required parameter.
C. Response
And finally when all is perfect and you have your required parameters here is where you define what the response text from the bot would be.
With this we have our conversational engine set up we can test it on Api.ai it self via the "Try it now" console.
Here is the screen shot of our bot in Try It Now console
As you can see It is working fine, We first hit the agent with the query "I would like to watch a movie" for which we receive the response "From which gener to do you want ?" as agent was not able to find the genre from the query . Then we enter "I think I am in mood of horror movies" and agent gives us the response "I think you would like the following movies" with intent value of movie.recomendation and movie-gener parameter value set to Horror just as we had wanted.
With this we have our Converstional UI tested and ready to be integrated with Facebook Messanger Platform
Integrating Api.ai Bot with Facebook Messenger
Now we need to connect the bot with Facebook messenger, For that we need to follow the following stepsStep 1. Log into Facebook Developer Console and create a new app as shown below.
Name your app with your agent name here, add your email id and select apps for messenger as the category then hit create App ID.
Step 2. Now you would be taken to a screen as shown below, you have to select a page for your messenger bot, if you dont have a page created you can create a new page and come back to this page, after selecting the page facebook will generate a Page Access Token for that page
Copy that Page access token and save it somewhere we would need it in the next step
Step 3. Now time to actually connect the page we created with the api,ai agent we made earlier for that go to api.ai dashboard of your agent and select integration as shown in the picture below.
Enable the Facebook Messenger toggle and click on setting.
In the settings panel enter the details as shown in the picture below
.Add a verify token which would help verify your bot identity to FB messenger keep it secret and do not share it. Paste the Page Access token that you had generated earlier here in page access token box, now copy the Callback URL which you would need in the next step.
Step 4. Now we need to configure Webhook go to the developer page on Facebook, In the products tabs go to messenger and click on set up webhooks, you would see a screen as shown below, Paste the Callback URL that you copied in last step and also enter the verify token you created previously, tick the messages and messages_postbacks check box and hit verify and save.
Step 5. Now its time to test the first phase of our bot, go to the page you created for your bot and try and send a messenger to the the page, If you have correctly followed the tutorial you would have your bot give you response as below.
So we have successfully created our Facebook bot which can handle basic conversations and extract out the parameters required to fulfill user requirement i.e movie recommendation.
In the next part we would connect this bot to movie API from TheMovieDb and thus provide user a movie recommendation as we had decided.
Here is the next part of this tutorial - How to make a node.js backend for Facebook Messenger Chat Bot
In the next part we would connect this bot to movie API from TheMovieDb and thus provide user a movie recommendation as we had decided.
Here is the next part of this tutorial - How to make a node.js backend for Facebook Messenger Chat Bot
I had some issues integrating it with facebook messenger, also i want to discuss more about the bot. Ping me on ashutosh0710@gmail.com
ReplyDeleteHey let me know what issue you are facing, Ill help you out solve the problem
DeleteYour blog is extremely brilliant especially the quality content is really appreciable.
ReplyDeleteWeb & Mobile App Development Services
Much thanks to you for your fascinating infomation super mario world
ReplyDeleteThank you for this tutorial! Very simple and informative!
ReplyDeletejson formatter online
Wow never essay writers knew what I'd find when I clicked on the link
ReplyDeleteThanks man... Keep writing great articles
ReplyDeleteHi , Thanks for the tutorial.
ReplyDeleteI want to get facebook username ? How to do that ?
Extraordinary occupation for distributed such an advantageous site. Your web log isn't just helpful yet it is moreover truly inventive as well. There have a tendency to be relatively few individuals who can unquestionably compose not all that straightforward posts that creatively. Proceed with the decent composition FtiOS Download
ReplyDeleteI feel it interesting, your post gave me a new perspective! I have read many other articles about the same topic, but your article convinced me! I hope you continue to have high quality articles like this to share with veryone!
ReplyDeletehappy wheels
I've perused some well done here. Certainly worth bookmarking for returning to. I astound the amount of exertion you put to make such an extraordinary useful site. Tinyumbrella Windows
ReplyDeleteI have read your blog it is very helpful for me. I want to say thanks to you. I have bookmark your site for future updates. TutuApp Android
ReplyDeleteAn intriguing dialog is value remark. I feel that it is best to compose more on this matter, it may not be a forbidden theme however normally people are insufficient to chat on such subjects. To the following. Here's to you. Phantom for SnapChat
ReplyDeleteI enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again.mother’s day gifts
ReplyDeleteI acknowledge all that you have added as far as anyone is concerned base.Admiring the time and exertion you put into your online journal and point by point data you offer.Thanks. FlekStore Download
ReplyDeleteI pay a visit everyday some sites and information sites to read articles or reviews, except this blog offers quality based writing. netflix account
ReplyDeleteThe article is great, thank you for providing complete and easy-to-understand information
ReplyDeletevex 3
I hope you continue to have such quality articles to share with everyone! I believe a lot of people will be surprised to read this article hotmail sign in
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteIndeed, it is a fact that if you want to judge the abilities of any app developer then assign him such kinds of task which requires API's to be built. It actually requires some sort of experiences in the field. Android app developer Dubai, is the ultimate choice for every client as they got a team of highly experienced and talented app developers that can deliver within the tight deadline as well.
ReplyDeleteYour blog have nice information
ReplyDeleteSimsa
This is something that you just read and read. You just can’t get tired of it.
ReplyDeletePhone Number for Base Chat in Germany
This is beyond doubt a blog significant to follow. You’ve dig up a great deal to say about this topic, and so much awareness. I believe that you recognize how to construct people pay attention to what you have to pronounce, particularly with a concern that’s so vital. I am pleased to suggest this blog.
ReplyDeleteJava training in Chennai | Java training institute in Chennai | Java course in Chennai
Java training in USA
Java training in Bangalore | Java training in Indira nagar
Java training in Bangalore | Java training in Rajaji nagar
I am so proud of you and your efforts and work make me realize that anything can be done with patience and sincerity. Well I am here to say that your work has inspired me without a doubt.
ReplyDeleteData Science Training in Chennai | Best Data science Training in Chennai
Data Science training in anna nagar | Data science training in Chennai
Data Science training in chennai | Best Data Science training in chennai
Data science training in Bangalore | Data Science training institute in Bangalore
Data Science training in marathahalli | Data Science training in Bangalore
Data Science interview questions and answers
Excellant post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
ReplyDeletepython training in chennai
python course institute in chennai
I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
ReplyDeleteespionner whatsapp en ligne
Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
ReplyDeleteangularjs Training in bangalore
angularjs Training in btm
angularjs Training in electronic-city
angularjs online Training
angularjs Training in marathahalli
This is such a great resource that you are providing and you give it away for free. talk to strangers
ReplyDeleteEverything You Need to Know about Digital Marketing
ReplyDeleteThis is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!. buy facebook friends
ReplyDeleteYou made some decent factors there. I looked on the internet for the difficulty and found most individuals will associate with along with your website.
ReplyDeleteChatbot Company Kuwait
Chatbot Company Bahrain
Chatbot Company Oman
Chatbot Company Muscat
Chatbot Company Qatar
Chatbot Company Saudi Arabia
Chatbot Company KSA
Hi there, I found your blog via Google while searching for such kinda informative post and your post looks very interesting for me weather station
ReplyDeletevery interesting post.this is my first time visit here.i found so many interesting stuff in your blog especially its discussion..thanks for the post! apk download
ReplyDeleteThis particular is usually apparently essential and moreover outstanding truth along with for sure fair-minded and moreover admittedly useful My business is looking to find in advance designed for this specific useful stuffs… roleplay chat
ReplyDeleteI really liked this part of the article, with a nice and interesting topics have helped a lot of people who do not challenge things people should know... you need more publicize this so many people who know about it are rare for people to know this......
ReplyDeleteChatbot Company in Dubai
Chatbot Companies in Dubai
Chatbot Development
AI Chatbot Development
Chatbot Companies in UAE
Chatbot Company in Chennai
Chatbot Company in Mumbai
Chatbot Company in Delhi
Chatbot Development Companies
Facebook is no longer a place to interact with strangers but Wowchat definitely is. Wowchat is a great place to interact with strangers, video call with them, chat with them and more but since Wowchat has been down there are many alternatives of Wowchat that you can use. Wowchat
ReplyDeleteWow, đây là bài đọc hấp dẫn. Tôi rất vui vì tôi đã tìm thấy nó và phải đọc nó. Rất tốt về nội dung này. Tôi rất thích nó. Cảm ơn vì thông tin tuyệt vời và độc đáo. Soi cầu XSMB Kubet : https://www.linkedin.com/showcase/soi-cau-xsmb-kubet/
ReplyDeleteI want to say thanks to you. I have bookmark your site for future updates. escort ponte di nona
ReplyDeleteWow what a Great Information about World Day its very nice informative post.
ReplyDeletethanks for the post.https://1asiaqq.net/
If you are looking for more information about flat rate locksmith Las Vegas check that right away.
ReplyDeletedeath clock
hi was just seeing if you minded a comment. i like your website and the thme you picked is super. I will be back. Slay Eyelashes
ReplyDelete*I’d have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to deckenbaldachin
ReplyDeleteI need this article content, Create much-loved, I'd personally like additional information employing this, great deal of thought is specially interesting., Bless anyone suitable for producing. itcbet
ReplyDeleteAwesome! I thank you your contribution to this matter. It has been insightful. my blog: master cleanse 바카라사이트
ReplyDeleteI read this blog very carefully, the articles were very nice I got lot of benefits from article. Thanks for sharing such a wonderful article. I have a website related to this, please visit this website, believe will benefit. Visit cheapest smm panel for any kind of SMM Services.
ReplyDeleteGreat post!!!
ReplyDeleteThis is really good. Thanks for sharing this information. This article inspired me to read more your blogs. Keep sharing. Visit world cheapest smm panel for any kind of Social Media Marketing Services.
Thanks for sharing an amazing blog post with us where It helped me lot.
ReplyDeletesocial media agency Dubai
eCommerce website development Dubai
Website Design Dubai
Website development Dubai
It was an amazing blog.
ReplyDeletemarketing conversation