You can change the default "Inactive" and "Active" Icon used in the order substeps by setting "icon" and "iconInactive" parameter on each step.
The "icon" and "iconInactive" configuration are being set in the "substeps" attribute of the configuration object.
Specific configuration parameters
| Parameter | Description |
|---|---|
| substeps.confirmed.icon | String with an URL which will be used as display icon in the Confirmed order substep |
| substeps.picking.icon | String with an URL which will be used as display icon in the Picking order substep |
| substeps.picking.iconActive | String with an URL which will be used as display icon in the Picking order substep when substep is active |
| substeps.picking.iconInactive | String with an URL which will be used as display icon in the Picking order substep when substep is inactive |
| substeps.goingToDestination.icon | String with an URL which will be used as display icon in the Going To Destination order substep |
| substeps.goingToDestination.iconActive | String with an URL which will be used as display icon in the Going To Destination order substep when substep is active |
| substeps.goingToDestination.iconInactive | String with an URL which will be used as display icon in the Going To Destination order substep when substep is inactive |
| substeps.readyForPickup.icon | String with an URL which will be used as display icon in the Ready For Pickup order substep |
| substeps.readyForPickup.iconActive | String with an URL which will be used as display icon in the Ready For Pickup order substep when substep is active |
| substeps.readyForPickup.iconInactive | String with an URL which will be used as display icon in the Ready For Pickup order substep when substep is inactive |
| substeps.delivered.icon | String with an URL which will be used as display icon in the Delivered order substep |
| substeps.delivered.iconInactive | String with an URL which will be used as display icon in the Delivered order substep when substep is active |
| substeps.delivered.iconInactive | String with an URL which will be used as display icon in the Delivered order substep when substep is inactive |
| substeps.pickedUp.icon | String with an URL which will be used as display icon in the PickedUp order substep |
| substeps.pickedUp.iconActive | String with an URL which will be used as display icon in the PickedUp order substep when substep is active |
| substeps.pickedUp.iconInactive | String with an URL which will be used as display icon in the PickedUp order substep when substep is inactive |
Usage Example
Consider the following example:
<!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/lsw.js"></script>
<script>
const params = {
job: "myJob",
token: "myToken",
container: "#instaleap-lsw-v3",
substeps: {
received: {
icon: 'https://instaleap.atlassian.net/rest/servicedesk/1/customer/viewport-resources/portal-logo/16/6'
},
picking: {
icon: 'https://instaleap.atlassian.net/rest/servicedesk/1/customer/viewport-resources/portal-logo/16/6',
iconActive: 'https://cdn-icons-png.flaticon.com/512/2266/2266386.png',
iconInactive: 'https://vormir-lsw-v3.instaleap.io/assets/map-pin-icon.svg'
},
goingToDestination: {
icon: 'https://instaleap.atlassian.net/rest/servicedesk/1/customer/viewport-resources/portal-logo/16/6'
},
delivered: {
icon: 'https://instaleap.atlassian.net/rest/servicedesk/1/customer/viewport-resources/portal-logo/16/6',
iconActive: 'https://cdn-icons-png.flaticon.com/512/2266/2266386.png',
iconInactive: 'https://vormir-lsw-v3.instaleap.io/assets/map-pin-icon.svg'
},
readyForPickup: {
icon: 'https://instaleap.atlassian.net/rest/servicedesk/1/customer/viewport-resources/portal-logo/16/6',
iconInactive: 'https://vormir-lsw-v3.instaleap.io/assets/map-pin-icon.svg'
},
pickedUp: {
icon: 'https://instaleap.atlassian.net/rest/servicedesk/1/customer/viewport-resources/portal-logo/16/6',
iconActive: 'https://cdn-icons-png.flaticon.com/512/2266/2266386.png',
iconInactive: 'https://vormir-lsw-v3.instaleap.io/assets/map-pin-icon.svg'
},
},
}
window.instaleap.lsw.render(params)
</script>
</html>
You will see the following content:
Example when the state of the order is Picked Up