Live Status Widget V3.X Library JS Mode

Live Status Widget Library is a javascript file shared through a CDN provider. You can embed it in your project by adding the script HTML tag in your index.html file.

There are two urls for each environment

production: https://lsw-v3.instaleap.io/lib/lsw.js
test: https://xandar-lsw-v3.instaleap.io/lib/lsw.js

For the examples we will use the test url. To place the LSW in your production environment you must use the production url

How to embed it:

In the index.html of your project, you will require to append the URL to the library CDN.

<head>
    <meta charset="UTF-8"/>
    <title>LSW v3 Embed</title>
    <script src="https://xandar-lsw-v3.instaleap.io/lib/lsw.js"></script>
</head>

In your project, make sure you have defined an HTML element, that the library will use as an anchor to render its content. add an id attribute to this element. this way the library is able to find the container in the DOM

You can define constraints to the size of the HTML container as you prefer, or leave it dynamically resizable, the content of the script will automatically adjust to the dimensions of the container.

<body>
	<div id="instaleap-lsw-v3"></div>
</body>

How to render it:

Since you have injected the script using a CDN. If successfully loaded, you will have access to the library through the Window Object. You should have access to it from the entire scope of your application.

The library will expose an attribute called "instaleap", in particular we care about the "intaleap.lsw.render" method . you can invoke the render method from any .ts, .js. or any other file capable of running javascript code.

<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",
    }
    window.instaleap.lsw.render(params)
</script>

As seen above, we do require to define a few parameters needed to succesfully display the proper order information.

Parameter	Description
Job : string	This is the Job number, the widget will retrieve al related information to this job
token : string	This is your unique api token that allows you to authenticate to our systems.
container : string	As seen above, this is a selector of the container you have created in your DOM. If you have added an id attribute, the selector should be prefix with the '#' character Example `<div id="lsw" />` `{ ... container="#lsw" }`

Usage example

<!DOCTYPE html>
<head>
    <title>LSW V3 library mode</title>
</head>
<body>
    <div id="instaleap-lsw-v3"></div>
</body>

<script src="https://xandar-lsw-v3.instaleap.io/lib/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3"
    }
    window.instaleap.lsw.render(params)
</script>
</html>