For documentation on the current version, please check Knowledge Base.
Example : Embed the component
Steps to take :
- Load the API
- Add the component to your page
- Wait for the READY event.
1. Load the API
Load API from a CDN
Orbit provides a central storage of all API files. It is strongly advised to load the API from the CDN. Bug-fixes will find automatically their way into your application.
An example :
<html title="My Publication"> <head> <script type="text/javascript" src="https://cdn.orbitgt.com/api/webclient/<version>/webclient_api.js"></script> </head> <body/> </html>
Shorthanded way to load the most recent bug-fix version API version AA.B.C is by pointing AA.B (e.g. 11.1).
Loading the API files using https
protocol is recommended. Using http will in most cases result in webclient not being able to talk to https services, due to Flash Player restrictions.
Load API from the publisher server
Some API's can be loaded from the Publisher you are connecting to.
This method is not advised and should only be used if you administer the API's on the connecting Publisher yourself.
The API is located at this location : <server>/api/<version>/webclient_api.js
. You can load the API by referencing this file in the header block of your html page, using a script-tag.
- <server> : The URL of the server you are connecting to.
- <version> : The version of the API your application uses. Note that this also affects the component that is presented to the user. If you specify an older version, you will see an older component.
An example :
<html title="My Publication"> <head> <script type="text/javascript" src="<server>/api/<version>/webclient_api.js"></script> </head> <body/> </html>
2. Embed the component in your webpage
To embed the component we need to instantiate an instance of the orbit.webclient.Client
Class. The constructor expects only one argument, the DOM element we want to add our component to. The example below adds a div element and assigns an identifier to it using the id
property. That way we can retrieve the element later on. The div element functions as a container for the component.
<div id="clientElement"/>
Before we can add the component, we need to wait for the page to fully load. If we don't do this, the div element may not exist yet. In the example below we wait for the “onload” event to fire, but other javascript libraries often provide their own way of waiting for the page to load.
Once the page is fully loaded, we can create our component. We create an instance of the orbit.webclient.Client
class and pass a reference to the div container we created previously, to the constructor.
<html title="My Publication"> <head> <script type="text/javascript" src="<server>/api/<version>/webclient_api.js"></script> <script type="text/javascript"> var client; function addClient() { client = new orbit.webclient.Client(document.getElementById('clientElement')); } </script> </head> <body onload="addClient()"> <div id="clientElement"/> </body> </html>
3. Wait for the API to be ready.
Before we can use the component we must first wait for the 'READY' event to be dispatched. We can do so right away by adding an event listener using the addEventListener()
method.
<html title="My Publication"> <head> <script type="text/javascript" src="https://cdn.orbitgt.com/api/webclient/<version>/webclient_api.js"></script> <script type="text/javascript"> var client; function addClient() { // Create the client. client = new orbit.webclient.Client(document.getElementById('clientElement')); client.addEventListener(orbit.webclient.ClientEvent.READY, function() { // The API is ready for use. client.checkLicense(); }); } </script> </head> <body onload="addClient()"> <div id="clientElement"/> </body> </html>
Next steps
Also check the other examples…
Result