The Javascript library mode allows you to programmatically use the LSW V2 with the Javascript programming language and you can pass parameters to the library as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
<title>LSW v2 Library Mode</title>
<script src="https://widgets.instaleap.tech/widget-2-0-0.js"></script>
</head>
<body>
<div id="my-id-of-html-container"></div>
</body>
<script type='text/javascript'>
console.log('If the LSW v2 loaded correctly you should see the functions ',window.instaleap)
var liveStatusWidget = window.instaleap.liveStatus;
liveStatusWidget.render({
job: 'myJobId', // Required
hasChat: true, // Required
env: "staging" || "production", // Required
theme: { // Optional
primaryColor: "#003865",
secondaryColor: "#EF5B0C",
fontFamily: "Nunito" // it works if the font is imported in your css file (fonts are not loaded in lsw), only the value of font family is changed
},
logoUrl: 'logoUrl', // Optional
token: 'myLswToken', // Required
container: '#my-id-of-html-container',
customStepsName: { // Optional
received: 'newNameForReceivedStep', // Optional
picking: 'newNameForPickingStep', // Optional
storage: 'newNameForStorageStep', // Optional
packing: 'newNameForPackingStep',
goingToDestination: 'newNameForGoingToDestinationStep', // Optional
readyForPickup: 'newNameForReadyForPickupStep', // Optional
inRoute: 'newNameInRouteStep', // Optional
delivered: 'newNameDeliveredStep' // Optional
},
defaultView: { // Optional
lsw: 'chat' || 'details' || 'status' , // Optional
chat: 'shoppers' || 'support' // Optional
},
hideElements: { // Optional
originDestination: 'true' || 'false' , // true shows it and false hides it. Default false. Optional
header: true || false // default true
},
actionBarSize: 48, // Optional
chatChannels: 'shoppers' || 'support', // Optional and chatChannels is Specific Chat Tab
activeTabs:'stateTab' || 'detailTab' || 'chatTab' // Optional
});
</script>
</html>