Front-end library integration

API requirements:
api_token
Basic integration example:
<body>

...

<button id="wizart-fitting-room-button" onClick="openFittingRoom">
  Fitting room
</button>

<object 
  id="wizart-fitting-room-object" 
  role="dialog" 
  aria-label="Wizart Fitting Room." 
  type="text/html" 
  class="active">
</object>

<style>
  #wizart-fitting-room-object {
      z-index: 2147483646 !important;
      display: none;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background-color: rgba(0, 0, 0, 0.8);
  }
  
  #wizart-fitting-room-object.active {
    display: block;
  }
</style>

<script>
  let api_token = 'CLIENT_SPECIFIC_API_TOKEN';
  let server_address = 'https://pim-client.wizart.tech';

  let fittingRoomObject = document.getElementById('wizart-fitting-room-object');
  let fittingRoomEndpoint = server_address
    + '/fitting-room'
    + '?api_token=' + api_token 
    + '?bba=true'
  ;

  function openFittingRoom () {
    fittingRoomObject.setAttribute('data', fittingRoomEndpoint)
    fittingRoomObject.classList.add('active');
  }

  window.addEventListener('message', function (event) {
    if (~event.origin.indexOf(server_address)) {
      if (event.data === 'close_overlay') {
        fittingRoomObject.removeAttribute('data');
        fittingRoomObject.innerHTML = '';
        fittingRoomObject.classList.remove('active');
      }
    }
  });
</script>

</body>