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 and reviews.
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.
- Available widget types
- Add a widget to your site
- FAQ: Common Questions and Problems
Available Widget Types
We've got widgets for inquiry/quote/booking -- including online book now if you want it, availability calendars in multiple months for one property, one month for multiple properties, and single property/month, searching properties by availability, and rates display.
The book now widget does a lot of things all in one widget. You can allow bookings, inquiries, and live quoting. By default, all of those are enabled. Common configuration questions:
- How do I turn off Book Now? If you want full control over who books, want to vet guests before allowing booking etc. you can turn off Book Now on the widget. To do this, change the Mode at the top of the widget settings to Inquiry Only. That's a good way to ease into OwnerRez and widgets -- start in Inquiry Only mode and switch on Book Now when you're comfortable.
- How do I allow the guest to pick a property? Enable the Show Property Selector option under Fields. That'll add a dropdown at the top of the widget where the guest can pick a property.
- How do I hide Children or Pets fields? Uncheck these field options under the Fields section.
- How do I turn off live quoting? If you don't want the guest to see a quote until they hit Book Now, set the Quote Price setting in the Quoting section to Never Quote.
The availability calendars are simple compared to the book now widget. Pick the type you want based on what you want to display, and customize your color scheme if desired. If you want to hide Today or Holidays, set that color to None.
- The Multiple Month Calendar widget displays 1-24 months at a time. It will responsively size to fit desktop, laptop, tablet, and mobile screens and re-layout the calendars using the latest flex box standards.
- The Ribbon Calendar widget displays a list of properties for one month at a time. It is similar to the Ribbon view on the Bookings page, but will go to a two row mode per property on small screens.
- The Month Calendar widget displays one property for one month at a time in a big calendar view.
The availability search widget functions in several modes -- it can be a search selector, a results page (SERP), or both. It defaults to both and will display results in place, but if you want a search selector on one page and the results on a different page, use the Show Results On a different page option. That's useful if, say, you want the guest to enter Arrival/Departure on your main home page, click the search button, and be sent over to your Properties page to see the results.
The search results are populated based on the amenities info you have entered into OwnerRez. If you don't have any in place, only the property name will show. The results will be progressively enhanced as you enter more info. The following fields will display if you've configured them:
- The first photo you add to the property Photos section
- Property Short Description (Description section)
- Beds/baths you set in the Amenities section. Sleeps is also calculated from beds. Sleeps can be overridden on the property info page, and min sleeps can be turned off on the widget settings.
- Min/max nightly rates. These rate values can be overridden on the property info page, and rates can be turned off entirely on the widget settings.
- Highlight amenities: pets, internet, firewood, mountain, forest, waterview, waterfront
The rates widget shows a list of all of your configured seasons and the rates assigned to them, as well minimum number of nights. Related rules like changeover days, surcharges, taxes, etc. aren't currently included, and we recommend adding a rules text block on your site to list those.
The reviews widget shows a list of all your reviews and provides simple filter/sort options similar to what you see on retail websites like Amazon or Walmart.com If you set a review to "hidden" in OwnerRez, it won't be displayed in the widget. You can select to show reviews across all properties or just for specific properties.
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 multiple month calendar widgets on each cabin page, as well as a ribbon availability widget in the Availability tab.
Add a widget to your site
Go to the widget page in OwnerRez for the widget you want to add and copy/paste the HTML code in the Embed Code box into your site.
If you've got a custom coded website or know HTML, you'll know how to do that. If you've got a page builder driven site, we've 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 SquareSpace
- Adding OwnerRez widgets to Facebook
If you run into issues or there is an additional site guide you'd like to see, let us know.
FAQ: Common Questions and Problems
A lot of questions come up when adding widgets to your site, so we've listed the common ones here. Questions about how to configure different widgets are handled on their specific sections.
Code showing on page instead of widget
This can happen if the code is interpreted as content instead of HTML. Make sure you've pasted it into an HTML block and not a visual block. If you've got a Wordpress site, make sure that you are on the Text tab of the editor when you paste, not the Visual tab.
If you pasted it into the wrong place, make sure to go back to OwnerRez and copy the code again -- don't copy it from one place on your site to another because that will often keep the bad formatting instead of rendering as code.
Tweaking coloring and layout
Each widget has a customization page that lets you edit modes, colors, and turn elements on and off depending on the widget type. If you know CSS, you can also specify custom CSS to be included with the widget. That gives you a lot more control over exactly how the widget should be displayed and lets you override a lot of the default configuration.
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
If you've got a bunch of properties, you don't need to create a widget for each one (although you can). Instead, its often easier to create one widget and use it across all properties, by passing in a property id to the widget or having us infer the property for the widget based on the page where you put the 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:
3. When generating the widget code, choose For Property: All Properties, which will generate a code that looks up based on the page URL where the widget is placed.
That's it. The URL there should end up looking like: http://cardigancabins.com/bear-bluff.
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.