Direct booking widgets

Embed a booking widget on your custom site to capture Direct bookings

Andrew Schorr avatar
Written by Andrew Schorr
Updated over a week ago

⚠️ Our direct booking widget works on most custom site builders such as Wordpress, Squarespace, etc. We are currently unable to support Google sites.

The soon-to-be legacy widget

The default widget that you've been able to use from the property page will eventually be phased out. In order to apply custom styling and expand the capabilities of your widget, we are transitioning to a new setup. In the future we will be notifying everyone well in advance of the date when we will stop supporting the older widgets.

The new & improved widget

There is a new Widgets section on the Direct Overview page, just under Sites.

Widgets now behave a lot more like Hospitable's sites: you scope properties to them, you can "publish" or "un-publish" them, you can change their styling, and you can create more than one, if needed. Any properties scoped to a booking widget or site count towards your monthly per property Direct fees.

The new interface for managing a widget's settings allows you to select styling for your widget from one of our site themes. When you select a theme, you can view the color scheme in the preview window. We do intend to let you select custom colors in the future.

Use booking widgets to embed your property's calendar on your own website

If you have your own direct booking site setup, you can add each property's booking widget to your pages to allow guests to see available dates and make booking requests.

Each property has a unique URL for the booking widget that can be used for booking that particular property. Note: If you have multiple properties, you will need to embed each property widget on your site where you want guests to be able to book that property. When you embed the widget in your site, we recommend a minimum container width of 320px.

To get the URL and embed code for a property's booking widget, open your widget settings page from the Direct Overview page. When you scope a property to the widget (ie. check the box next to the property name), 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.

More about Direct

Did this answer your question?