Bidding Ribbon

This widget places a fixed footer (or ribbon) on the page displaying the status of the bidding process. This widget alone is enough to integrate the entire bidding process on your website!

Common questions/issues

  • Make sure the property has been published prior to placing the widget. If the property is not published, the widget will not appear. You can publish the property yourself by pressing the "publish" button at the dashboard of TheNextBid.

  • DON'T WORRY about loading too much data! This widget checks if the property exists beforehand. Loading a non existing property will only result in an extra page load of ~20kb (which is the SDK) and no additional loading time!

  • This widget adds its height to the bottom padding of the root <html> element. The reason for this is to prevent actual content of your website to be hidden. If there is already a padding on this element you should override this function. Check the onChangeHeight option below.

  • Single page applications are supported! Check the destroy option below.

  • Customisation of the theme is supported! Check the next page of this documentation.

Implementation

First load the SDK of TheNextBid on to the website. This will provide the window.TNB function to initialise the widget.

<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
</head>
<body>
  <!-- 1. Load TheNextBid SDK -->
  <script>
    (function(d, w, s, id){
      if (d.getElementById(id)) {return;}
      w.TNB = function(){w.TNB.calls.push(arguments)}; w.TNB.calls = [];
      var js, x = d.getElementsByTagName(s)[0];
      js = d.createElement(s); js.id = id; js.async = true;
      js.src = 'https://thenextbid.com/sdk-v.1.0.js';
      x.parentNode.insertBefore(js, x);
    }(document, window, 'script', 'thenextbid-jssdk'));
  </script>

  <!-- 2. Initialise the widget -->
  <script>
    // Check the javascript console for error messages if your settings 
    // don't seem to work. This function won't ever actually throw the error,
    // however it will still be logged. Also don't forget to check if your 
    // sourceName and objectId are provided correctly!
    window.TNB('renderBiddingRibbon', {
      // Replace the objectId with the ID for the listing on
      // this page. More info here:
      // https://thenextbid.gitbook.io/widgets/sourcenames-and-object-ids
      objectId: '12345678',

      // Replace the sourcename with the static name provided by
      // TheNextBid. More info here:
      // https://thenextbid.gitbook.io/widgets/sourcenames-and-object-ids
      sourceName: 'voorbeeldmakelaar'
    });
  </script>
</body>
</html>

Syntax

window.TNB(methodName, settings)

Parameters

  • methodName: string - the name of the SDK method to be called. For creating this widget this must be "renderBiddingRibbon".

  • settings: an object containing the following keys

    • sourceName: string - a static name for the API providing information about the desired listing. The value of this field will be provided by TheNextBid. For example all listings served by the API of "Voorbeeld Makelaar B.V." will be stored at TheNextBid with a sourceName of "voorbeeldmakelaar". The value provided to the widget should correspond this value. Check out this link for more information.

    • objectId: string|number - just like the sourceName serves as an identifier for the entire API, objectId serves as an identifier to specify the right listing. This should correspond to the object ID provided by the API. Check out this link for more information.

    • zIndex (optional): string|number - the widget by default has a z-index of 2000. You can change this using this attribute.

    • onChangeAvailability (optional): function(available: boolean) - will be called when the availability state of the listing changes. The function will be called with a boolean which has the value true if the listing is available. This function will also be called once the listing is loaded, also with the current availability as parameter.

    • destroy (optional): function(destroyFunction: function) - use this attribute if you need to remove the widget from the DOM and free up all memory being used (garbage collection). The provided function will be called immediately after initialising with the actual destroyFunction as first parameter. This destroyFunction can then be stored so that it can be called when needed.

    • onChangeHeight (optional): function(newHeight: number) - The footer needs to add some space to the page to make sure it won't be hiding any content (all the way at the bottom of the page). The default implementation of this function looks like this: function(newHeight) { document.documentElement.style.paddingBottom = newHeight && (newHeight + 'px') } Only provide another function if you really need to!

Return value

void

PreviousThe SDKNextTheming

Last updated