Check Availability Widget

Dear Hotelier: ThinkReservations provides a framework for what we call a "widget" where guests can enter their search dates right on any page of your website. They can be highly customized and branded. While we provide the framework, ThinkReservations does not build, style, or implement these. Our support team will not be able to provide assistance with the widgets; direct your technical questions to your webmaster or web developer. This technical document will provide everything a proficient web developer will need to get started with a widget. If you would like a recommendation of a web development team, let us know.

Dear Webmaster: This technical document contains a link to a sample JavaScript file, and notes on implementing the widget onto your client's site. In order to take advantage of the widget, you must be proficient in JavaScript, CSS, and HTML - or have access to such professionals in order to customize, style, and implement the widget properly. If you are not able to complete this task on your own, it will be up to you to source an experienced professional who can assist you. ThinkReservations will not provide this resource or answer technical questions.

ThinkReservations supports a few ways to include a widget on your website. The widget's look and feel needs to be customized to match your site by the hotel's web developer. To make these customizations, you must be proficient in CSS and JavaScript. We recommend that if you use a widget, you should always have the simple button link in the top right and the footer of the site.

Please let us know if you end up using the widget, as we need to keep track of all clients using it as upgrades to the code are done manually.

► Code Required
► Option 1 Check Availability Block
► Option 2 Room/Unit Specific Check Availability Block
► Option 3 Room/Unit Specific Block with Calendar
► Option 4 Room/Unit Specific Calendar
► Styling with CSS
► Examples
► Working Sample File (no style)
 

Code required:

Add the following JavaScript file to the bottom of every page where the widget will be used. You must edit this script and host it on your own server if you would like to make changes to it! This will require prior knowledge of JavaScript.
 

<script src="https://d1eneklj7lmhjs.cloudfront.net/20160304085750/thinkreservations-widgets.js">
</script>

Important Notes:

• The number of adults and children number needs to be set to the maximum allowed in ThinkReservations.
• Replace SHORT_NAME_GOES_HERE with the actual short-name of the account. The "short-name" can be extracted from the ThinkReservations Booking Engine URL. (Typically, it is the domain name.)
• The short-name for our demo/sample account The Viewpoint is the_viewpoint if you wish to test.
  https://secure.thinkreservations.com/the_viewpoint/reservations
• Once the user clicks to "Check Availability", they will be taken to the Results Page on ThinkReservations.

Struggling to find the short-name?

1. Go to the client's ThinkReservations online Booking Engine. If their site has been updated to use the ThinkReservations Booking Engine, click the Book Now or Check Availability button.
2. Look at the URL in the address bar. The short-name is the text between the forward slashes. See below for an example. The highlighted part is the short-name.
3. Generally, the short-name is taken from the domain name. in our example, the fictional domain of the client would be www.the_viewpoint.com

Note the bold part (shortname) below:

https://secure.thinkreservations.com/the_viewpoint/reservations

Option 1 - Check Availability Block

This is the most popular option. Using JavaScript and CSS, you can make it look how you want. Add the following HTML for the Check Availability block. Don't forget to change the short-name. See above for more on the short-name. Use CSS to customize. Don't omit the number of children line, even if you plan on hiding it.

<div class="tr-widget"
    data-tr-widget-type="check-availability"
    data-tr-short-name="YOUR SHORTNAME GOES HERE"
    data-tr-number-of-adults="3"
    data-tr-number-of-children="2" >
    </div>

Above is a visual representation of the unstyled widget.

Option 2 -Room/Unit-Specific Check Availability Block

For each unit's individual page, add the following unit availability form. This will put that room to the top of the list in the search results. To do so, add the following HTML. Please note that every individual unit needs its own unit ID which is populated in UNIT_ID_GOES_HERE. To get the Unit ID of a room, go to "Settings" -> "Rooms" and click on the individual room. You will see the ID listed at the top. If you use "Room Types", and sell by Room Type on the booking engplease let us know so we can provide the Room Type ID. These are not exposed in the UI like the room IDs are.Don't forget to change the short-name.

If you use "Room Types", please let us know so we can provide the Room Type ID. These are not exposed in the UI like the room IDs are.
 

<div class="tr-widget"
    data-tr-widget-type="check-availability"
    data-tr-short-name="YOUR SHORTNAME GOES HERE"
    data-tr-number-of-adults="3"
    data-tr-number-of-children="2"
    data-tr-unit-id="UNIT_ID_GOES_HERE">
    </div>

Option 3 - Room/Unit-Specific Block with Calendar

For a check availability widget with a calendar block for one unit, add the following HTML. Again, replace UNIT_ID_GOES_HERE with the rooms unique Unit ID. Please note that every individual unit needs its own unit ID which is populated in UNIT_ID_GOES_HERE. To get the Unit ID of a room, go to "Settings" -> "Rooms" and click on the individual room.  Don't forget to change the short-name. Please note: Room Types are not supported with Option 3. 

<div class="tr-widget"
    data-tr-widget-type="unit-calendar-with-availability-form"
    data-tr-widget-type="check-availability"
    data-tr-short-name="YOUR_SHORTNAME_GOES_HERE"
    data-tr-number-of-adults="3"
    data-tr-number-of-children="2"
    data-tr-unit-id="UNIT_ID_GOES_HERE">
    </div>

Option 4 - Room/Unit-Specific Calendar

For a calendar-only block, add the following HTML. Again, replace UNIT_ID_GOES_HERE with the room's unique Unit ID. Please note that every individual unit needs its own unit ID which is populated in UNIT_ID_GOES_HERE. To get the Unit ID of a room, go to "Settings" -> "Rooms" and click on the individual room. Don't forget to change the short-name. Please note: Room Types are not supported with Option 3. 

<div class="tr-widget"
    data-tr-widget-type="unit-calendar"
    data-tr-short-name="YOUR SHORTNAME GOES HERE"
    data-tr-unit-id="UNIT_ID_GOES_HERE">
    </div>

Styling the Widgets to match your brand

The Check Availability Widget includes its own default styles. This is done to provide a default look to the widget and to the date picker. This can be seen in the above example screenshots. All styles can be overwritten by writing additional CSS. You must copy, edit, and host your own version of the JavaScript file to make other changes. For example, maybe you would like the call to action button to say "Book" or "Search" instead of "Check availability".

Alternatively, a simple "Book Now" link is typically what we recommend as the best user experience for the guest.

1. The default CSS we include uses the !important flag.  Therefore, all custom CSS that you write to style the widget must include the !important flag as well
2. You must ensure you have a more specific CSS rule then we do, so that it takes effect.  An easy way to do this is to look at the CSS we provide (using Chrome inspector), copying it, and adding a "body" to the front of it.

body .tr-widget div.tr-component.tr-check-avai lability input[type=text].tr-date {
	border: 1px solid red !important;
}

body .tr-widget div.tr-component.tr-check-availability div.tr-occupancy select.tr-number-of-children,
body .tr-widget .tr-occupancy .tr-field:nth-child(2) label {
  display: none !important;
}

body .tr-widget form {
  display: flex !important;
  flex-direction: row;
  align-items: center;
}

The above example code creates a basic horizontal bar.

Real-world Examples:

Below are some different examples of ThinkReservations clients that take advantage of our check availability widget. Each example below looks different, but are all using Option 1. They have been styled with CSS and JavaScript to match their brand for use on their home pages by their web developers. The widgets in use have been changed over time by their webmasters, so check out their linked sites as well.

http://www.bayfrontmarinhouse.com/
 Custom style and date picker. Displayed on the top right of the home page. Assumes 2 adults. Occupancy can be changed after they click SEARCH.

http://www.edenvaleinn.com/
 Custom style and date picker. Displayed as a horizontal bar front and center.

https://www.holualoainn.com/
 Custom style and date picker. Displayed on the bottom left as part of the footer. Assumes 2 adults. The number of adults and children can be adjusted on the 'results' page after they click "Check Availability".

https://www.bramptoninn.com/
Custom style and date picker. It's displayed on the left side of the home page. Assumes 2 adults. Just like the above, occupancy can be changed on the Booking Engine.

https://glengordonmanor.com/
Full custom style and date pickers. The horizontal bar allows a prospective guest to click on Check In, select a date from a two-month calendar, and the check out date is automatically ready to choose. The colors are set to match the site and brand.

Please visit these sites and see how they work and match their brand colors. Likely they have changed! They are great examples of what can be done by talented web developers!