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, you will learn how to do JSON API integration.

Many people would want to connect their website or API with the chatbot so their website always shows the latest and dynamic data. Remember as we said, we don’t store your API data which means we provide security to your data, unlike other platforms who use Zapier or third-party integration APIs.

So without wasting any time, let’s jump right into the tutorial.

What’s going to be linked or built in this tutorial?

Let's make a weather chatbot in this tutorial. We will link following firebase API with our chatbot which was created with my firebase account.

You can code this API all by yourself  as well.

http://api.botsify.com/api/weather?city=(name of city)   

This is a very simple hard-coded API I created in firebase, this API will give you the weather of a few cities.

(Remember that it’s hard-coded weather, it doesn’t change).

*But this doesn’t match the format our chatbot accepts. You can find acceptable JSON Responses here.

So if I go to something like:

http://api.botsify.com/api/weather?city=NewYork

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, we are linking the JSON API with a story here.



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. So here I don’t need any special headers to make this API work with my chatbot, however, your case might be different, so feel free to fill in header’s key values.



  • NOTICE, I haven’t used the complete API link, but a particular city’s weather. Because as mentioned earlier the first one as a whole is not the format for the JSON API, which our chatbot accepts.


Step 3 - Try it out on messenger
Now that you get ‘New York’ weather with all the user queries let’s change it a bit. Let’s change our link with “Last User Message”, which means whatever the user has said in the previous message as in the screenshot below.



Now our API link has become dynamic like this:

http://api.botsify.com/api/weather?city={last_user_msg}  

-->http://api.botsify.com/api/weather?city=NewYork

If the user types “New York” and,

http://api.botsify.com/api/weather?city={last_user_msg}  

-->http://api.botsify.com/api/weather?city=LosAngeles
If user types “Los Angeles”.


Let’s check if this works or not…



Step 4 - Making it dynamic with Entities
You must be wondering if you will have to type all different cities in the phrase queries to handle this story. But good thing, you can also create an entity for all possible cities and use it from the drop-down.

As you can see, so far we have used “Phrase Match” for the story, now let’s use “Pattern”.



  • Select “location” from the ‘Choose an Entity’ drop down which is an artificially intelligent Entity.




  • Your chatbot will see if your user has any location in their sentence and will take it out as a variable in the location} variable.




  • Now we have to make one small changes in our JSON API Link; replacing {last_user_msg} with {wit/location}.


Let’s try our chatbot.



Perfect! Your weather chatbot is ready.

With just one small change we are now able to answer to all different locations our users might mention to our chatbot.

Not just that, now our chatbot recognizes the location from the user’s sentence as well.

Check out some other tutorials to make your chatbot interesting with Botsify here.