Support Center

Check Availability Widget

Last Updated: Jul 20, 2017 12:13AM EDT

ThinkReservations supports a few ways to include a widget onto your website. The widget's look and feel can be customized to match your 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 (right before the </body> tag)
 


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 account The Viewpoint is "the_viewpoint" if you wish to test.
    https://secure.thinkreservations.com/the_viewpoint/reservations
 

Option 1

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!

 
<div
 class="tr-widget"
 data-tr-widget-type="check-availability"
 data-tr-short-name="SHORT_NAME_GOES_HERE"
 data-tr-number-of-adults="2"
 data-tr-number-of-children="1"
></div>​





Option 2

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. Don't forget to change the short-name.


 

<div
 class="tr-widget"
 data-tr-widget-type="check-availability"
 data-tr-short-name="SHORT_NAME_GOES_HERE"
 data-tr-number-of-adults="2"
 data-tr-number-of-children="1"
 data-tr-unit-id="UNIT_ID_GOES_HERE"
></div>




Option 3

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. You will see the ID listed at the top. Don't forget to change the short-name.

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



Option 4

For a calendar only block, 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. You will see the ID listed at the top. Don't forget to change the short-name.

<div
 class="tr-widget"
 data-tr-widget-type="unit-calendar"
 data-tr-short-name="SHORT_NAME_GOES_HERE"
 data-tr-number-of-adults="2"
 data-tr-number-of-children="1"
 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 datepicker.  This can be seen in the above example screenshots. All styles can be overwritten by writing additional CSS.

When writing the CSS, there are two things that must be kept in mind:
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.

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


The above would make the check in and check out input boxes have a red border.
 

See below for another example of code to style the widget:

 
<style>
body .tr-widget div.tr-component.tr-check-availability div.tr-occupancy {
  display: none !important;
}
 
body .tr-widget div.tr-component.tr-check-availability label { 
  display: none !important;
}
 
body .tr-widget div.tr-component.tr-check-availability div.tr-search-dates div.tr-field {
  padding-bottom: 0 !important;
}
 
body .tr-widget div.tr-component.tr-check-availability > form {
  display: table !important;
}
 
body .tr-widget div.tr-component.tr-check-availability div.tr-search-dates {
  display: table-cel !importantl;
  vertical-align: top !important;
  padding-top: 4px !important;
}
 
body .tr-widget div.tr-component.tr-check-availability div.tr-form-actions {
  display: table-cell !important;
  vertical-align: top !important;
  padding-top: 4px !important;
}
 
body .tr-widget div.tr-component.tr-check-availability button.tr-search {
  margin-top: 0 !important;
}
</style>

Real-world Examples:

Below are four very different examples of ThinkReservations clients that take advantage of our check availability widget. Each example below look different, but are all using Option 1. They have been styled with CSS to match their brand for use on their home pages by their web developers.

  
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 home page. Assumes 2 adults. Just like the above, occupancy can be changed on the booking engine.

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

Attached below is a working sample.

Attachments

Contact Us

d823003ec4e62f7c319afe831ca4aee6@thinkreservations.desk-mail.com
http://assets2.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete