How to: Use JSON API With Botsify - Weather Chatbot Example

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 a JSON API integration



Many users 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 that use Zapier or third-party integration APIs.

So without any further due, let’s jump right into the tutorial.

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

Let's make a weather chatbot in this tutorial. We will link the 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 the 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 JSON API from the integrations menu.



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 the 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 the 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 the 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” for the story



Select “location” from the ‘Datastore’ drop down which is an artificially intelligent datastore.

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