Place Bid (optional)

The bidding widget is the main widget which needs to be implemented. The bidding widget has a red "bid button". After clicking this button a popup will be opened in which the user has to enter its details. This popup is the "place bid widget" which is described on this page. The place bid widget is already implemented in the bidding widget out of the box. This page describes how to open it manually.

Why add this widget?

It might be desired to create another "bid button" outside of the bidding widget. This is something we used at our own website.

The bidding widget and the place bid widget as seen on the website of TheNextBid. The bid button in red on the top right triggers the place bid widget to be opened, just like red button inside the bidding widget.

Frontend implementation

First load the SDK of TheNextBid on to the website. This will provide the window.TNB function to initialise the place bid widget. Call this function to programmatically open the place bid widget.

Syntax

window.TNB(methodName, settings)

Parameters

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

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

Example usage

<!-- 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. Custom button to place a bid -->
<button id="bid-button">Place my bid!</button>

<!-- 3. Open the widget when needed -->
<script>
  document.getElementById('bid-button')
    .addEventListener('click', function () {
      window.TNB('placeBid', {
        // 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>