expivi-demo.html

<html>
    <head>
      <title>Expivi - 3D Configurator sample code</title>
      <link href="https://admin.expivi.net/widgets/assets/v1.470/ExpiviComponent.css" rel="stylesheet" />
      <script src="https://admin.expivi.net/widgets/assets/v1.470/viewer.js"></script>
      <script src="https://admin.expivi.net/widgets/assets/v1.470/ExpiviComponent.js"></script>
      <style>
      .expivi-single-product-container {
        display: table;
        height: 100%;
        width: 100%;
      }

      .expivi-single-product-container .expivi-viewer-container {
        display: table-cell;
        width: 64%;
        padding-right: 15px;
        vertical-align: top;
      }

      .expivi-single-product-container .expivi-option-container {
        height: 100%;
        display: table-cell;
        width: 36%;
      }

      @media (max-width: 600px) {
        .expivi-single-product-container {
          display: block;
        }

        .expivi-single-product-container .expivi-viewer-container {
          height: 40vh;
          display: block;
          width: 100%;
          padding-right: 0;
        }

        .expivi-single-product-container .expivi-option-container {
          height: initial;
          display: block;
          width: 100%;
        }
      }
      </style>
  </head>

  <body style="width: 100%;height: 100%;margin:0;padding:0">
      <div class="expivi-single-product-container">
      <div class="expivi-viewer-container">
        <div id="viewerContainer" style="position: sticky;top:0;width:100%;height:100vh;"></div>
      </div>

      <div class="expivi-option-container">
        <div id="priceContainer"></div>
        <div id="optionsContainer"></div>
      </div>
    </div>

    <script type="text/javascript">
      window.addEventListener('load', function () {
        var expiviInstance = new ExpiviComponent.default({
          catalogueId: 15599,
          viewerContainer: "#viewerContainer",
          optionContainer: "#optionsContainer",
          priceSelectors: "#priceContainer",
          currency: "USD",
          locale: "en",
          token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjJjYzZlMmNjNWZkNDM2Yjk4NmE0NmE3ZDcxZGRjNGMwMzg5YTcxOTA5ZGU3NzNlNTc5ZDU4YWY0YWMzYzc1YWQyOGFmMTc1ZDE5ODY5NGVmIn0.eyJhdWQiOiIxIiwianRpIjoiMmNjNmUyY2M1ZmQ0MzZiOTg2YTQ2YTdkNzFkZGM0YzAzODlhNzE5MDlkZTc3M2U1NzlkNThhZjRhYzNjNzVhZDI4YWYxNzVkMTk4Njk0ZWYiLCJpYXQiOjE2NTQ0OTEzMzMsIm5iZiI6MTY1NDQ5MTMzMywiZXhwIjoxOTcwMTEwNTMzLCJzdWIiOiI0MDc5Iiwic2NvcGVzIjpbXX0.BWfK_Vk5Br7QeLEXK4gs5xKvlHGlMn6LTEgQd5toaCI6NjUIuOYCEVy6nm44I_vBfVCprN3nGJhT2FFhAkZkMxG8hUhDRByOWaOoUGEVa858ryFFCEtwnCyHGhvM4H8ToefOXTS3sl91GUEdg0tzwa9iPZBKASVR4XhECah5DK4MCR06HjSFLJQkAl5555SqVF_tuDOqlBx8o0O6TT4ufnVC8zeNcnPMtxbU-6y2DifMnRsRUHPMo0VjxLJ-bXFQ-k0riElL4jW08MvdpOWAn9_EedoPcsHa-WhtzUWvp8ZbZDogv-i0TCj0ep2c_5FAG1thh44kzrBPbokIxJRzNO-MuFVBT1f9Rj8MitC7bT3T226Wo18vwYu_yRsjGe-RlZzyz2qg6kPeKVMtWQVbJvDsQYikeFvPnQv27ahfz04iZ9RZ4nH5mY2H0Xd8TKPHvnNWUYqQFXZU7ZODmrZZ8Lo8thcYlLrNKHCZHsKkVJtRfvM71DzJzZRszfroNCT5VgmmKTrDDi_FgI7ZADfAEpDN8o73zBI6gaKLex2j6lxWCfmMTnY9zbRNGSWvCaS1TIdc9f5vuQFcd9VMlKAwgIeA-jVR5RO3g63KfxKOpfkZMOP8OspA0TvLZgDDFfZwSGMPR7rO43xy7g7o-E9Q3pC_XvxBr2zWrI5f9EiRLp8",
          preset: ""
        });
      });
    </script>
  </body>
<html>