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 show 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 uses 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.

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

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 especial 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 user has said in the previous message as in the screenshot below.

Now our API link has become dynamic like this:{last_user_msg}.json -> York.json

If user types “New York”, and{last_user_msg}.json -> Francisco.json

If user types “San Francisco”.

Let’s check if this is the case with our chatbot.

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.

You can see so far we have used “Phrase Match”, now let’s use “Entity Match”.

Select “wit/location” which is artificial 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 {wit/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.

Checkout some other tutorials to make your chatbot interesting with Botsify.