Integration on your website

Modified on: Mon, 11 Mar, 2024 at 2:18 PM

Print

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.

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.

Important: In case you want to embed several BookDirects (for several hotels) onto one website, they must be embedded on different pages on that website.

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.

Note: BookDirect will open in a new window(browser tab) and guests will be seeing the Clock PMS+ 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.

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: 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

Note: Please check THIS website to see examples of the inline integration options and Integrations tools.

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).

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

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).

Important: The above script contains both CSS and JavaScript. Please note that some website building platforms (e.g. Wordpress) might require you to separate the CSS and JavaScript portions and add them in different sections on their platform.

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.

Note: Regardless of the selected mode, 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 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.

Note: Please check THIS website to see examples of the  integration options and Integration tools

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

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:

Note: You must complete all 3 requirements listed below for the form to work!

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>

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

2The button or element in the box that will actually open BookDirect 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>

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

On this page