Please note: Modules are now an option as part of the main configuration, as of version BidJS 2.0. Please see our previous documentation for older versions of BidJS. 


If you have not already done so, please ensure you have read our Before You Start guide. If you are using WordPress, please view our WordPress specific installation documentation here



Contents

Installing BidJS V2.0 (and above) involves putting the following code blocks into the correct tags for your site and choosing appropriate options for your set up. This document will cover the following details: 

  1. Dependencies
  2. Standard Installation - for websites that don't include Bootstrap already
  3. Minimal Installation - for websites that already include Bootstrap
  4. HTML Container Code
  5. JavaScript Snippet
  6. Options
    1. Browser message
    2. Google analytics
    3. SEO title
    4. SEO meta
    5. Callback triggers
    6. Webcast module (recommended for all webcast clients)
    7. OAuth authentication for SSO
  7. What's Next?


Click on the list item above to jump to the correct area of this document. 



Dependencies

You will need to add tags to the <head> of the document, on the pages where you wish the BidJS Client to run.

We provide the BidJS Client in two styles:

  • Standard - For websites that don't currently include Bootstrap
  • Minimal - For websites built with Bootstrap, or that have Bootstrap already included

The tags required to be included vary slightly, depending on which styles you require.


Standard

Within <head>

<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/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="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/2.0
          staticCDN: 'https://static.bidjs.com', // Do not change    
          staticVersion: 'MY_STATIC_VERSION', // e.g. 1.4 . This is the modules version and will be different to the BidJS version. 
          templateVariant: 'bootstrap3' // either 'bootstrap3' or 'bootstrap4'  
 },  
modules: {    
          auctionDetails: '#!/auctionDetails/%AUCTION_ID%',
          auctionsArchived: true,
          invoices: true,
          lotDetails: '#!/itemDetails/%AUCTION_ID%/%ITEM_ID%',
          mySales: true,
          webcast: 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'
        },
        callback: function (event) {
          console.log(event)
        }
}
</script>

***PLEASE NOTE: callback option is available from October 2019***




(4)(5)(6)

Within <body>

<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>


(4) MY_STATIC_URL should be replaced by the Static Resources Endpoint mentioned in the Configuration Details section


(5) VERSION should be replaced by the Version, as mentioned in the Versioning Section


(6) MY_GOOGLE_MAPS_API should be replaced by an API Key provided to you by Google Maps. If you don't already have one, you may need to obtain one in order for the map functionality within the BidJS Client to work as intended.



Minimal

Within <head>

<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/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="MY_STATIC_URL/VERSION/js/bid-dependencies--no-bootstrap.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/2.0
          staticCDN: 'https://static.bidjs.com', // Do not change    
          staticVersion: 'MY_STATIC_VERSION', // e.g. 1.4. This is the modules version and will be different to the BidJS version.  
          templateVariant: 'bootstrap3' // either 'bootstrap3' or 'bootstrap4'  
 },  
modules: {    
          auctionDetails: '#!/auctionDetails/%AUCTION_ID%',
          auctionsArchived: true,
          invoices: true,
          lotDetails: '#!/itemDetails/%AUCTION_ID%/%ITEM_ID%',
          mySales: true,
          webcast: 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'
        },
        callback: function (event) {
          console.log(event)
        }
}
</script>

***PLEASE NOTE: callback option is available from October 2019***




(7)(8)(9)

Please note: Your own version of bootstrap.js should be loaded AFTER the bid-dependencies--no-bootstrap.min.js file, otherwise you may come across Javascript Errors in your application.


Within <body>

<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--no-bootstrap.min.css" rel="stylesheet" type="text/css">
</noscript>


(7) MY_STATIC_URL should be replaced by the Static Resources Endpoint mentioned in the Configuration Details section


(8) VERSION should be replaced by the Version, as mentioned in the Versioning Section


(9) MY_GOOGLE_MAPS_API should be replaced by an API Key provided to you by Google Maps. If you don't already have one, you may need to obtain one in order for the map functionality within the BidJS Client to work as intended.


Please note, you can find out more information about Modules in our Module specific documentation. This includes information on the modules themselves and their individual options. 


HTML Container

Where you wish for the JS Client to display, you should place the following HTML

<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>
<div class="bidlogix-app">
  <div id="bidlogix-modal"></div>
</div>
<div class="container bidlogix-app">
  <div id="bidjs"></div>
</div>




Javascript Snippet

You will then need to add the following to the <body> of your document on the page(s) on which you wish the BidJS Client to display(10)(11)(12)(13):

<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/MY_STATIC_VERSION/bootstrap3/js/bidjs-modules.chunk.js"> 
//MY_STATIC_VERSION is the same as the modules version. This will be different to the BidJS version number
</script>




Options

Below, we have explained the different options available, their configuration and what they do. 


Custom Unsupported Browser Message

Version 1.4 and upwards

On version BidJS 1.4 and above, an alert is now displayed to BidJS visitors who are using Internet Explorer 11 or below. This warns them they they are using an unsupported browser, and that this browser does not ensure full functionality. You can customise this message by putting your content within this option field:

options: {
    unsupportedBrowserMessage: 'Your browser is not supported. Please use a browser such as Google Chrome or Microsoft Edge to ensure full functionality'
}



Google Analytics Tracking

Version 1.5 and upwards

On version BidJS 1.5 and above, you now have the ability to pass in your Google Analytics tracking ID, to get BidJS pages added to your reports

options: {
    analyticsCode: 'UA-1234567-1'
}


If you have already initialised analytics on your website with a specific namespace, you can also define this. If you're not sure if this applies to you, it likely doesn't.

options: {
    analyticsCode: 'UA-1234567-1',
    analyticsNamespace: 'website'
}



Dynamic Page Title

You can pass an option to allow the BidJS client to dynamically update the Page Title, using titles specified within the Management Console. This is particularly useful for SEO, and may result in your items being ranked higher within Google Search Results. 

Unless specified, this defaults to false.

options: {
    allowTitleChange: true
}




Dynamic Meta Description

You can pass an option to allow the BidJS client to dynamically update the Meta Description (if it exists on your page), using values specified within the Management Console. This is particularly useful for SEO, and may result in your items being ranked higher within Google Search Results.

Unless specified, this defaults to false.

options: {
    allowMetaDescriptionChange: true
}



Event Callback (available from October 2019)

Event Callback can be used by replacing the console.log(event) with your own script. Your script will be passed using the events listed below, using the following format:

{
  action: 'BIDJS_EVENT_NAME',
  data: {
    // some events send additional information, e.g. `BIDJS_NAVIGATED` also sends `path`, with a value of the current page
  }
}

Here are the available events: 

• BIDJS_INITIALISED / BIDJS_MODULES_INITIALISED - When BidJS scripts first start
• BIDJS_LOADED / BIDJS_MODULES_LOADED - When BidJS has finished starting, and is a functioning application
• BIDJS_AUTHENTICATED - When the application deems the user to be logged in (SSO or Native)
• BIDJS_UNAUTHENTICATED - When the application deems the user to be logged out (SSO or Native)
• BIDJS_NAVIGATED / BIDJS_MODULES_NAVIGATED - Whenever the BidJS page changes (includes data.path to show the page navigated to 



Webcast Module (available from October 2019)

This implements our new webcast module with a full redesign and bug fixes. We recommend this for use by all webcast clients, however, if you would prefer to revert to the legacy webcast view, please change webcast to 'false'. 



OAuth Authentication

You can pass a set of options to enable OAuth Authentication with your own OAuth server. For more information, please see the OAuth Authentication section.

Unless specified, this defaults to false

options: {
    oAuth: {
        isTokenLocalStorage: true,
        loginUrl: 'https://www.yourdomain.com?redirect_to=&lt;&lt;REDIRECT&gt;>',
        logoutUrl: 'https://www.yourdomain.com/logout',
        tokenName: 'yourAuthTokenName'
    }
}



ISTOKENLOCALSTORAGE (BOOLEAN | OPTIONAL | DEFAULT: FALSE)

If True, we will look for your authentication token as a localStorage item, if False, we will look for your token as a cookie.


LOGINURL (STRING | REQUIRED)

The URL we should send users to in order to login

Note: we recommend your login page has the ability to redirect users to a url defined as a parameter (seen in the example above).
If your login page has the ability to redirect upon login, you can enter <<REDIRECT>> to the defined loginUrl, and this will be replaced by a URLEncoded version of the current URL upon navigation, to ensure the user is returned to the previous page upon successful login.


LOGOUTURL (STRING | REQUIRED)

The URL we should send users to upon logging out of the BidJS Application (normally your OAuth logout URL)


TOKENNAME (STRING | REQUIRED)

The name / key of the token, which you store as LocalStorage Item or Cookie


You should now, all being well, have a basic working BidJS Client implemented on your website!



What's Next?

Here's some more documents to get you fully set up: