Realworks Website

This guide is only applicable if you are using the Realworks CRM and if you are also using their template for your website. So how do you know if you are using this template? Go to your website and go to a page showing a property (or listing). The address (URL) on the top of the browser should contain /aanbod/woningaanbod.

Google Tag Manager

To place the widget of TheNextBid you should use Google Tag Manager. The following steps can be performed from the dashboard of Google Tag Manager. It is required that you are already registered for Google Tag Manager and that it is already coupled and active on your Realworks website.

1. Create a tag

Go to Google Tag Manager. Once logged in, you will find an option to add a new tag. Click it.

2. Rename the tag

First click the title above to rename the new tag. Rename this to "TheNextBid". Then click the tag configuration.

3. Tag configuration

In the list which now appears you should see an option saying "Custom HTML". Click it.

4. Paste code

Put the following code in the screen which now appears. In this code you will also be able to customise the widget as desired.

<script type="text/javascript">
  // See https://thenextbid.gitbook.io/widgets/setup for more information about 
  // initialising the SDK of TheNextBid
  (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'));

  // See https://thenextbid.gitbook.io/widgets/theming for more information about
  // customising the theme of the widget.
  window.TNB('setTheme', {
    colors: {
      primary: '#00ADED',
      secondary: '#EA5049'
    }
  });

  var match = /^\/aanbod\/woningaanbod\/[^/]+\/[^/]+\/[^/-]+-(\d+)/.exec(location.pathname);
  if (match) {
    // See https://thenextbid.gitbook.io/widgets/bidding-ribbon for more information
    // and options about the widget
    window.TNB('renderBiddingRibbon', {
      objectId: match[1],
      sourceName: 'realworks'
    });
  }
</script>

Then click the "Triggers" option below to add a trigger.

5. Add a trigger

At the screen which now appears you will see a variety of possible triggers. The trigger defines when the code from the previous step will be executed. The code which we showed above includes a check to see if it can show a relevant widget. Therefore we can trigger our code to load on every page because it won't do anything on irrelevant pages.

Find the trigger called "All Pages" which loads when the page is loaded. If it doesn't exist you should create it using the "+" icon to the right. Once you found or created it you can simply click it to add it to our tag.

6. Activate the tag

Click the "save" button on the top right corner to save our tag. Then activate the new configuration the way you're used to.

We are aware that "the way you're used to" sounds a bit vague. Probably this is done by clicking the "send" and "publish" buttons on the top right of your dashboard. However it might be different for some environments.

Making changes

Congratulations! The widget is now live on your website. Don't forget to activate the listings on your dashboard at TheNextBid so that the widgets will actually appear.

Maybe at this moment you will realise that you have to make changes to the widget. Don't worry, you make changes yourself at any time! At your dashboard of Google Tag Manager you will see "TheNextBid" listed as one of your tags. If you click it you will be able to change the configuration by changing the code which you pasted. See the other pages on this website on how to change the theming or how to change the other options of the bidding ribbon.