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.

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

Note the bold part (shortname) below:

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

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.

Above is a visual representation of the unstyled widget.

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 engine, 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.

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.

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.

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.

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.

When writing the CSS, there are two things that must be kept in mind:

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

Example:

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

Example:

The above CSS hides the number of children question.

Example:

The above example code creates a basic horizontal bar.

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.

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.

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.

Full custom style and date pickers are possible. 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. They are great examples of what can be done by talented web developers!