Live Status Widget V3
Live Status Tracker presents two ways of use.
- Library JS Mode. LST Library is a javascript file shared through a CDN provider. You can embed it in your project by adding the HTML script tag in your index.html file.
- URL Mode. LST URL is a web app (or SPA) that you can access through an URL. The content of the page is parameterizable via query parameters in the URL.
There are two urls for each environment
Production
Test
Basic parameters
The basic parameters required by the LST call are:
| 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 | This is a selector of the container that is created in your DOM. . If you have added an id attribute, the selector must be prefixed with the '#' character. Example <div id="lsw" /> { ... container="#lsw" } |
How to embed it in Library JS mode:
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/{Library}.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 "instaleap.{Library}.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.{Library}.render(params)
</script>
How to load it URL mode
You will access the application through the URL https://xandar-lsw-v3.instaleap.io/ , although you will have to configure the query parameters to be able to display any information.
So you will end up with a full url whose query params seems similar to the following
https://xandar-lsw-v3.instaleap.io/{Library}?job=jobId&token=token
How to load it in URL mode in Iframe
Consider the following component who will load the url in an iframe
function LSW() {
const lswUrl = "https://xandar-lsw-v3.instaleap.io/{Library}?";
const urlParams = {
job: "myJob,
token: "myToken
};
const url = `${lswUrl}/?job=${urlParams.job}&token=${urlParams.token}`;
return (
<div className="live-status">
<h3>live status widget in an iframe</h3>
<iframe src={url}></iframe>
</div>
);
}
You can also configure the url to be opened in a new tab, by using the url.
https://xandar-lsw-v3.instaleap.io/{Library}?job=myJob&token=myToken
Usage example
https://xandar-lsw-v3.instaleap.io/status?job=myJob&token=myToken
<!DOCTYPE html>
<head>
<title>LSW v3 Embed</title>
</head>
<body>
<div id="instaleap-lsw-v3"></div>
</body>
<script src="https://xandar-lsw-v3.instaleap.io/lib/status.js"></script>
<script>
const params = {
job: "myJob",
token: "myToken",
container: "#instaleap-lsw-v3"
}
window.instaleap.status.render(params)
</script>
</html>
Updated 19 days ago