> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.uplisting.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Direct booking widget

# **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.


| **📢 As of 1 July 2026**, we have released a version to our Direct Widget to support both the Legacy Direct Booking Engine and our new Website Builder.


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?

| If you're using | Widget version |
| ---- |
| Website Builder (new Direct Booking Engine) | `version: 2` |
| Legacy Direct Booking Engine | `version: 1` (default) |



### 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
```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
```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)

||| 🚧 To display the location (city) dropdown, Replace ['REPLACE WITH CITY'] with each city you wish to provide, separated by a comma. 

||| For example: locations: [London', 'Birmingham', 'Cardiff'], The locations must be spelled in exactly the same way as they appear on your Uplisting properties.🚧

||| To hide the city location (city) dropdown, Set 'showLocation: false' and leave the 'locations: ['REPLACE WITH CITY', 'REPLACE WITH CITY']' in place as it is.


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

|| Currently the Widget is not able to use Arabic, Greek, Nordic or other non-latin Alphabet letters.


###### **Rename the button**

Change the submit text with the name you prefer.

JavaScript

```javascript
buttonText: 'Search',
```


###### **Change button color**

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

JavaScript

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