Experience the difference of "Elite".

Getting Started

Core Concepts

Overview

Bookings & Quotes

Damage Protection

Data Management

Deposits

Email Template Library

Fields

Guests

Integrations

Listing Site Integration

Messaging

My Account

Payment Processing

Privacy & Security

Properties

Property Management

Quotes

Rates

Renter Agreements

Reporting

Reviews

Rules

Security Deposits

Suppressed Email Addresses

Tags

Taxes

Team Access

Technical Stuff

Travel Insurance

Triggers

Verified Email Domains

Channel Management

Channel Management

API Integrations

Calendar Import/Export

Channel Bridge

Integrations

OwnerRez APIs

Payment Processing

Testing

Websites

Change Log

2024

2023

2022

2021

2020

2019

Staff Reference

Widgets - Setting up widgets for inquiries, bookings, availability, rates and reviews

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. Add some new ones to play with. You can test the widget in the live preview.

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.

Book Now
Multiple Month CalendarRibbon CalendarMonth Calendar
Search PropertiesRatesReviews
 

Book Now

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 as shown below. 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.

Inquiry Only

  • 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.

Property Selector

  • How do I hide Children or Pets fields? Uncheck these field options under the Fields section as detailed below.

Hide children and pets fields

  • 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 as shown below.

Never Quote

  • How do I show errors if the guest chooses something invalid?  You can set the widget's Quote Price setting to Allow Quote and Show Errors or Show Errors. This is helpful, because it provides the guest with immediate feedback as to what's wrong rather than just rejecting the inquiry, which could cause the guest to simply go away. 
If you set Allow Quote and Show Errors it will show both the error and the quote closest to what the guest would receive if the errors were resolved.
Allow quote and show errors
And guests would see an error message as shown below allowing them to revise their booking request.
Booking error message example
If you don't want to show the quote if there is an error, set Show Errors instead. That will only show the quote if there isn't an error.

Show Errors

And guests will see an error message, with no quote, as shown below.

Show errors with no quote

Availability Calendars

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 by going to Hosted Website Settings, selecting "Properties", then select "Change Settings" for the "Availability/Property Search Widget". Select the box to "Hide Min Sleeps."
  • Min/max nightly rates.
    • These rate values can be overridden on the property info page
    • Rates can be turned off entirely on the widget settings.
    • Users can choose to Show range for min and max (eg. "350-499/night") 

Availability/Property Search Widget Rates Settings

Users can also access the Availability/Property Search Widget Rates Section by navigating to their Hosted Website > Home and/or Properties pages.Hosted Website Availability/Property Search Widget Rates Section

Users should note that changing the settings of the Availability/Property Search Widget on one of the Hosted Website pages does not affect the  Availability/Property Search Widget on the other Hosted Website page.

Prominent amenities on Hosted Websites are another way for guests to sort and select individual properties.

Rates

The rates widget shows a list of all of your configured seasons and the rates assigned to them. 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.

Reviews

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.

Don't like how review responses always show your company name? Users can also change the name of the responder to the Review. 

Examples

Here are some examples of hosted websites with embedded widgets on their sites. 

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:

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.

Multiple Widgets

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).

Widget Sizing

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, it's 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.

Culture and Translations

The widgets will use the public display culture you have set in Settings > Culture for date and numeric display.

The Inquiry/Booking and Multi Month Calendar widgets also have an override you can set in the widget options that will override the main display culture and also translate the control labels into the specified language. Error message and other pages farther down the reservation funnel are not currently translated -- just the labels on the widgets.

Don't like how review responses always show your company name? Users can also change the name of the responder to the Review by navigating to the Reviews Widget and adding the following CSS. Users can add the name they desire on line 2.

Review Widget CSS

CSS:

div.review-item-body > div > div:before {
content: 'Response from Amanda';
visibility: visible;
font-weight: bold;
}

div.review-item-body > div > div {
visibility: hidden;
}

Identifying a widget in your site

If you're not sure which property a particular widget is set up for in your site, Ctrl+Click on the widget.  This will pop up a display with details: