Documentation

Javascript API

API Libraries

Javascript API

Overview

The core of cloudinclude's functionality is its Javascript API. Using the API allows you to embed any content created with our service into your website.

Getting Started

To illustrate how cloudinclude works, create a test HTML page and paste in the following code content:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="cloudinclude.js"></script>   
          
    <script type="text/javascript">
       cloudinclude.ready(function () {
           // Make calls to cloudinlcude api here:        
       });
    </script>
 
  </head>  
    
  <body>
  	
  	<div class="cloudinclude"></div>
  	
  	<a href="http://www.cloudinclude.com/">cloudinclude</a>
  </body>
</html>

Update the src attribute in the javascript script tag to reference your copy of the js library file. If you have not downloaded the library, click here to access the latest version of the api.

cloudinclude supports class names to embed content. Wherever you want content to appear in your HTML page, apply the class cloudinclude to any DOM container element. Notice in the code sample that we have already started you off with a single div element classed as cloudinclude to get you started.

Once you have indicated which DOM elements should be targeted for content embedding, make a js api call to load your content within the cloudinclude.ready() function. The ready function ensures that your HTML document has finished loading before attempting to execute any javascript code. This is to prevent cloudinclude from trying to load a DOM element that may not be ready for embedding. You may author your own document ready function if you choose not to use ours or leverage any javascript library frameworks that also implement this. (e.g. - jquery's $(document).ready() function).

Edit your test HTML page and add the following js api call to the cloudinclude.ready() function:

cloudinclude.content.load(1);

All javascript api calls have a consistent general format of [namespace].[class].[method](<params>).
The api method call above specifies the namespace cloudinclude, class content, and method load which accepts a single parameter field. The inbound parameter is the unique id of your content. In this example we are loading content identified by id of 1 which will target the single DOM div element we classed as cloudinclude. Make sure to update the unique id with that of yours. You will be able to access this from within the content administration area.

Complete Example

Below is the complete code example:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="cloudinclude.js"></script>  
       
    <script type="text/javascript">
      cloudinclude.ready(function () {
          // Make calls to cloudinlcude api here: 
          cloudinclude.content.load(1);       
      });
    </script>
            
  </head>
      
  <body>
  	
  	<div class="cloudinclude"></div>
  	
  	<a href="http://www.cloudinclude.com/">cloudinclude</a>
  </body>
</html>

Function Reference

Content Class

Methods

Method	Returns	Description	How to call
load(contentId)	none	Loads the content identified by contentId targeting first occurence of DOM element classed as cloudinclude.	cloudinclude.content.load(contentId);
loadElement(contentId, elementId)	none	Loads the content identified by contentId targeting a DOM element of id elementId.	cloudinclude.content.loadElement(contentId, elementId);

Tag Class

Methods

Method	Returns	Description	How to call
load(tagId)	none	Loads all content associated by the tag identified by tagId targeting all occurences of DOM elements classed by cloudinclude. DOM elements are loaded in order of hierarchical positioning with respect to each other in the document. (i.e. - DOM element higher up in the page will load the first ordered content belonging to the tag). You can control the order sequence of tagged content within the content administration area.	cloudinclude.tag.load(tagId);

Keep checking here for more updates as we continue to update and expand our javascript api library. These are the minimum functions you'll need to get started.

Download

Click here to download the current version of the javascript library.

BETA