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.
This code must be inserted below the div tag in step 1.
Insert your Uplisting direct booking website URL
Replace 'YOUR UPLISTING DIRECT BOOKING WEBSTE URL'
Note: for any "bookeddirectly.com" URLS you must append the "/g/" for the widget to work correctly.
- baseUrl: 'https://book.yourwebsite.com' ,
- baseUrl: 'https://urbanrentals.bookeddirectly.com/g/',
- baseUrl: 'https://staybnb.net',
To display the location (city) dropdown
Replace ['REPLACE WITH CITY'] with each city you wish to provide, separated by a comma.
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.
Change the submit text with the name you prefer.
Edit the hex code color to edit the button text and background colors.
textColor: '#fff', backgroundColor: '#000',
Create your own CSS selectors to override those provided by Uplisting by default.
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
You can test this by clicking on a date entry, then searching for
and seeing the
You'll then just need to amend the Height to at least 326px.
Updated about 1 month ago