Skip to main content

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!

Comments

Popular posts from this blog

Home made temperature and humidity meter

Hello Shippers! Once again, it's time to create something awesome. How about a temperature and humidity sensor controlled with NodeMCU or ESP8266 which sends the temperature of your room and our very special Blynk app shows the data with values and graphs. That sounds cool!

Let's sail.
Overview: The NodeMCU collects the temperature and humidity from DHT11 sensor and sends it to Blynk app every second. Wow!
Things we need:Hardware:NodeMCUDHT11/DHT22 sensorJumper Wires4K7 resistor3V3 power sourceSoftware:Arduino IDEBlynk app Now that we have gathered all the stuff we need. Let's connect them.
Temperature and humidity sensor circuit:
Connections:D4 pin of NodeMCU connects to pin 2 of DHT11.3V3 pin of NodeMCU connects to pin 1 of DHT11 & GND of NodeMCU to pin 4 of DHT11.4K7 ohm resistor connected between pin 1 and pin 2 of DHT11 sensor.Connect power(3.3V) to NodeMCU to make it work without USB cable. Before we dive into the code, let's setup the Blynk app to receive the da…

Time scheduled electric switch controlled with Blynk app

Most of the times when we go out of home for some days, we think of having some device that could switch ON/OFF (let's say) Refrigerator (or any other important appliance)for some hours during the day. Today, we are going to make such time scheduled electric switch which switches ON/OFF at times which we set the in our Blynk app. Woah!

Let's begin!
Things we need:
Hardware:5V relayNodeMCUJumper wiresBreadboard3V3 and 5V power sourceElectrical WiresSoftware:Arduino IDEBLYNK app It's circuit is same as we have created for our Smart Switch. So, if you already have that circuit set up, go ahead with Blynk app set up and Start playing.
Circuit:
Connections:D5 pin of NodeMCU connects to IN1 pin of 5V relay.3V3 of NodeMCU connects to 3V3 powers source and GND to GND.Vcc of relay connects to 5V source and GND to GND.Live wire is connected directly to appliance.Neutral wire from source comes to relay NC pin and another wire goes out from COM pin which is connected to the appliance.Let…