Jump to Content

Custom step names

You can change the default "Title" and "Help Text" used in the order steps by setting "title" and "help" parameter on each step.

The "Title" and "Help Text" configuration are being set in the "steps" attribute of the configuration object.

Specific configuration parameters

Parameter	Description
steps.confirmed.title	String which will be used as display name during the Confirmed order step
steps.confirmed.help	String which will be used as display help text during the Confirmed order step
steps.picking.title	String which will be used as display name during the Picking order step
steps.picking.help	String which will be used as display help text during the Picking order step
steps.goingToDestination.title	String which will be used as display name during the Going To Destination order step
steps.goingToDestination.help	String which will be used as display help text during the Going To Destination order step
steps.readyToPickup.title	String which will be used as display name during the Ready To Pickup order step
steps.readyForPickup.help	String which will be used as display help text during the Ready To Pickup order step
steps.delivered.title	String which will be used as display name during the Delivered order step
steps.delivered.help	String which will be used as display help text during the Delivered order step
steps.cancel.title	String which will be used as display name during the Cancel order step
steps.cancel.help	String which will be used as display help text during the Cancel order step
steps.pickedUp.title	String which will be used as display name text during the Picked Up order step
steps.pickedUp.help	String which will be used as display help text during the Picked Up 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: {
                title: 'Title to confirmed step',
                help: 'Help text to confirmed step'
            }
        },
    }
    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: {
                title: 'Title to picking step',
                help: 'Help text to picking step'
            }
         
        },
    }
    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: {
                title: 'Title to going to destination step',
                help: 'Help text to going to destination step'
            }
        },
    }
    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: {
                title: 'Title to ready for pickup step',
                help: 'Help text to ready for pickup step'
            }
        },
    }
    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: {
                title: 'Title to delivered step',
                help: 'Help text to delivered step'
            }
        },
    }
    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: {
                title: 'Title to cancel step',
                help: 'Help text to cancel step'
            }
        },
    }
    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: {
                title: 'Title Picked up step',
                help: 'Picked up text step'
            }
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>