Build a facebook chatbot with API.AI (zero coding)

Hello Sailors, chatbot has been the buzz-word these days, many businesses are looking to implement chatbots to their sites or facebook pages to convert traffic into customers. Today in this tutorial, we are going to create a simple conversational facebook chatbot which can send you jokes, images and also it can do a small talk.

Messenger bots simply blend artificial intelligence with human interaction. User asks a question and chatbot gives relevant answer to serve the purpose.

What do we need to build our facebook chatbot?

• API.AI account - A natural language understanding platform to design and integrate intelligent sophisticated conversational user interfaces.
• Facebook for developers account - To create a facebook app.
• Facebook page - Chatbot feature is only available to pages, not personal accounts.

What we are going to do

We are going to subscribe our API.AI agent to read all messages we receive on our Facebook page and in turn our agent processes the message and responds the way we have trained it.

Steps to setup API.AI and Facebook Messenger

1. Create a facebook page, I have named it TestBot.
2. Make facebook app with your facebook developers account.
3. Set up your API.AI account and create a new agent.
   
4. Next, we will add product(Messenger and Webhooks) to our Facebook app. Click on Add Product button and then click on Set Up in both Messenger and Webhooks boxes.Once both Messenger and Webhooks are added, you will see them added under PRODUCTS tab.


5. Now, under PRODUCTS tab click on messenger and under Token Generation tab select your page to get the token.



6. Open the Integrations tab in API.AI and Turn ON the Messenger integration. Click on Settings, paste the facebook access token copied in above step, write the unique VERIFY TOKEN and hit START.  Also copy the callback URL.



7. In Facebook developers page click on Messenger tab then select Setup Webhooks and paste your Callback URL and the Verify token from API.AI page. Click Verify and Save.
   
   
   Also, make sure that your facebook webhook is subscribed to your page events:
   
   
   Now, API.AI and page messenger are connected which means we can now process messages received on our page and respond accordingly.

Setup responses in API.AI

We are already provided with 2 default intents. The Default Welcome intent replies to greeting messages and the Default Fallback intent replies if bot doesn't understands something. That's a good starting point.

Before we start, let's understand 2 important things: Intents and Entities

Intent: We classify user's queries as intents which means how a user is going to ask something from the bot. Example: send me some cool jokes

Entity: This is what we are looking from user as a value, let's say "send me 3 jokes", here we can consider 3 as a number entity and jokes as category entity(not required though). Then we process this on our webhook and send the response. Don't worry if you are not getting this, we are going to work only with intents right now.

Let's create some intents:

1. Create a joke intent. Add a few queries, the way user can ask for a joke i.e. send me a joke, or simply joke.



2. Now, come down the screen and add a response to this query, a joke. For this, we need to add a FACEBOOK MESSENGER response by clicking the + button next to Default Response and then add the Text Message.



3. Same way we are going to create an image intent, add a user query and submit the response as image, so that the image is displayed for the query.

This way we can add as many intents we want and facebook chatbot will respond accordingly.

These are only static responses, for dynamic responses we need to create a webhook which is not covered in this tutorial.

Final Check:

• Facebook webhook setup subscribed to TestBot page.  Check
• API.AI connected to Facebook page. Check
• Intents created. Check

That's it. Time to check the response on facebook messenger.

Wow, we have made our first simple chatbot which sends joke and a capuchin pic on demand. Now, go ahead and try to use this to create awesome chatbots.

Chatbot responses shall only work for page admins/moderators not for public until they are verified by facebook.

Additionally, we can also give some small talk sense to our chatbot by importing the small-talk pre-built agent from the Pre-Built agent tab. Oh yeah!

If you have any queries/suggestions write below in the comments or send me a mail at prakhar@knowshipp.com. See you in the next tutorial!