BridgeIT Tutorials

How to add the Availability Grid Widget to a website

As a default, the Book Now button on your website links to the NightsBridge booking form where guests can search for availability.

If you would like your potential guests to search for availability on your website before carrying on with booking, you can add our Availability Grid Widget.

Example of an Availability Grid Widget

This is what an Availability Grid Widget could look like.

Add the Availability Grid Widget

There are two ways to add the Date Widget to your website. We can add it for you or your web designer can do the change.

NightsBridge can add the Availability Grid Widget

  • We can add the Availability Grid Widget to your website at no charge.
  • We will need these website administrative login details if we add the widget for you:
    • URL for logging into administration side of editing website.
    • Username
    • Password

Your web designer can add the Availability Grid Widget

  • The Availability Grid widget is not mobile responsive and the minimum width should not be less than 960px.
  • You can have more than one Availability Grid Widget on a page.

To add the widget:

  • Copy and paste this line of code to each place you would like the widget to appear on your website.

<div id="nb_gridwidget"></div>

<script type="text/javascript" src="https://www.nightsbridge.co.za/bridge/view?gridwidget=1&bbid=XXXXX&height=480&width=960"></script>

  • Replace the "XXXXX" in the script tag with your 5-digit NightsBridge BBID.

Restricting the AvailGrid Widget to a specific room type

This is useful when you want to display a particular room type's availability on a specific page for that room type on your website. i.e if each of your room types has its own web page/ section on your website.

<script type="text/javascript"  src="https://www.nightsbridge.co.za/bridge/view?gridwidget=1&bbid=XXXXX&bbrtid=Y&height=480&width=960"></script>  

<div id="nb_gridwidget"></div>

  • Replace the "XXXXX" in the script tag with your 5-digit NightsBridge BBID.
  • Replace the "Y" in the script tag with the room type's NightsBridge ID.
    • Contact NightsBridge support who will assist with a list of your unique room type IDs.
Previous Article How can guests search for availability on my website for a period instead of using the Book Now button?
Next Article How can guests see the availability of all the properties on my website instead of using the Book Now button?