Advance customisation of book now button

This article explains how to achieve customised "book now" button to be displayed on our webpage with changing CSS style.

WARNING 15. Nov 2022 - Recently we made some changes to booking widget, in order to improve it's functionalities, which might have had impacted customisations that you applied to the button on your page. Please see below the example code that should be used for such customisations from now on.

Do you need the button to be displayed in a way that is not supported by our basic customisations?

No worries as it is possible to further customise the style of the "book now" button by doing changes to the CSS style.

In order for the changes to be recognised we need to make a reference to our booking widget "book now" button with using following sentence:

::part(trekksoft-booking-widget-button)

Example

Find bellow an example when applying a custom style by using external CSS file sheet that changes the position and width of book now button on all the sites of your webpage.

Note that before Nov 15th 2022 we were referring to the button simply with "button" and now we have to use "::part(trekksoft-booking-widget-button)"

"customStyle.CSS"

/* Button Customisation */

.bookNowButtonCustom ::part(trekksoft-booking-widget-button) {
    width: 400px;
    margin-left: 100px;
}

/* Button Container Customisation */

.bookNowContainerCustom ::part(trekksoft-booking-widget-container) {
display: block;
}

For the changes to work it is important that we use the exact reference as mentioned in the example above.

"yourPage.HTML"

<html>
<head>
<link rel="stylesheet" href="customStyle.CSS">
</head>
<body>
<h1>My Custom Webpage</h1>
<div class='bookNowButtonCustom'>
    <!-- Code for the "book now" button as we can find it in our backoffice -->
    <script src="https://bw.trekksoft.com/loader.js" async data-owner="trekksoft" data-type="activity-booking" data-id="306804" data-client-id="BOOKIE-ba2e7051e5ed434d754806b06" data-token="378146dd3dff8511365f003a624513a64e3f86a8da5054f4"></script>
</div>
</body>
</html>

You can find the code to integrate your "book now" button in the backoffice. For further instructions on how to obtain it, you can follow the article How to integrate the Booking Widget into your website.

Preview of the example above as we would see it on the webpage

Note the wider and margined button.

If you have any further questions or need help with customising the button, feel free to reach out to our support at support@trekksoft.com and we will help you with customisations.

Last Updated [22/11/2022]