You can download a working HTML file of our demonstration page below. The first file includes Modules and the second file is just the basic software without modules. 


Alternatively, you can just copy and paste the following code into an HTML text document, save it and open it with Chrome to see the software working. 



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Demonstration</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="/custom.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


    <!-- Deferred (non-blocking) so the pages load faster -->
    <!-- Latest compiled and minified JavaScript -->
<script defer src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en,Promise"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_MAPS_API" type="text/javascript"></script>
<script defer src="https://hove.eu-west-2.bidjs.com/static/2.0/js/bid-dependencies.min.js"></script>
<script defer src="https://hove.eu-west-2.bidjs.com/static/2.0/prettyphoto/jquery.prettyPhoto.min.js"></script>
<script defer src="https://hove.eu-west-2.bidjs.com/static/2.0/js/hbs-bid.min.js"></script>
<script defer src="https://hove.eu-west-2.bidjs.com/static/2.0/js/bid.min.js"></script>


<script>
window.bidjs = {  
config: {    
          apiBase: 'https://hove.eu-west-2.bidjs.com/auction-007/api', 
          clientId: 'demonstration', 
          googleMapsApiKey: 'YOUR_KEY',
          staticBase: '//hove.eu-west-2.bidjs.com/static/2.0', 
          staticCDN: 'https://static.bidjs.com',     
          staticVersion: '1.4', 
          templateVariant: 'bootstrap3'  
 },  
modules: {    
          auctionDetails: '#!/auctionDetails/%AUCTION_ID%',
          auctionsArchived: true,
          invoices: true,
          lotDetails: '#!/itemDetails/%ITEM_ID%',
          mySales: true
  },  
options: {
          allowTitleChange: true,
          allowMetaDescriptionChange: true,
          standalone: false,
          unsupportedBrowserMessage: 'Your browser is not supported. Please use a browser such as Google Chrome or Microsoft Edge to ensure full functionality'
}}
</script>

  </head>




  <body>

<noscript id="deferred-styles">
  <link href="https://hove.eu-west-2.bidjs.com/static/2.0/prettyphoto/jquery.prettyPhoto.min.css" rel="stylesheet" type="text/css">
  <link href="https://hove.eu-west-2.bidjs.com/static/2.0/css/bid.min.css" rel="stylesheet" type="text/css">
</noscript>

    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#!/">Demonstration</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#!/">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#auctionsArchived">Past Auctions</a></li>
            <li><a href="#!/search"><i class="fa fa-search" aria-hidden="true"></i></a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="x-bidlogix--authenticated-hide hidden"><a class="clickable x-bidlogix--trigger-login">Login</a></li>
            <li class="x-bidlogix--authenticated-hide hidden"><a class="clickable x-bidlogix--trigger-register">Create Account</a></li>
            <li class="x-bidlogix--authenticated-show hidden"><p class="navbar-text">Welcome <span class="x-bidlogix--templated-user"></span></p></li>
            <li class="x-bidlogix--authenticated-show hidden"><a class="clickable x-bidlogix--trigger-my-bids">My Bids</a></li>
            <li class="x-bidlogix--authenticated-show hidden"><a class="clickable x-bidlogix--trigger-my-settings">My Settings</a></li>
            <li class="x-bidlogix--administrator-show hidden"><a target="_blank" rel="noopener">Admin</a></li>
            <li class="x-bidlogix--authenticated-show hidden"><a class="clickable x-bidlogix--trigger-logout">Log Out</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

   

<!-- /.container -->
   <div class="bidlogix-app">
  <div id="bidlogix-modal"></div>
</div>


<div class="container">
  <div id="bidlogix-app" class="row bidlogix-app">
    <div class="col-xs-12 text-center">
      <svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-dual-ring">
        <circle cx="50" cy="50" fill="none" stroke-linecap="round" r="20" stroke-width="2" stroke="#337ab7" stroke-dasharray="31.41592653589793 31.41592653589793" transform="rotate(150 50 50)">
          <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="3s" begin="0s" repeatCount="indefinite"></animateTransform>
        </circle>
        <circle cx="50" cy="50" fill="none" stroke-linecap="round" r="15" stroke-width="2" stroke="#333" stroke-dasharray="23.561944901923447 23.561944901923447" stroke-dashoffset="23.561944901923447" transform="rotate(-150 50 50)">
          <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="3s" begin="0s" repeatCount="indefinite"></animateTransform>
        </circle>
      </svg>
    </div>
  </div>
</div>

<script>
  window.addEventListener('DOMContentLoaded', function() {
      (function($) {
          $(document).ready(function() {
            PageApp.start();
          });
      })(jQuery);
  });
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

<script src="https://static.bidjs.com/1.4/bootstrap3/js/bidjs-modules.chunk.js"></script>
  </body>
</html>