Bidding (DEPRECATED)

This widget is deprecated and might be removed in the future. Please use the bidding ribbon instead.

The bidding widget can be used by customers to bid on a listing. This widget has to be placed in the frontend. There is however also an endpoint available for a backend service to check whether or not TheNextBid has a bidding widget available for the given listing. Using this endpoint is optional.

Frontend implementation

First load the SDK of TheNextBid on to the website. This will provide the window.TNB function to initialise the bidding widget. To call this function you should first create a container element into which the widget should be placed.

Please note that we only provide the content of the widget and not the styling of the container. The widget is responsive and already has padding and a white background included, but it does not have margin, border or shadow. Feel free to add these properties yourself and tweak them in the style of your website.

Syntax

window.TNB(methodName, settings)

Parameters

methodName: string - the name of the SDK method to be called. For creating this widget this must be "renderBidding".
settings: an object containing the following keys
- element: HTMLElement|JQuery - the container element for the widget.
- 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.
- showLoadingState (optional): boolean default false - display a loading screen while the listing is being loaded. If false the widget will be empty until the listing is entirely loaded.
- showUnavailableState (optional): boolean default false - display a screen stating that the widget is unavailable when this is the case. If false the widget will be empty when the widget is loaded and the listing is unavailable.
- 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 key 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.

Return value

void

Example usage

<!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. Create a container element -->
  <div id="container"></div>

  <!-- 3. 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('renderBidding', {
      element: document.getElementById('container'),

      // 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',

      // Display a loading screen for when the widget is still loading
      showLoadingState: false,
      // Display a screen for when the listing is loaded but unavailable
      showUnavailableState: false
    });
  </script>
</body>
</html>

Backend implementation (optional)

It might happen that the widget above will be loaded without information available for the given listing. The widget might have been deactivated by the owner of the listing. Prior to generating the HTML page the following endpoint can be used to perform a check to see whether the bidding widget for a listing is available or not.

checkWidgetAvailability

GET https://thenextbid.com/api/bids/checkWidgetAvailability

Checks whether the widget is active or not.

Query Parameters

PreviousEnlist (DEPRECATED)

Last updated 6 years ago

Frontend implementation

Syntax

window.TNB(methodName, settings)

Parameters

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

settings: an object containing the following keys

element: HTMLElement|JQuery - the container element for the widget.
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.
showLoadingState (optional): boolean default false - display a loading screen while the listing is being loaded. If false the widget will be empty until the listing is entirely loaded.
showUnavailableState (optional): boolean default false - display a screen stating that the widget is unavailable when this is the case. If false the widget will be empty when the widget is loaded and the listing is unavailable.
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 key 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.

Return value

void

Example usage

<!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. Create a container element -->
  <div id="container"></div>

  <!-- 3. 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('renderBidding', {
      element: document.getElementById('container'),

      // 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',

      // Display a loading screen for when the widget is still loading
      showLoadingState: false,
      // Display a screen for when the listing is loaded but unavailable
      showUnavailableState: false
    });
  </script>
</body>
</html>

Backend implementation (optional)

Name

Type

Description