Setting up widgets for inquiries, bookings and availability
We've got many different widgets that let you set up integrations with OwnerRez from your site, from inquiry/quote/book now widgets to availability calendar displays to searching properties by availability and showing rates tables.
This is an overview article about widgets in general, particularly for adding to a custom coded site. We've also got step by step guides for adding OwnerRez to several page builders:
- Adding OwnerRez widgets to Wordpress
- Adding OwnerRez widgets to Wix
- Adding OwnerRez widgets to Weebly
- Adding OwnerRez widgets to Facebook
One of our owners has volunteered to be an example with embedded the widgets on their site. You can see their site in action here: http://cardigancabins.com/. They've got inquiry/booking and 3 calendar widgets on each cabin page, as well as a ribbon availability widget in the Availability tab.
The easiest way to get started is to look at the widgets section in your account: https://secure.ownerreservations.com/settings/widgets
Add some new ones to play with. You can test the widget in the live preview, and grab the widget code for inclusion on your site. The basic widget include code is something like this:
<!-- OwnerRez Booking/Inquiry widget for <property> -->
<div class="ownerrez-widget" data-widgetId="<widgetid>" data-propertyId="<propertyid>"></div>
Guides for Common Sites
We've had successful integrations with many different site types, including WordPress, WiX, and others. Here's a guide to adding OwnerRez widgets to WordPress. If there is an additional site guide you'd like to see, let us know.
If you've got multiple widgets on the page, the widget.js script only needs to be on the page once, after all of the widgets. You can remove the other extra ones (although they won't hurt anything, just cause extra requests to be made).
The widgets will auto size to handle width. They will also expand to the needed height to fit all internal content without scrolling. If you want to minimize page reflows, you can look at the height after a render and then set an initial height via a style tag on the widget div.
Many Properties, One Widget
You can either use the property id in the widget (note the data-propertyId attribute in the sample above) or we can infer the property by matching the page the widget is on to the property url. If you don't want to configure a bunch of widgets with property id's, this is a much easier method.
For example, with Cardigan, here's how they set up the property public URL's:
1. Grab the URL:
2. Put it in the property General Info settings:
That's it. The URL there should end up looking like: http://cardgancabins.com/bear-bluff. You can now remove the data-propertyId attribute from the widget include.
We use the portion after the domain name to match the property: /bear-bluff -- that way if you've got a test site where the URL is, say, http://test.cardigancabins.com/bear-bluff, it will match up in both places.
- Recommended Reading
- Getting Started
- Page-Specific Help