Once you have configured the Web Reservation system (WRS), added your content, and adjusted the branding and design, the final piece of the puzzle that is left is the integration of the WRS on your website.

Clock PMS+ offers you various options for integration such as External or Inline integrations and making use of other elements like having a booking form on the home page, reminder button, and tracking scripts. 

Please read below for more information about all of these options at your disposal.

Important: Although all integration options are quite straightforward and user-friendly, we recommend that you consult with a web developer and provide them the information below, in case you do not have web developing experience and expertise.


All information needed for both integration approaches - External or Inline - can be found under menu Web->Settings - Web Reservation System v2->section Website integration.


External integration

This integration option is the simplest integration to utilize.

If you choose this option for integration you simply need to add a link to your website. Once guests click on the link, the WRS will open in a new window.

Note: The WRS will open in a new window(browser tab) and guests will be seeing the ClockPMS+ service URL of your WRS - https://sky-eu1.clock-software...


To obtain the link, click on Direct WRS URL (1) and copy the link that will be presented to you. You can, from then on, use the link as you wish - provide it to your web developer to add to your website behind an e.g. 'Book now' button; use it in emails to direct guests to your WRS; use it in social media campaigns and more.


Inline Integration

This integration option ensures that guests cannot distinguish between the WRS and your website and enables you to use more tools for integration. However, it may require a bit more advanced web development expertise.

Important: Your website must work on HTTPS protocol to use Inline integration.

Note: The WRS will open within your website and will be a part of it. The guests will be seeing your URL - e.g. https://myclockhotel.com/book-now


Setting up

To enable the inline integration, you first need to enter your domain or domains on which you will integrate the WRS in Hotel domain (integration) (4).

Important: Add all domains that you support one by one - those with and/or without 'www' and any subdomains. 

The WRS will not work and will yield an error message if you integrate it to a site that does not have its domain added here.

Once your domains are added, click on Integration Script (2).

Choose from the Default mode and Rounded corners options:

  • Mode (5) - from here select how the WRS should display on your website. You have 3 options to choose from:
    • Fullscreen - the WRS will be full screen and covers your (website) page
    • Default - the WRS does not cover the whole page and your site is visible in the background. The width of the WRS allows the content to be seen in two columns.
    • Mobile - the WRS comes up at minimum width and your site is visible in the background. The content is in one column.
  • Rounded corners (6) - Choose whether the corners of the WRS should be rounded or not.
  • Site language (7) - select the default language of the WRS.

Note: Regardless of the selected mode, the WRS is highly responsive to screen sizes and for mobile devices, it is always full screen.

Once you have selected the mode and corner settings simply copy the script (8) and send it to your web developer to integrate on your website.


Important: The script should be placed in the <head> tag of all pages where you want to integrate the WRS.


Integration tools

Apart from simply adding the WRS to a page on your website, when using Inline integration you can make use of several integration tools as well.


Book button

You can add a 'Book/Book now' button in many locations on your website, which when clicked, will open the WRS.

The design, size, and label of the button itself are all up to you and your web developer to configure.

The only requirement for the WRS to open is for the button to have a specific data attribute:

  • data-clock-pms-wbe-button

Example: 

<button type = "button" data-clock-pms-wbe-button> Book now </button>

Booking form

A very common approach that many hotels take is also to add a booking form directly on the home page. This allows guests to enter arrival/departure dates and potentially any codes while they are on your home page (or any other page to which you add the form). 

When guests enter their criteria and search, the WRS will directly open on step 2, presenting the available room types and rates.

Similar to the Book button, the design of the Booking form is completely up to you and your web developer. For the form to function properly, however, there are certain requirements:


1. The form should have the following data attribute:

  • data-clock-pms-wbe-form

Example:

<form data-clock-pms-wbe-form>


2. The inputs of the form (Arrival date; Departure date; Bonus code; Company code; Block code) should have a certain value for the name attribute

  • arrival
  • departure
  • bonusCode
  • companyCode
  • blockCode

Example:

<input type = "date" name = "arrival" />
<input type = "date" name = "departure" />
<input type = "text" name = "bonusCode" />
<input type = "text" name = "companyCode" />
<input type = "text" name = "blockCode" />

3. The button that starts the search needs to be of type:

  • submit

Example:

<button type = "submit"> Book </button>

Reminder/Complete your booking button

The third integration tool that you can make use of is all about conversion.

The tool is essentially a pop-up button that will show up if the guest started a search on the WRS, but did not create a booking. This pop-up button will act as a reminder to complete the reservation.



A couple of specifics about the reminder:

  • the integration script (visible below) takes care of the positioning, showing, and hiding the button.
  • your web developer can override the set CSS configuration and design the reminder according to your needs or change its position.
  • if you use Single Page architecture on your website, when guests click on the reminder, the WRS will open at the step at which guests left it.
  • if you are not using Single Page architecture, the WRS will open on the calendar page (step 1), but any room types/rates selected before the guest left the WRS initially, will be available in the shopping cart.

There are several requirements in order for the reminder button to function correctly:

1. The reminder box must have the following data attribute:

  • data-clock-pms-wbe-reminder

2The button or element in the box that will actually open the WRS must have the following data attribute:

  •  data-clock-pms-wbe-button

Complete example:

<div data-clock-pms-wbe-reminder>
<button type = "button" data-clock-pms-wbe-button> Complete your booking </button>
</div>

Tracking scripts

Aiming for high conversion on your website, it is imperative that you track the activity on your website. More and more tracking/analytics solutions such as Google Analytics come at your aid so you can properly analyze the behavior of your website visitors. 

The Clock Web Reservation System is built with that in mind and allows the usage of tracking scripts on it.

Important: Tracking scripts work only with Inline Integration.

In order for the WRS to be PCI DSS compliant, the tracking script is not added to it directly, instead, you must add it to the page of your website where the WRS is integrated.  


We have conveniently prepared basic scripts for the 3 Google Analytics versions. 

To locate them, simply click on the 'Tracking scripts for page views' button in the WRS settings (3).

There you will see the 3 scripts and you simply need to enter your Google Analytics ID in the respective field - Measurement ID for the Analytics version you are going to use. Once entered, the script is complete. 

From there, simply copy the scripts and paste them in your website code:

- script 1 should be added in the <head> tag of your website.

- script 2 should be added in the <body> tag of your website.

Custom tracking scripts

You can of course use other means and systems for tracking. In that case, you can use the Custom tracking script. The way that the tracking works is that you do not add the script within the engine, instead, it is added somewhere on the same page where you have integrated the engine. Then, using a callback script you can take data from the booking creation session:

You simply need to add your tracking script within the callback script. You also have a list with the currently available parameters for tracking.