If you prefer to build and host your own direct booking site, you will need to create and embed our widgets on your site to get Direct features. Alternatively, if you're using a Hospitable site, you don't need to worry about widgets.
Our direct booking widget works on most custom site builders such as Wordpress, Squarespace, etc. We are currently unable to support Google sites. Wix customers should follow our additional instructions.
Key Concepts
If you use a Hospitable Direct site, you don't need widgets
There are two types of widgets:
A booking widget for each property page
An optional property search widget for your homepage
Each individual property needs a unique page with a unique booking widget code
Self-hosted sites
To set up your self-hosted site go to the Direct Overview page and click Add a site in the Self-hosted sites section.
Properties
Start by selecting all of the properties you list on your site. When you select a property we generate the unique booking widget code that you'll need to add to your site -- see detailed instructions below on how to embed the code.
Next, tell us the full URL of each property page on your site. You must have a unique URL for each property page to use property search and GVR.
Property health check
We monitor several parameters to make sure your pages have everything they need to take Direct bookings.
Address - an alert will display if your property does not have a properly formatted address in our system. Direct Premium properties must pass this check as it is a requirement for guest vetting and damage protection integrations.
Payments - All properties need to have a default or other payout method set to take a booking on Direct Basic or Direct Premium. You'll need to resolve any issues here on your Payout Methods page before enabling your booking widget.
URL - When you add property page URLs, Hospitable will ping your site to check if you have a current SSL certificate and if the matching booking widget is installed on the page. We'll show an error until the URL passes the check.
Enabling property widgets
You will need to have an active Direct plan before you can enable your widgets from the toggle at the top of the page. While your widgets are disabled, we will not display any availability and instead show a message under the calendar: “This property is not currently available for bookings.”
Note: every unique property listed on any enabled booking widget or published site counts towards your monthly per property Direct fees.
Styling
Set the color scheme you want to use with your booking and search widgets. You can choose from the color schemes of our Hospitable site templates, or set a custom color scheme using a hex color code or writing in common HTML color names.
We display a working preview of how the color scheme looks on the booking widget from the preview window. Save your changes when you are ready to update them on your site. You change your styling at any time without having to update the widget code.
Search widget (beta)
Our new property search feature allows guests to search availability across all of your properties, with results displayed on a map.
We return all of your properties on every search, sorted by location (optional) and availability. When a property is unavailable for given search terms, we'll explain why, ie. due to length of stay, guest count, and/or unavailable dates. When guests click on a property result, they will be redirected to the property URL you gave us in the Properties section.
Location search
We'll create a basic list of locations from your property cities to get you started, but you can edit the location drop-down list however you like. Click the add location button, enter a display name, and then double click on the map to drop the pin where you want it. You can create up to three levels of locations (eg. country>city>neighborhood, or state>city>point of interest) by dragging and dropping your locations into place.
Treat your location list as another touchpoint to introduce your properties to prospective guests. For example, if you have popular nearby tourist attractions guests are searching for, consider adding them to the location list so guests can see how close your properties are. Or if you're taking a lot of bookings from traveling nurses, consider adding a list of local hospitals. Again, we use location to sort your properties, not to filter them, so all of your properties will display on every search.
You may toggle off the map to remove the feature from your results page.
Embedding the booking widget
Each property has a unique booking widget code and URL. If you have multiple properties, you will need to embed the specific widget for each property on your site where you want guests to be able to book that property. We strongly recommend setting up a unique page for each individual property, as this is required for Google Vacation Rentals and our property search widget.
In Hospitable, go to Direct and open or create a self-hosted site and check the box next to each property to generate the widget code. You'll see an option to Copy widget code from the drop-down menu on the three-dot icon. This will open a small window with your embed code and the URL for that property's widget. Double-check that the widget code is correctly embedded and that no unrelated widget codes are present on the same page. Incorrect placement may cause the widget to malfunction.
When you embed the widget in your site, we recommend a minimum container width of 320px and height of 900px. Advanced users may consider adding an event listener to their site, allowing you to dynamically adjust elements on your site based on the variable height of the iframe.
Optional: Add the script below to any pages with the booking widget installed to get the current iframe height.
<script>
window.addEventListener("message", function (event) {
if (event.data.iframeHeight) {
var iframe = document.getElementById("booking-iframe");
iframe.style.height = event.data.iframeHeight + "px";
}
});
</script>
Embedding the search widget
There are three code snippets available for installing search on your self-hosted site.
Results page
We recommend first creating a search results page. After you create a page on your site, add the script from step one, which will load our search widget at the top of the page and display a map and property search results below.
Add a search widget to your homepage
The script in step two will display only the search widget. Enter the URL of your results page in the field and then add then copy and paste the script on any page you would like to display your search widget. Most of our hosts will want to add the search widget on their home page.
Pass search terms to your booking widget
When a guest selects a property from the search result page, they will be redirected to the property page. To avoid the guest having to re-enter their check in and check out dates and number of guests in the booking widget, you can add an event listener to your property pages to capture the parameters from the URL and pre-populate the booking widget. We provide example code for an event listener in step three, but you may have to modify the code to work on your site.
Common Issues
Below are issues specific to embedding the Hospitable booking widget on your own website. For general widget and direct booking site troubleshooting (widget not loading, wrong availability, payment issues), see Troubleshooting Your Direct Booking Site & Widget.
Widget not loading on your site
If the booking widget doesn't appear after embedding the code:
Check script placement. Paste the embed code exactly as provided — do not modify the
<script>tags or rearrange them. The code should be placed in the<body>of your HTML page, ideally near the bottom before the closing</body>tag.Confirm HTTPS is enabled. Your site must use HTTPS (SSL/TLS). Hospitable performs an SSL certificate check as part of the property health check. If your site doesn't have a valid SSL certificate, the widget may not load. Most modern hosting providers offer free SSL via Let's Encrypt.
Test on a plain HTML page. If the widget works on a simple test page but not on your live site, the issue is likely a conflict with your site's theme, plugins, or scripts — not with the widget itself.
Disable browser extensions. Ad blockers and privacy extensions can block third-party scripts. Test in an incognito/private window with extensions disabled.
Booking widget shows the wrong properties
If the widget loads but displays the wrong property:
Verify the widget code matches the property. Each property has its own unique booking widget embed code. Go to Direct Bookings → [Click Website] → Properties and confirm you copied the code for the correct property.
Check for duplicate or swapped codes. If you have multiple properties, make sure each page on your site has the correct embed code — it's easy to accidentally paste the code for Property A on Property B's page.
One widget per page. Each property page should contain only one booking widget embed code. Multiple widget codes on the same page can cause unexpected behavior.
Styling conflicts with your website
The booking widget loads inside an <iframe>, which means your site's CSS does not directly affect the widget's internal styling. However, the container around the widget matters:
Ensure the container meets minimum size requirements. The widget needs a container at least 320 pixels wide and 900 pixels tall to render correctly. If the widget appears cut off or doesn't display, check that the parent element has enough space.
Check for
display: noneorvisibility: hidden. Some themes or page builders may hide embedded elements by default. Inspect the widget's parent container in your browser's developer tools to make sure it's visible.Responsive layouts. The widget is responsive, but if your site uses a very narrow column layout, the widget may not render well below 320px width. Consider placing it in a full-width section.
Testing Your Integration
After embedding the widget, follow these steps to make sure everything is working correctly before sending guests to your site.
Step 1: Visually verify the widget
Open your site in an incognito/private browser window (this avoids cached versions and extension interference).
Confirm the widget loads and your site displays the correct property name, photos, and availability calendar.
Try selecting dates and check that pricing appears correctly.
Resize your browser window to test how the widget looks on mobile-sized screens.
Step 2: Do a test booking
Select available dates on the widget and proceed through the booking flow as a guest would.
On the payment step, confirm that the correct total is displayed.
You can complete the test booking with a real payment method and then cancel it afterward, or stop just before the final payment confirmation to verify the flow without processing a charge.
Step 3: Check from the Hospitable dashboard
After a test booking, go to your Hospitable dashboard and confirm:
The booking appears in your reservations
The guest details are captured correctly
Any automated messages or workflows triggered as expected
Common setup mistakes to avoid
Modifying the embed code. Always paste the code exactly as provided. Even small changes (removing a script attribute, changing a URL) can break the widget.
Embedding the wrong property's code. Double-check the property name in your widget settings before copying.
Forgetting to enable the property for direct booking. The widget won't work if the property isn't toggled on under Direct Bookings → [Click Website] → Properties.
Not testing on mobile. Many guests will book from their phones — make sure the widget container is responsive and meets the minimum 320px width.