Installation

Your Details

To get BidJS installed on your site, you'll first need to ensure you have the following information:

  • Your API Base Endpoint
  • Your Static Resources Endpoint
  • Your client Identifier

We'll also be referencing version throughout this document. The latest version and instructions on upgrading between versions can be found in our Release Notes section.

If you don't have this, or just want to try and get implementation working with demo data, you can use the following:

Demonstration Details

  • API Base Endpoint: //hove.eu-west-2.bidjs.com/auction-007/api
  • Static Resources Endpoint: //hove.eu-west-2.bidjs.com/static/3
  • Client ID: demonstration

At the time of writing, the current version is 3 or 3.0 depending on whether you want to use Loose or Strict Versioning.

Step 1: Dependencies and Configuration

The following will need to be added to the <head> of the page(s) you want BidJS installed on.

This is your configuration for the BidJS application.

In further steps, this will be the section you'll need to adjust, should you wish to turn features on or off.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script defer src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_MAPS_API" type="text/javascript"></script>
<script defer src="MY_STATIC_URL/VERSION/js/bid-dependencies.min.js"></script>
<script defer src="MY_STATIC_URL/VERSION/prettyphoto/jquery.prettyPhoto.min.js"></script>
<script defer src="MY_STATIC_URL/VERSION/js/hbs-bid.min.js"></script>
<script defer src="MY_STATIC_URL/VERSION/js/bid.min.js"></script>
<script>
window.bidjs = {
config: {
apiBase: 'MY_API_BASE_ENDPOINT', // e.g. //demo.eu-west-2.bidjs.com/auction-007/api
clientId: 'MY_CLIENT_ID', // e.g. demonstration
googleMapsApiKey: 'YOUR_KEY',
staticBase: 'MY_STATIC_URL/VERSION', // e.g. //demo.eu-west-2.bidjs.com/static/3.0
staticCDN: 'https://static.bidjs.com',
staticVersion: 'VERSION',
websocketBase: 'wss://broadcast.YOUR_REGION.bidjs.com' //e.g. wss://broadcast.eu-west-2.bidjs.com
},
modules: {
auctionDetails: '#!/auctionDetails/%AUCTION_ID%',
auctionsArchived: true,
invoices: true,
lotDetails: '#!/itemDetails/%AUCTION_ID%/%ITEM_ID%',
mySales: true,
webcast: true,
login: true,
register: true
},
options: {}
}
</script>
caution

Please make sure to change all of the parts in CAPITAL LETTERS within the script sources, and the config (not modules) object to match your details

Step 2: HTML Container

You should place the following HTML where you want the BidJS application to show on your page.

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

Step 3: Javascript Runtime

You should place the following HTML and Javascript before the end of the <body> on the page.

<noscript id="deferred-styles">
<link href="MY_STATIC_URL/VERSION/prettyphoto/jquery.prettyPhoto.min.css" rel="stylesheet" type="text/css">
<link href="MY_STATIC_URL/VERSION/css/bid.min.css" rel="stylesheet" type="text/css">
</noscript>
<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;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
<script src="https://static.bidjs.com/VERSION/bootstrap3/js/bidjs-modules.chunk.js">
</script>
caution

Please make sure to change the variables in CAPITAL LETTERS above, to match your details you're installing

Success & Next Steps

With the above steps followed, a basic implementation of BidJS should now be on your site

There are numerous options and configurations, to further customise BidJS. It's recommended to browse these on our Configuration section