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 property page needs a unique booking widget code
The legacy widget
Hospitable's legacy widgets will be disabled after 31 March 2024. If the booking widget on your self-hosted site has a message at the bottom reading "If you are the owner of this site..." that means you are using the legacy widgets. Please update to our new widgets now.
The old widget limited our ability to support things like custom styling, conversion tracking, and Google Vacation Rentals. Follow the instructions in the next section on self-hosted sites to create a new widget and replace your old widget codes.
Self-hosted sites
To setup 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, if you intend to use either Google Vacation Rentals or our property search widget, tell us the full URL of each property page on your site.
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.
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.
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.