SEARCH
Knowledgebase: Setup, Demo, and General Operations
Website BE | Making 'Quick Reservation' HTML for your website
Posted by Jeff Tweddale on 15 Apr 2011 11:19 AM

Making 'Quick Reservation' HTML for your website

Web traffic analysis shows that each page of a property website ought to have a clear 'call to action' accepting "Arrival Date" and "Departure Date" and, when submitted, the user gets availability results from the Booking Engine for those dates.  Because BookingCenter supports a few different Booking Engine technologies (advertised at: http://www.bookingcenter.com/interfaces-and-modules/bookingengine-api/), the Quick Reservation code specification is a bit different between the Booking Engine services.  

Choose from  Booking Engine Templates below:

 

Multi Room, Multi Rate Booking Engine template offers two variants: https://book.bookingcenter.com/02/?site=xxxxx and https://book.bookingcenter.com/04/?site=xxxxx

The Multi Room Booking Engine templates allow a property who has multiple Rooms / Types, with multiple Rates and Packages, to have a graphically-rich Booking Engine accessed via a QuickReservation link.

The 2 options are:

  1. https://book.bookingcenter.com/02/?site=xxxxxxx. Using an 'Info Page' as the default 'introductory' page, this Booking Engine template offers a flexible option and contains many graphics and ability to write a lot of info about your property on the 'first page'. See an example here if one were NOT to use the Quick Reservation code for submitting dates, rather a direct link: https://book.bookingcenter.com/02/?site=MYPMSDO Note, if a webmaster uses the '02 Info template', and a traveler clicks the breadcrumb to return to the first page, they will be directed to the 'info page' as the example link above shows and is documented at: https://docs.bookingcenter.com/display/MYPMS/Booking+Engine+%7C+Website+Code

  2. https://book.bookingcenter.com/04/?site=xxxxxx. Using an 'Calendar of Availability' as the default 'introductory' page, this Booking Engine template offers a visual calendar option of property availability (ie, showing which dates have rooms and which do not) and enables Guests to choose arrival and departure dates. See an example here if one were NOT to use the Quick Reservation code for submitting dates, rather a direct link: https://book.bookingcenter.com/04/?site=MYPMSDO Note, if a webmaster uses the "04 Calendar template', and a traveler clicks the breadcrumb to return to the first page, they wil be directed to the 'calendar page' as the example link above shows and is documented at: https://docs.bookingcenter.com/display/MYPMS/Booking+Engine+%7C+Website+Code

Single Room Booking Engine template offers two variants: https://book.bookingcenter.com/01/?site=xxxxx and https://book.bookingcenter.com/03/?site=xxxxx

These Booking Engine templates use a simpler design for properties who sell a single Room (or Type) in a transction.  Our studies have shown that 96% of all online bookings occur for a single room at a time.  Thus, the ability to book multiple rooms with multiple rates might present a 'user interface' merchandising problem not needed by your property.  These templates are also graphically-rich Booking Engine templates that can be accessed via a dynamic URL construction to hand off the reservation request from an external website to get results from the BookingCenter XML Server. They both accept the same variables as the Multi Room Type Booking Engine above, and are both different in their use of the first page:

  1. https://book.bookingcenter.com/01/?site=xxxxxxx.  Using an 'Info Page' as the default 'introductory' page, this Booking Engine template offers a flexible option and contains many graphics and ability to write a lot of info about your property on the 'first page'. See an example here if one were NOT to use the Quick Reservation code for submitting dates, rather a direct link: https://book.bookingcenter.com/02/?site=MYPMSDO Note, if a webmaster uses the '02 Info template', and a traveler clicks the breadcrumb to return to the first page, they will be directed to the 'info page' as the example link above shows and is documented at: https://docs.bookingcenter.com/display/MYPMS/Booking+Engine+%7C+Website+Code

  2. https://book.bookingcenter.com/03/?site=xxxxxxx.  Using an 'Calendar of Availability' as the default 'introductory' page, this Booking Engine template offers a visual calendar option of property availability (ie, showing which dates have rooms and which do not) and enables Guests to choose arrival and departure dates. See an example here if one were NOT to use the Quick Reservation code for submitting dates, rather a direct link: https://book.bookingcenter.com/04/?site=MYPMSDO Note, if a webmaster uses the "04 Calendar template', and a traveler clicks the breadcrumb to return to the first page, they wil be directed to the 'calendar page' as the example link above shows and is documented at: https://docs.bookingcenter.com/display/MYPMS/Booking+Engine+%7C+Website+Code

Similar to the multi room booking engine options above, the same applies to the single booking engine.    The URL parameter pass-through is a dynamic URL construction to hand off the reservation request from an external website to get results from the BookingCenter Server. It accepts these variables. 

  • {$CheckIN(MM/dd/yyyy)}
  • {$CheckOUT(MM/dd/yyyy)}
  • {$NumberOfNights}
  • {$NumberOfRoom}
  • {$Promo}
  • {$locale}
  • {$languageCode}
We have a sample page:  https://book.bookingcenter.com/02/quick_reservation/ with the end point, Site ID, and the parameters to be sent in a call to the Booking Engine.  The 'promo' is what BookingCenter refers to an "Agent ID" such as BC, DEMO, MYPROMO.  We provide more details on implementing the 'promo'/"Agent ID"at: at:https://support.bookingcenter.com/index.php?/Knowledgebase/Article/View/486.  If you are developing this solution, we recommend using our TEST system initially, where we have: https://book-test.bookingcenter.com/quick_reservation/ and the end point is a TEST URL: https://book-test.bookingcenter.com/chk_availability.php (note that you need to input the query to get the results to the https://book-test.bookingcenter.com/chk_availability.php; going directly to this link will give you an error).
 
As of 2018, neither language nor locale parameters are implemented, though they will be supported at a later date.
 
Here are example URLs for Booking.com and SiteMinder's support of these same parameters: 

Booking.com
https://secure.booking.com/book.html?aid=AID&hotel_id=HOTELID&lang={$languageCode}&pb=1&stage=0&hostname=www.booking.com&checkin_monthday={$CheckIN(d)}&checkin_year_month={$CheckIN(yyyy-M)}&checkout_monthday={$CheckOUT(d)}&checkout_year_month={$CheckOUT(yyyy-M)}

Siteminder Booking Button - aka www.thebookingbutton.com
https://app.thebookingbutton.com/properties/SITEMINDERHOTEID?check_in_date={$CheckIN(yyyy-MM-dd)}&check_out_date={$CheckOUT(yyyy-MM-dd)}&number_adults=2 

We have a sample page: https://book.bookingcenter.com/01/quick_reservation/ with the end point, Site ID, and the parameters to be sent in a call to the Booking Engine.

If you are developing this solution, we recommend using our TEST system initially, where we have: https://book-test.bookingcenter.com/01/quick_reservation/ and the end point is a TEST URL: https://book-test.bookingcenter.com/01/chk_availability.php. (note that you need to put the query to get the results to the https://book-test.bookingcenter.com/01/chk_availability.php; going directly to this link will give you an error)

 Legacy Booking Engine (http://requests.bookingcenter.com/enquiry.phtml?site=xxxx)

For our Legacy Booking Engine, we provide sample code below to facilitate your HTML coding in this HelpDesk article, and we host a JavaScript file to assist with date formatting. If this HTML information is to complex for you - no worries! BookingCenter staff will do this work for you, or we'll assist your webmaster. Simply send us the login ID and password for your website and we can place this code for you.

Many folks do not wish to use the basic 'calendar' feature that BookingCenter provides as a default template.  There is a sample page we have created at: https://demo.bookingcenter.com/ so you can click 'View Source' and view how this works using a Site called 'MYPMSDO' ('Site' is what BookingCenter refers to as a property).

There are two areas you need to focus on when writing the HTML:

  1. Enabling and accessing the "calendar.js". The JavaScript function we host for you to assist with date formatting is referenced at: http://requests.bookingcenter.com/calendar.js
    This "calendar.js", (also attached to this HelpDesk article below, but it's highly recommended you reference ours, as we may improve on it from time to time) validates the dates our Central Reservation System uses for HTML posts.  Thus, in your HTML page where the Quick Reservation code will be placed, make sure to place the <script language="javascript" src="http://requests.bookingcenter.com/calendar.js"></script> in the HEAD area of your HTML so that the "calendar.js" will load, always populate today's date, and send correctly formatted dates to our Central Reservation System.
  2. Writing the HTML form elements into your page. You will need to know the Site ID that BookingCenter uses to identify your property. In the code below, we are assuming the Site ID for the property is 'BCDEMO'.
    The standard form values are as follows:

    <form action="https://requests.bookingcenter.com/results.phtml" method="post">
    <input type="hidden" name="port" value="BC">
    <input type="hidden" name="ps" value="0"> 
    <input type="hidden" name="site" value="DEMO">
    <input type="hidden" name="agent" value="BC">
    <input type="hidden" name="adult" value="1">
    <input type="hidden" name="child" value="0">
    <input type="hidden" name="infant" value="0">


    <select id="arrival_year" name="arrival_year" onChange="populateday(this.id);">
    </select>
    <select id="arrival_month" name="arrival_month" onChange="populateday(this.id);">
    </select>
    <select id="arrival_day" name="arrival_day">
    </select>

    <p># of nights
    <input type="text" name="stay" size=4>

    Don't forget to close the Form tag using code such as:
    <input type="submit" name="Search" value="Search"> </form>

    If you are trying to return rate and availability results for a different Agent than the standard Agent 'BC', then use that Agent code in place of the default 'BC'. For example, if you wanted this form to query for rooms and rates allocated to an Agent called 'PACKAGES", then use: <input type="hidden" name="agent" value="PACKAGES">. We have more information on allocating rooms and rates to unique agents at: https://support.bookingcenter.com/index.php?/Knowledgebase/Article/View/205.

Let us know if you need additional help by logging to the Support Area at http://support.bookingcenter.com. and choose 'Submit a HelpDesk Ticket' to our support staff. If you wish for our staff to place this on your HTML pages for you, you will need to send us the login ID and password for your website, and a HelpDesk ticket is the perfect way to do that.

Enjoy!



Attachments 
 
 1321248079676_calendar.js.zip (1.26 KB)