Support Center

Check Availability Widget

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. To make these customizations you will need to be proficient in CSS and JavaScript. Please note that generally, the best user experience for the guest is to have them click a simple "Check Availability" or "Book Now" button. 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 (right before the </body> tag). We encourage you to edit this script and host on your own server if you would like to make changes to it. This will require prior knowledge of JavaScript. ThinkReservations support will not be able to provide webmasters and developers with assistance on how to use JavaScript.
 


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//reservations

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/
 Hover over the highlighted part below:
https://secure.thinkreservations.com//reservations

Option 1

This is the most popular option. 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.

 
<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="0"
></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.


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="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. 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. 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. 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. 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. You can also 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".

ThinkReservations support will not be able to assist webmasters or developers with styling the widget, nor will we style the widget for hire. Those without the required competency of JavaScript and CSS should instead use the simple link. The simple link is typically what we recommend!

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.

Below are some examples to give you an idea on how you can manipulate the widget.


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.

Example:

body .tr-widget div.tr-component.tr-check-availability div.tr-occupancy select.tr-number-of-children { display: none !important;
}
The above CSS hides the number of children question.


Example:

<div class="container-holder">
<style type="text/css">
 .tr-search-dates,
 .tr-occupancy,
 .tr-form-actions{float:left}
 .tr-check-availability button,
 .tr-search{margin-top:17px}
</style>
</div>
The above example code creates a basic horizontal bar.

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.



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. They are great examples of what can be done by talented web developers!

Attached below is a working sample.

Attachments

Contact Us


Related Articles:

d823003ec4e62f7c319afe831ca4aee6@thinkreservations.desk-mail.com
http://assets0.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