Live Status Widget V2.X Library JS Mode

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>