To help website developers integrate Interstate in to their website as easily as possible we have introduced a new Javascript API. The API is 100% integrated with the new OAuth2 API, all you have to do to use it is append all your requests with the .js file type. For example:
https://api.interstateapp.com/v1/roadmap/get/id/234jdiXI.js
When using the Javascript API you are not required to pass an oauth_token parameter and instead just append your public consumer key to the end of the API library's URL (more info below). The result of this means that you are only allowed to query public roadmaps and API methods that don't require authentication. If you attempt to send a request to a roadmap that is not public or a method that requires authentication, you will receive a 401 Unauthorized HTTP header.
To use the JS API on any page of your website you are required to include a <script> tag pointing to the Intersate Javascript library, found at htp://api.interstateapp.com/api.js. You are also required to attach your application's consumer key (key=) and the version (v=) of the API you wish to use. Here's an example of what your document should look like:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>My first application</title>
<script src="https://api.interstateapp.com/api.js?key=YOUR_CONSUMER_KEY&v=1" type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
The API library will create a single global object (interstate). To use the API library, call the init method and pass in a callback. The callback will receive an instance of the API client as it's only argument. You can then call any of the API helper methods.
The number one reason why people use the Javascript API is to display a roadmap on their website. If you want to do this, here's how. First of all, do as we say above (include the API library in your HEAD tag). Once you have done this, you'll need to paste the following code where you want the roadmap to appear
<script type="text/javascript">
(function() {
interstate.init( function( API ) {
var roadmap = 'ROADMAP_ID';
API.helpers.roadmap( roadmap );
});
})();
</script>
This code will output the roadmap of your choice where you place the code. You can then style the roadmap using CSS. If you wish to output the roadmap HTML in a custom structure of your choice, simply add a function as another argument to the API.helpers.roadmap method which takes three arguments of its own. The first argument will be the element which the library creates to store the HTML, the second being information about the roadmap and the third being an array of roads. For example:
<script type="text/javascript">
(function() {
interstate.init( function( API ) {
var roadmap = 'ROADMAP_ID';
API.helpers.roadmap( roadmap, function( element, roadmap, roads ) {
element.innerHTML = 'I have a roadmap called ' + roadmap.title + '! It has ' + roads.length + ' roads.';
});
});
})();
</script>
A lot of our users have requested to be able to embed their roadmaps on the popular blogging platform Tumblr. Unfortunately Tumblr's page editor seems to malform our normal JavaScript code and so we have to offer a special embed code specifically for use on Tumblr.
To embed your roadmap on Tumblr simply copy the code below and paste it in to your theme or page (make sure you're editing HTML) and then replace your application's consumer key (key=), the API version number you wish to use (v=) and the ID of the roadmap which you want to embed (roadmap_id=)
<script src="https://api.interstateapp.com/blog?key=YOUR_CONSUMER_KEY&v=1&roadmap_id=..." type="text/javascript"></script>
BakedCode © 2011
Developers · Blog · Help · Terms of Use · Refunds