Jump to Content

Custom step icons

You can change the default "Icon" used in the order steps by setting "icon" parameter on each step.

The "Icon" configuration are being set in the "steps" attribute of the configuration object.

Specific configuration parameters

Parameter	Description
steps.confirmed.icon	String which will be used as display icon during the Confirmed order step
steps.picking.icon	String which will be used as display icon during the Picking order step
steps.picking.iconActive	String which will be used as display icon during the Picking order step when is in Active status. Only works with param "showOnly=steps"
steps.picking.iconInactive	String which will be used as display icon during the Picking order step when is in Inactive status. Only works with param "showOnly=steps"
steps.goingToDestination.icon	String which will be used as display icon during the Going To Destination order step
steps.goingToDestination.iconActive	String which will be used as display icon during the Going To Destination order step when is in Active status. Only works with param "showOnly=steps"
steps.goingToDestination.iconInactive	String which will be used as display icon during the Going To Destination order step when is in Inactive status. Only works with param "showOnly=steps"
steps.readyToPickup.icon	String which will be used as display icon during the Ready To Pickup order step
steps.readyToPickup.iconActive	String which will be used as display icon during the Ready To Pickup order step when is in Active status. Only works with param "showOnly=steps"
steps.readyToPickup.iconInactive	String which will be used as display icon during the Ready To Pickup order step when is in Inactive status. Only works with param "showOnly=steps"
steps.pickedUp.icon	String which will be used as display icon during the Picked Up order step
steps.pickedUp.iconActive	String which will be used as display icon during the Picked Up order step when is in Active status. Only works with param "showOnly=steps"
steps.pickedUp.iconInactive	String which will be used as display icon during the Picked Up order step when is in Inactive status. Only works with param "showOnly=steps"
steps.delivered.icon	String which will be used as display icon during the Delivered order step
steps.delivered.iconActive	String which will be used as display icon during the Delivered order step when is in Active status. Only works with param "showOnly=steps"
steps.delivered.iconInactive	String which will be used as display icon during the Delivered order step when is in Inactive status. Only works with param "showOnly=steps"
steps.cancel.icon	String which will be used as display icon during the Cancel order step

Usage Example

Consider the following example:

Confirmed Step

<!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",
        steps: {
            confirmed: {
                icon: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Picking Step

<!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",
        steps: {
            picking: {
                icon: 'Icon url',
            }
         
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Picking Step Active

<!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",
      	showOnly: "steps",
        steps: {
            picking: {
                iconActive: 'Icon url',
            }
         
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Picking Step Inactive

<!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",
      	showOnly: "steps",
        steps: {
            picking: {
                iconInactive: 'Icon url',
            }
         
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Going To Destination Step

<!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",
        steps: {
            goingToDestination: {
                icon: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Going To Destination Step Active

<!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",
      	showOnly: "steps",
        steps: {
            goingToDestination: {
                iconActive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Going To Destination Step Inactive

<!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",
      	showOnly: "steps",
        steps: {
            goingToDestination: {
                iconInactive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Ready To Pickup Step

<!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",
        steps: {
            readytoPickup: {
                icon: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Ready To Pickup Step Active

<!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",
      	showOnly: "steps",
        steps: {
            readytoPickup: {
                iconActive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Ready To Pickup Step Inactive

<!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",
      	showOnly: "steps",
        steps: {
            readytoPickup: {
                iconInactive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Picked up Step

<!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",
        steps: {
            pickedUp: {
                icon: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Picked up Step Active

<!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",
      	showOnly: "steps",
        steps: {
            pickedUp: {
                iconActive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Picked up Step Inactive

<!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",
      	showOnly: "steps",
        steps: {
            pickedUp: {
                iconInactive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Delivered Step

<!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",
        steps: {
            delivered: {
                icon: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Delivered Step Active

<!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",
      	showOnly: "steps",
        steps: {
            delivered: {
                iconActive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Delivered Step Inactive

<!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",
      	showOnly: "steps",
        steps: {
            delivered: {
                iconActive: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content:

Cancel Step

<!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",
        steps: {
            cancel: {
                icon: 'Icon url',
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content: