You can choose to hide the application's elements
a list of elements you can hide on demand.
Hide elements
- Header
- Origin and destination information
- Delivery Code Information
- Chat Tab With Driver (Only when the Job is in "Going to Destination" Step")
- Delete Product Button (Only in "received")
- Payment State
- Order Map
- Help Center
- Decimals
- Taxes
- Order Help
- Cancel Order
- Products
- Order Number
- Shipping
-Discounts- Payment Method
- Order Detail
- Comment Help Text
- Add products
- Order Late
Specific configuration parameters
Hide elements value
- Beware that as for now, values are logically inverted.
- in order to display the element you set the string 'true', in order to hide, you set the value string 'false'.
- Notice also that values are a string, not a boolean
Parameter | Description |
---|---|
hideElements.header | allows you to choose not to render the order header element of the application default: "true" options: "false: || "true |
hideElements.originDestination | Allows you to choose not to render the order origin-destination element of the application default: "true" options: "false: || "true" |
hideElements.deliveryCode | Allows you to choose not to render the delivery Code element of the application default: "false" options: "false: || "true" |
hideElements.chatWithDriver | Allows you to choose not to render the Driver Tab Chat during the specific step "Going To Destination" NOTE: This Param does not affect the visualization of the chat in any other steps. default: "true" options: "false: || "true" |
hideElements.productDelete | Allows you to choose not to render the Delete Product Button in the product's list default: "false" options: "false: || "true" |
hideElements.paymentStatus | Allows you to render or hide the payment status. default: "false" options: "false: || "true" |
hideElements.orderMap | Allows you to show or hide the map component. default: "false" options: "false: || "true" |
hideElements.helpCenter | Allows you to show or hide the help center component. default: "false" options: "false: || "true" |
hideElements.decimals | Allows you to show or hide the decimals in OrderDetails component. default: "false" options: "false: || "true" |
hideElements.taxes | Allows you to show or hide taxes in OrderDetails component. default: "false" options: "false: || "true" |
hideElements.orderHelp | Allows you to show or hide order Help section default: "false" options: "false: || "true" |
hideElements.cancelOrder | Allows you to show or hide the cancel order button in the CommentForm component default: "false" options: "false: || "true" |
hideElements.products | Allows you to show or hide the products in Products component. default: "false" options: "false: || "true" |
hideElements.orderId | Allows you to show or hide the order number in the header default: "false", options: "false: || "true" |
hideElements.shipping | Allows you to show or hide the shipping in the order details default: "false", options: "false: || "true" |
hideElements.discounts | Allows you to show or hide discounts in the order details default: "false", options: "false: || "true" |
hideElements.paymentMethod | Allows you to show or hide payment method in the order details default: "false", options: "false: || "true" |
hideElements.orderDetail | Allows you to show or hide Order Detail section default: "false", options: "false: || "true" |
hideElements.commentHelpText | Allows to show or hide the help text comment default: "false", options: "false: || "true" |
hideElements.productsAdd | Allows you to show or hide the button Add Product component products. default: "true" options: "false: || "true" |
hideElements.orderLate | Allows you to show or hide the component Order Late default: "true" options: "false: || "true" |
Usage Example
Consider the following examples:
Hiding Header
<!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",
hideElements: {
header: 'false',
},
}
window.instaleap.lsw.render(params)
</script>
</html>
You will see the following content
Hiding Origin Destionation Information
<!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",
hideElements: {
originDestination: 'false',
},
}
window.instaleap.lsw.render(params)
</script>
</html>
You will see the following content
Hiding Delivery Code Element
<!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",
hideElements: {
deliveryCode: 'false'
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hiding Driver Chat While in "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",
hideElements: {
chatWithDriver: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Allowing Delete Product Button
<!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",
hideElements: {
productDelete: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hiding Payment Status
<!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",
hideElements: {
paymentStatus: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hiding Map Component
<!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",
hideElements: {
orderMap: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hiding Help Center Component
<!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",
hideElements: {
helpCenter: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hiding Decimals in Order Details Component
<!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",
hideElements: {
decimals: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hiding Taxes in Order Details Component
<!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",
hideElements: {
taxes: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide the section to understand the charges for the order
<!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",
hideElements: {
orderHelp: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide cancel order button from CommentForm component
<!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",
hideElements: {
cancelOrder: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide Products Component
<!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",
hideElements: {
products: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide order number
<!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",
hideElements: {
orderId: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide shipping
<!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",
hideElements: {
shipping: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide discounts
<!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",
hideElements: {
discounts: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide payment method
<!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",
hideElements: {
paymentMethod: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide order detail
<!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",
hideElements: {
orderDetail: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide help text comment
<!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",
hideElements: {
commentHelpText: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide Button Add Product
<!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",
hideElements: {
productsAdd: true
},
}
window.instaleap.lsw.render(params)
</script>
</html>
Hide Order Late
<!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",
hideElements: {
orderLate: false
},
}
window.instaleap.lsw.render(params)
</script>
</html>