Once you have configured the BookDirect, added your content, and adjusted the branding and design, the final piece of the puzzle that is left is the integration of the BookDirect 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-> BookDirect settings-> section Website 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 BookDirect will open in a new window.
Note: The BookDirect 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 BookDirect; use it in social media campaigns and more.
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 BookDirect 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
To enable the inline integration, you first need to enter your domain or domains on which you will integrate the BookDirect 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 BookDirect 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 BookDirect should display on your website. You have 3 options to choose from:
- Fullscreen - the BookDirect will be full screen and covers your (website) page
- Default - the BookDirect does not cover the whole page and your site is visible in the background. The width of the BookDirect allows the content to be seen in two columns.
- Mobile - the BookDirect 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 BookDirect should be rounded or not.
- Site language (7) - select the default language of the BookDirect.
Note: Regardless of the selected mode, the BookDirect 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 BookDirect.
Apart from simply adding the BookDirect to a page on your website, when using Inline integration you can make use of several integration tools as well.
You can add a 'Book/Book now' button in many locations on your website, which when clicked, will open the BookDirect.
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:
<button type = "button" data-clock-pms-wbe-button> Book now </button>
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:
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
<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:
<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 BookDirect, 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 BookDirect will open at the step at which guests left it.
- if you are not using Single Page architecture, the BookDirect will open on the calendar page (step 1), but any room types/rates selected before the guest left the BookDirect 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:
2. The button or element in the box that will actually open the BookDirect must have the following data attribute:
<button type = "button" data-clock-pms-wbe-button> Complete your booking </button>
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 BookDirect 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 BookDirect 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 BookDirect 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 BookDirect 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.