Clock WRS - Integration in hotel web site

Integration types

The Web Reservation System by Clock (WRS) can be integrated into a hotel website in two ways: External integration and Inline integration.

External integration. This is the easiest way to start. Just place a link into your hotel website. The link will open the WRS in a new page/tab outside the hotel website.

Inline integration. The WRS is placed inside one or more of your website pages and is completely merged with it. Both methods support widgets and parametrized links.

External integration

  • Find and copy the code for the link/button in Main menu - Web - Settings - Web Reservation System - section Integration in your Web site - Link or button in your Web site.
  • Paste the code into your website to create a link or a button that will open your Web Reservation System in a new tab/page.
  • Feel free to customize the link according to your colours scheme and the overall look of the website .
  • Check the customization options to change the colours, the font, the brand picture, the header and the footer of the WRS.

Inline integration

With the inline integration you can place Clock Web Reservation System inside one or more pages of your web site with a single line of code. The code itself will create an iframe. The WRS will work in this iframe.

! Please note that PayPal Express Checkout requires to open in a new page and cannot be integrated into any other page. PayPal can still be used with the Inline integration, but the user will be redirected to a new page (outside the hotel website) to complete the PayPal transaction.

  1. Find and copy the code in Main menu - Web - Settings - Web Reservation System - section Integration in your Web site - Inline.
  2. Go to one of the pages where you want to integrate the WRS.
  3. Choose the place for it and paste the integration code.
  4. Width. By default the width of WRS is set to 100%. Change parameter "width" if necessary.
  5. Height. The height is automatically adjusted to the actual content height. Default value ( 2000px ) is for compatibility with older browsers. Change the value if necessary.
And you are ready.

Check the customization options to change the colours, the font, the brand picture, the header and the footer of the WRS.

Which page to integrate?

Clock WRS gives you a choice of three pages to integrate: page Step 1, page Step 2 or Calendar page.

A. Page "Step 1"

This is the page integrated by the default integration code. It is the first page of the WRS where users fill in their Arrival, Stay and optionally Adults and Children.

External integration. Follow the steps in Integration types above

Inline integration. Follow the steps in Integration types above

B. Page "Step 2"

This is the page showing the free rooms and the available rates for the selected period. This is a result page, which means that it requires Arrival, Nights and optionally Adults and Children.

External integration. Check the examples below for building links and forms.

Inline integration. Find the integration code in Inline Integration - Additional integration options - Rate list. Check the examples below for building links and forms.

C. Calendar page.

A calendar showing the available rooms and lowest prices for each date. It can use, but does not require, specified Arrival, Stay, Room, etc.

External integration. Check the examples below for building links and forms.

Inline integration. Find the integration code in Inline Integration - Additional integration options - Rate and Availability Calendar. Check the examples below for building links and forms.

Deep links

Clock WRS supports deep parametrized links. With them you can connect it to your home page, special offers, promotions, packages, room type/room pages and so on.

List of all Clock WRS parameters:

  • wbe_product[arrival] - Arrival day in one the formats: 10 Mar 2014 (DD mmm YYYY) or 2014-10-03 (YYYY-MM-DD)
  • wbe_product[nights] - Nights/Stay. Integer: 1, 5, 7, ...
  • wbe_product[adult_count] - Adults. Integer: 1, 2, ...
  • wbe_product[children_count] - Children. Integer: 0, 1, ...
  • wbe_product[room_id] - ID of the Room. Integer. Can be obtained from the system or from the link builder.
  • wbe_product[room_type_id] - ID of the Room Type. Integer. Can be obtained from the system or from the link builder.
  • wbe_product[wbe_rate_ids] - List of Rate IDs. Integer. Can be obtained from the system or from the link builder.
  • wbe_product[bonus_code] - Bonus Code for accessing special rates

Link Builder

Use "Link Builder" in "Wbe settings" screen to create any link you need.

Examples

Example 1 - Link from hotel page Double room to Page 1 of the WRS.

Use parameter 'room type' ( wbe_product[room_type_id] ) to create a link to the reservation system showing only DBL rooms/rates

Example of external integration code:

https://sky-eu1.clock-software.com/596/528/wbe/en/products/new?wbe_product[room_type_id]=564

Example of inline integration code:

You need to have page Step 1 integrated into your website. Check "Which page to integrate?" - "A". Create a url for:

[url_in_hotel_site_for_page_with_page1_integration]?wbe_product[room_type_id]=564

Example 2 - link from Double rooms for St. Valentine's 2-day offer for 2 adults

Use parameters Room type, Arrival, Nights, Adults and Children

Example of external integration code:

https://sky-eu1.clock-software.com/596/528/wbe/en/products/new?wbe_product[room_type_id]=564&wbe_product[arrival]=2014-02-14&wbe_product[nights]=2&wbe_product[adult_count]=2&wbe_product[children_count]=0

Example of inline integration code:

This link contains all major parameters (Arrival, Nights, Adults and Children) so it can be linked to the integrated Page 1 or Page 2. Check "Which page to integrate?" - "A", "B". Create a url for:

[url_in_hotel_site_for_page_with_page1_or_2_integration]?wbe_product[room_type_id]=564&wbe_product[arrival]=2014-02-14&wbe_product[nights]=2&wbe_product[adult_count]=2&wbe_product[children_count]=0

Example 3 - place a small form containing Arrival, Nights (optionally Adults and Children) on your home page.

Place a small form with required parameters on your home page. Users fill in the fields and get the available rooms and rates directly. Feel free to style the form into the appearance of your website.

****INTEGRATION_URL**** can be any url from section "Which page to integrate?" - "A", "B" or "C". Don't put parameters Arrival, Nights, Adults and Children in the INTEGRATION_URL or they would replace any field values customers fill in.

Sample code for the form:
<form accept-charset="UTF-8" action="****INTEGRATION_URL****" method="get">
 <div>
   <label>Arrival: </label>
   <input name="wbe_product[arrival]" type="date">
 </div>
 <div>
   <label>Nights: </label>
   <input name="wbe_product[nights]" type="number" value="1">
 </div>
 <div>
   <label>Adults: </label>
   <input name="wbe_product[adult_count]" type="number" value="2">
 </div>
 <div>
   <label>Children: </label>
   <input name="wbe_product[children_count]" type="number" value="0">
 </div>
 <div>
   <input name="commit" type="submit" value="Book">
 </div>
</form>

Example 4 - place a link to Clock WRS Availability calendar for a specific Event or Special date.

Use parameter Arrival ( wbe_product[arrival] ) to create a link opening the availability calendar starting from that specific date.

Example of external integration code:

https://sky-eu1.clock-software.com/596/528/wbe/en/products/calendar_new?wbe_product[arrival]=2016-12-31

Example of Inline integration code:

You need the Calendar page integrated into your website. Check "Which page to integrate?" - "C". Create a url for:

[url_in_hotel_site_for_page_with_calendar_integration]?wbe_product[arrival]=2016-12-31

Example 5 - Show only promotional rates in WRS

You can set a list of rates to be shown in the WRS with wbe_product[wbe_rate_ids] parameters. Use "A", "B" or "C" links depending on your needs.

Sample code for "External" - "Page 1" integration for 2 rates :

https://sky-eu1.clock-software.com/596/528/wbe/en/products/new?wbe_product[wbe_rate_ids][]=218&wbe_product[wbe_rate_ids][]=270



Search support:

Sign up for a free demo account now!
Want to know more?