Integration on your website

Once you have configured BookDirect, added your content, and adjusted the branding and design, the final piece of the puzzle that is left is the integration of 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.

All information needed for both integration approaches - External or Inline - can be found under menu Web-> BookDirect settings-> 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, BookDirect  will open in a new window.

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.

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.

Setting up

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

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 BookDirect should display on your website. You have 3 options to choose from:
  • Fullscreen - BookDirect will be full screen and covers your (website) page
  • Default - BookDirect does not cover the whole page and your site is visible in the background. The width of BookDirect allows the content to be seen in two columns.
  • Mobile - 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 BookDirect should be rounded or not.
• Site language (7) - select the default language of BookDirect.

Integration tools

Apart from simply adding BookDirect 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 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:

• data-clock-pms-wbe-button

<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

<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

<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

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

Here is a complete example of a form:

<form data-clock-pms-wbe-form>
<div><label>Arrival </label><br>
<input type="date" name="arrival"><br>
</div>
<div><label>Departure </label><br>
<input type="date" name="departure"><br>
</div>
<div><label>Bonus Code </label><br>
<input type="text" name="bonusCode"><br>
</div>
<p><button type="submit"> Book now </button></p>
</form>

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 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, BookDirect will open at the step at which guests left it.
• if you don't use Single Page architecture, BookDirect will open on the calendar page (step 1), but any room types/rates selected before the guest left 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:

• data-clock-pms-wbe-reminder

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

•  data-clock-pms-wbe-button

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