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 for a specified period on your website before carrying on with booking, you can add our Date 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.
What type of website do you have?
Who will add the Date Widget?
- We can add the Date Widget to your website at no charge.
- We will need these website administrator-level login details if we add the widget for you:
- URL for logging into administration side of editing website.
- Username
- Password
- FTP details, or hosting site/CPanel login details.
- Your web designer can easily add the Date Widget to your website with the files provided in this tutorial.
You need knowledge of WordPress and basic website editing skills to implement this widget. If you do not have this experience, please get in touch with your website administrator.
Example of the Date Widget
This is what the Date Widget could look like.
Make sure you have these tools before you start
- An IDE (integrated development environment)/any text editor.
- FileZilla or any FTP solution equivalent.
- WordPress administrator level admin access.
Download the .zip folder.
- Find the "date_widget_source.zip" folder for download here.
Open the nb_DateWidget.js in your IDE/text editor
- Replace the BBID with your BBID in the Please Provide Config section.
Open the nb_DateWidget.html in your IDE/text editor
- Select All to choose everything in the file.
Upload files via FTP
- Connect via FTP to the WordPress site
- Navigate to a folder where you can upload the following from the unzipped SRC folder:
- nb_calendar.svg
- nb_DateWidget.js
- nb_DateWidgetStyle.css
- Upload the files.
Add the widget to your page
- Log in to WordPress admin.
- Navigate to the page you would like to add the widget.
- On the nb_DateWidget.html (open in your IDE/text editor), copy the selection and paste it in the WordPress page where you want the widget to display.
- You will need to paste this in an HTML block whether using the Block Editor or any type of Page Builder.
- Update the following links, on the newly pasted code in the WordPress site with the path that you uploaded the documents to in your FTP application:
- nb_DateWidgetStyle.css
- nb_DateWidget.js
- The path can be either relative or absolute.
- Save the HTML block.
- Publish/update the page.
- View the page to see the Date Widget.
Your Springnest website has a Date Widget integration.
Please follow the steps on the Springest website to activate if it is not yet activated.
Who will add the Date Widget?
- We can add the Date Widget to your website at no charge.
Do you have file upload capabilities?
Does your login details allow for Javascript and Custom Style Sheet files to be uploaded to your website's directory?
We will need these website administrator-level login details if we add the widget for you:
- URL for logging into administration side of editing website.
- Username
- Password
- FTP details, or hosting site/CPanel login details.
We will need these website administrator-level login details if we add the widget for you:
- URL for logging into administration side of editing website.
- Username
- Password
Do you have file upload capabilities?
Does your login details allow for Javascript and Custom Style Sheet files to be uploaded to your website's directory?
- Your web designer can easily add the Date Widget to your website with the files provided in this tutorial.
Example of the Date Widget
This is what the Date Widget could look like.
Make sure you have these tools before you start
- An IDE (integrated development environment)/any text editor.
- FileZilla or any FTP solution equivalent.
- WordPress administrator level admin access.
Download the .zip folder.
- Find the "date_widget_source.zip" folder for download here.
Open the nb_DateWidget.js in your IDE/text editor
- Replace the BBID with your BBID in the Please Provide Config section.
Open the nb_DateWidget.html in your IDE/text editor
- Select All to choose everything in the file.
Upload files via FTP
- Connect via FTP to the WordPress site
- Navigate to a folder where you can upload the following from the unzipped SRC folder:
- nb_calendar.svg
- nb_DateWidget.js
- nb_DateWidgetStyle.css
- Upload the files.
Add the widget to your page
- Log in to WordPress admin.
- Navigate to the page you would like to add the widget.
- On the nb_DateWidget.html (open in your IDE/text editor), copy the selection and paste it in the WordPress page where you want the widget to display.
- You will need to paste this in an HTML block whether using the Block Editor or any type of Page Builder.
- Update the following links, on the newly pasted code in the WordPress site with the path that you uploaded the documents to in your FTP application:
- nb_DateWidgetStyle.css
- nb_DateWidget.js
- The path can be either relative or absolute.
- Save the HTML block.
- Publish/update the page.
- View the page to see the Date Widget.
Example of the Date Widget
This is what the Date Widget could look like.
Add the Date Widget
- Copy and paste these lines of code to your website.
<script type="text/javascript" src="https://www.nightsbridge.co.za/bridge/jsp/widget/searchbox?bbid=xxxxx&layout=1&id=js_nightsbridge"></script>
<div id="js_nightsbridge"></div>
- Add the script tag to either the header or footer tags of your website.
- Replace the "xxxxx" in the script tag with your 5-digit NightsBridge BBID.
- Choose a layout, vertical or horizontal, by changing the "layout=" attribute in the script tag, to either "1" or "2".
- Add the div tag to each area on your website that you would like the widget to appear.