Introduction

Uplisting provides a direct booking widget which you can embed directly into your website. This allows guests to select a date range, number of guests and location (optional).

Once a guest selects their criteria and clicks the submit button, they are directed to the search listings page of your Uplisting direct booking website, where the appropriate properties are displayed.

The Direct Booking Widget supports two versions of Uplisting's Direct Booking Engine.

• Version 2 (recommended) – For websites built using Uplisting's new Website Builder.
• Version 1 (legacy) – For users using the Legacy Direct Booking Engine.

Before embedding the widget, ensure you're using the correct widget version for your website:

• Existing widget installations remain compatible and continue to use Version 1 by default.
• If you're using the new Website Builder, configure your widget using version: 2.

Which version should I use?

Uplisting booking widget

How to embed the Uplisting direct booking widget into your website

1. Insert the following div (as is) where you want to display the booking widget

HTML

<div class="uplisting-widget"></div>

2. Insert the following code after the closing tag

This code must be inserted below the div tag in step 1. (Note code below was updated on 15th August 2024 for enhanced responsiveness on small screens)

• New Website Builder (new Direct Booking Engine): Use the code below as shown.
• Legacy Direct Booking Engine: Change version: 2 to version: 1 before embedding the widget.

JavaScript

<script type="text/javascript" src="https://d2n64sniz4ei2k.cloudfront.net/property-search-68d0eb58.js"></script>
<script type="text/javascript">
  window.uplistingSearchWidget.init({
    baseUrl: 'YOUR UPLISTING DIRECT BOOKING WEBSITE URL',
    version: 2,
    showLocation: true,
    locationText: 'All cities',
    locations: ['REPLACE WITH CITY', 'REPLACE WITH CITY'],
    color: '#000',
    insertAt: '.uplisting-widget',
    guestsMin: 1,
    guestsMax: 99,
    textColor: '#fff',
    backgroundColor: '#000',
    buttonText: 'Submit',
  });
</script>

Note: Existing widget installations using the Legacy Direct Booking Engine continue to work without any changes. If you're using the new Website Builder, ensure your widget is configured with version: 2

Insert your Uplisting direct booking website URL

3. Replace YOUR UPLISTING DIRECT BOOKING WEBSTE URL

Use your Direct Booking website URL based on the widget version you are using:

• Version 2 (Website Builder): Enter your Direct Booking website domain only (for example, https://prodtest.bookeddirectly.host). Do not append /g.
• Version 1 (Legacy Direct Booking Engine): Append /g to your Direct Booking website URL (for example, https://prodtest.bookeddirectly.host/g).

For example:

• Version 2: https://book.yourwebsite.com
• Version 2: https://urbanrentals.bookeddirectly.host
• Version 1: https://urbanrentals.bookeddirectly.host/g
• Version 2: https://staybnb.net

Display and content options

Location (city dropdown)

Please note that cities and regions within listings must use the Latin/Roman Alphabet.

Rename the button

Change the submit text with the name you prefer.

JavaScript

buttonText: 'Search',

Change button color

Edit the hex code color to edit the button text and background colors.

JavaScript

textColor: '#fff', 
backgroundColor: '#000',

How to alter the design further

Create your own CSS selectors to override those provided by Uplisting by default.

Can't see the date picker on the widget?

Some website builders don't allow iFrames (which is what our widget uses) to take more space than given in its closed form i.e. without the date picker being active.

As such, when someone clicks the Date range picker, the user can't see it as it's hidden behind other panels or sections.

This is due to browser limitations and whilst frustrating, is fixable.

For Website Builders:

Adjust the height of the embedded code section to at least 326px

For CSS/Self-coders:

You can test this by clicking on a date entry, then searching for .datepicker and seeing the .active class.

You'll then just need to amend the Height to at least 326px.

Updated on: 03/07/2026