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.goingToDestination.icon	String which will be used as display icon during the Going To Destination order step
steps.readyToPickup.icon	String which will be used as display icon during the Ready To Pickup order step
steps.pickedUp.icon	String which will be used as display icon during the Picked Up order step
steps.delivered.icon	String which will be used as display icon during the Delivered order step
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:

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:

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:

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:

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:

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: