Please make sure you read Installing BidJS - Before you Start and Installing BidJS - Versioning before attempting to install BidJS. 


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


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


(7)(8)(9)

Please note: Your own version of bootstrap.js should be loaded AFTER the bid-dependencies--no-bootstrap.min.jsfile, 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.



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>




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({
                apiBase: "MY_API_BASE_ENDPOINT",
                clientId: "/MY_CLIENT_ID",
                staticBase: "MY_STATIC_URL/VERSION",
                useApi: true
              });
          });
      })(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>


(10) MY_API_BASE_ENDPOINT should be replaced by the API Base Endpoint mentioned in the Configuration Details section


(11) MY_CLIENT_ID should be replaced by the Client Identifier mentioned in the Configuration Details section


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


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



Javascript Options

There are some options you can pass into the Javascript snippet to adjust how it behaves within your site. This is passed as an object into the snippet.

<script>
  window.addEventListener('DOMContentLoaded', function() {
      (function($) {
          $(document).ready(function() {
            PageApp.start({
                apiBase: "MY_API_BASE_ENDPOINT",
                clientId: "/MY_CLIENT_ID",
                staticBase: "MY_STATIC_URL/VERSION",
                useApi: true,
                options: {
                    optionA: value,
                    optionB: value
                }
              });
          });
      })(jQuery);
  });
  ...
</script>



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
}



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



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=<<REDIRECT>>',
        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 working BidJS Client implemented on your website!