Steps Module
The use of this library is for the visualization of the steps only. This will be displayed throughout the job.
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 3 days ago