How to use JSON API With Botsify - Weather Chatbot Example

Written by usamanoman
Posted On Mar, 18, 2017
It was fun telling you how easy it is to integrate your RSS Feed with your chatbot. In this tutorial I am going to tell you about JSON API integration, this is going to be the most important tutorial. Many people would want to connect their website or API with the chatbot so their website always show the latest and dynamic data. Remember as we said, we don’t store you API data which means we provide security to your data unlike other platforms who uses Zapier or third-party integration APIs. So without wasting more time, let’s jump right in.

What are we going to link or build in this tutorial?

We are going to make a weather chatbot in this tutorial. We are going to link following firebase API with our chatbot which I just created with my firebase account. Remember you can code this API all by yourself as well.   https://sample-api-a34f5.firebaseio.com/weather.json   This is a very simple hard coded API I created in firebase, this API will give you the weather of a few cities, it’s hard coded weather, it doesn’t change. But remember this doesn’t match the format our chatbot accepts. Find acceptable JSON Responses Here. So if I go to something like:   https://sample-api-a34f5.firebaseio.com/weather/New York.json   Our API will give us the weather of New York City. Now if you notice our chatbot response matches with the “Text Message Format”.  
  • Step 1 – Create a Story

  Although you can link your JSON API or plugin with several other ways as well, which you can read here. I am linking my JSON API with a story. Step1  
  • Step 2 - Integrate the JSON API Plugin

Once you have added basic responses to the story, like when the story should execute/trigger you can click the Plugins button at the bottom of this page to integrate your JSON API. Select JSON API from the box that opens up. And start configuration as in the box below. See I don’t need any especial headers to make this API work with my chatbot, however you case might be different, so feel free to fill in header’s key values. Step2 NOTICE, I haven’t used the complete API link, but a particular city’s weather link. Because as I told earlier the first one as a whole is no a right format for the JSON API, which our chatbot accepts.
  • Step 3 - Try it out in messenger

Now that you get New York’s weather with all the user queries let’s change it a bit. Let’s change our link with “Last User Message”, which means whatever user has said in the previous message as in the screenshot below. Step 9 Now our API link has become dynamic like this: https://XYZ.com/weather/{last_user_msg}.json -> https://XYZ.com/weather/New York.json If user types “New York” And https://XYZ.com/weather/{last_user_msg}.json -> https://XYZ.com/weather/San Francisco.json If user types “San Francisco” Let’s check if this is the case with our chatbot. Step 10  
  • Step 4 - Making it dynamic with Entities

Awesome, the last thing you must be worried about is you have to type all different cities in the phrase queries to handle this story or you can also create an entity for all possible cities and use it from the dropdown. But in both cases it’s a lot of work. But maybe not. You can see so far we have used “Phrase Match”, now let’s use “Entity Match”. We will select “wit/location” which is artificial intelligent Entity. It will see if your user has any location in his sentence and takes it our as a variable in the {wit/location} variable. Step5 Now we have to make one small change in our JSON API Link as follows. I have replaced {last_user_msg} with {wit/location}. Let’s try our chatbot. Step6 Isn’t it interesting? Your weather chatbot is ready. With just one small change we are able to save ourselves all different locations. But also now our chatbot recognizes the location from the user’s sentence as well. Checkout different tutorials to make your chatbot interesting with Botsify.