LST Steps Module
The use of this library is for the visualization of the steps only. This will be displayed throughout the job.
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
| Library. | URL Lib | URL Web |
|---|---|---|
| steps | https://lsw-v3.instaleap.io/lib/steps.js | https://lsw-v3.instaleap.io/steps? |
Test
| Library. | URL Lib | URL Web |
|---|---|---|
| steps | https://xandar-lsw-v3.instaleap.io/lib/steps.js | https://xandar-lsw-v3.instaleap.io/steps? |
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/steps.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.steps.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/map?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/map?";
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>
);
}
Use library Map
To use this library you only have to use the map tag in the url of the LST call.
Note: Note: The driver icon only appears on the map when active the shopper app.
Consider the following examples:
<!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/map.js"></script>
<script>
const params = {
job: "myJob",
token: "myToken",
container: "#instaleap-lsw-v3"
}
window.instaleap.map.render(params)
</script>
</html>
https://xandar-lsw-v3.instaleap.io/map?job=myJob&token=myToken
For the display of the steps it requires the use of the steps parameter call.
Consider the following examples:
<!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/steps.js"></script>
<script>
const params = {
job: "myJob",
token: "myToken",
container: "#instaleap-lsw-v3"
}
window.instaleap.steps.render(params)
</script>
</html>
https://xandar-lsw-v3.instaleap.io/steps?job=myJob&token=myToken
Example:
The list of parameters is as follows
You can change the default colors used in the application by setting de primary and secondary colors parameters.
You can customize the color for the main background by setting the "backgroundColor" parameter.
Color Value
You can change the default colors used in the application by setting de primary and secondary colors parameters.
You can customize the color for the main background by setting the "backgroundColor" parameter.
Specific configuration parameters
| Parameter | Description |
|---|---|
| primaryColor | Used to change the primary color of the content. |
| secondaryColor | Used to change the secondary color of the content. |
| backgroundColor | Used to change the background color of the main content |
You can change the font family used in the application by setting the fontFamily parameter
Font Availability
Live status Web doesn't support any fonts by default, so make sure you have the fonts available on your site so that the widget can use them
Specific configuration parameters
| Parameter | Description |
|---|---|
| fontFamily | Any font you have available in your platform Example: monospace |
The parameter "language" allows configuring the displaying locales on the application
Supported Locales
Supported Languages
We Follow the ISO 639-1 standard language codes
es: Spanish (Spain)
en: English
pt: Portuguese (Portugal)
pt-br: Portuguese (Brazil)
Default Locale
If no language is being set, the app will try to use the locale used by the browser.
If no supported language (listed above) is being set by neither the parameter nor the browser, the content will be displayed in Spanish
Specific configuration parameters
| Parameter | Description |
|---|---|
| language | parameter used to change the language of the content Default: Spanish |
Customize Text
Title
You can customize the step title in the view Steps using the parameter stepViewTitle.Address
You can customize the destination or source address according to the type of operational model.
| Parameter | Description |
|---|---|
| stepViewTitle | Parameter to customize the title of the step view |
| showAddress | Displays the address according to the operating model default: false options: true or false |
Hide parameters
Order number
You can hide text in the step view using the specified parameter.Delivery code
You can hide the delivery code in the step view using the specified parameter.
| Parameter | Description |
|---|---|
| Hide order number | Allows you to show or hide the number order in the header. default: "false" options: "false: || "true" |
| Hide Delivery Code | Allows you to show or hide the delivery code order. default: "false" options: "false: || "true" |
Text size
You can customize the size of the texts
- Title
- Subtitle
- Steps
| Parameter | Description |
|---|---|
| homeBarFontSizeTitle | Parameter to customize the font size (title) |
| homeBarFontSizeSubtitle | Parameter to customize the font size (subtitle) |
| homeBarFontSizeSteps | Parameter to customize the font size (steps) |
Custom step names
You can change the default "Title" and "Help Text" used in the order steps by setting them via URL parameter on each step.
Custom Title and Help Text with Locales
Beware that custom Title and Help Text are not affected by locale configurations
We recommend configuring also the language parameter when using custom step names, to avoid mixing the language of the content, retrieved from the browser, and the titles you are presenting.
Library mode params Encoding
In library mode, the configuration is set in the "steps” attribute.
URL Params Encoding
Remember that we require to comply with (UTF-8) encoding when sending query params. so that if your custom name string has whitespace, you should replace it with the symbol "%20".
ie: "stepConfirmed=Custom title to confirmed step" => stepConfirmed=Custom%20title%20to%20confirmed%20step"
Specific configuration parameters
| Parameter | Description |
|---|---|
| stepConfirmed | Parameter used to change the name of the Confirmed step - Default: Confirmed |
| stepPicking | Parameter used to change the name of the Picking step - Default: Picking |
| stepGoingToDestination | Parameter used to change the name of the Going To Destination step - Default: Going to destination |
| stepReadyToPickup | Parameter used to change the name of the Ready To Pickup step - Default: Picked up |
| stepDelivered | Parameter used to change the name of the Delivered step - Default: Delivered |
| stepPickedUp | Parameter used to change the name of the Picked up step - Default: Picked up |
You can change the default "Icon" used in the order steps by setting them via URL parameter on each step.
Custom Icon with Locales
You can customize the icons.
Beware that custom Icon are not affected by primary color or secondary color
| Parameter | Description |
|---|---|
| homeBarIconSize | Parameter to customize the size of the icons for each step |
| stepConfirmedIcon | Parameter used to change the icon of the Confirmed step |
| stepPickingIcon | Parameter used to change the icon of the Picking step |
| stepPickingIconActive | String which will be used as display icon during the Picking order step when is in Active status. |
| stepPickingIconInactive | String which will be used as display icon during the Picking order step when is in Inactive status. |
| stepGoingToDestinationIcon | Parameter used to change the icon of the Going To Destination step |
| stepGoingToDestinationIconActive | String which will be used as display icon during the Going To Destination order step when is in Active status. |
| stepGoingToDestinationIconInactive | String which will be used as display icon during the Going To Destination order step when is in Inactive status. |
| stepReadyToPickupIcon | Parameter used to change the icon of the Ready To Pickup step |
| stepReadyToPickupIconActive | String which will be used as display icon during the Ready To Pickup order step when is in Active status. |
| stepReadyToPickupIconInactive | String which will be used as display icon during the Ready To Pickup order step when is in Inactive status. |
| stepPickedUpIcon | Parameter used to change the icon of the Picked up step |
| stepPickedUpIconActive | String which will be used as display icon during the Picked Up order step when is in Active status. |
| stepPickedUpIconInactive | String which will be used as display icon during the Picked Up order step when is in Inactive status. |
| stepDeliveredIcon | Parameter used to change the icon of the Delivered step |
| stepDeliveredIconActive | String which will be used as display icon during the Delivered order step when is in Active status. |
| stepDeliveredIconInactive | String which will be used as display icon during the Delivered order step when is in Inactive status. |
Updated 15 days ago