Guides

Hide elements

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
ParameterDescription
hideElements.headerallows you to choose not to render the order header element of the application

default: "true"
options: "false: || "true
hideElements.originDestinationAllows you to choose not to render the order origin-destination element of the application

default: "true"
options: "false: || "true"
hideElements.deliveryCodeAllows you to choose not to render the delivery Code element of the application

default: "false"
options: "false: || "true"
hideElements.chatWithDriverAllows 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.productDeleteAllows you to choose not to render the Delete Product Button in the product's list

default: "false"
options: "false: || "true"
hideElements.paymentStatusAllows you to render or hide the payment status.

default: "false"
options: "false: || "true"
hideElements.orderMapAllows you to show or hide the map component.

default: "false"
options: "false: || "true"
hideElements.helpCenterAllows you to show or hide the help center component.

default: "false"
options: "false: || "true"
hideElements.decimalsAllows you to show or hide the decimals in OrderDetails component.

default: "false"
options: "false: || "true"
hideElements.taxesAllows you to show or hide taxes in OrderDetails component.

default: "false"
options: "false: || "true"
hideElements.orderHelpAllows you to show or hide order Help section

default: "false"
options: "false: || "true"
hideElements.cancelOrderAllows you to show or hide the cancel order button in the CommentForm component

default: "false"
options: "false: || "true"
hideElements.productsAllows you to show or hide the products in Products component.

default: "false"
options: "false: || "true"
hideElements.orderIdAllows you to show or hide the order number in the header
default: "false",
options: "false: || "true"
hideElements.shippingAllows you to show or hide the shipping in the order details
default: "false",
options: "false: || "true"
hideElements.discountsAllows you to show or hide discounts in the order details
default: "false",
options: "false: || "true"
hideElements.paymentMethodAllows you to show or hide payment method in the order details
default: "false",
options: "false: || "true"
hideElements.orderDetailAllows you to show or hide Order Detail section
default: "false",
options: "false: || "true"
hideElements.commentHelpTextAllows to show or hide the help text comment
default: "false",
options: "false: || "true"
hideElements.productsAddAllows you to show or hide the button Add Product component products.

default: "true"
options: "false: || "true"
hideElements.orderLateAllows 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>