Install a Booking Button

In this tutorial, we will show you how to install the "Book now" button. Once configured, when your customers click on it, the booking calendar will automatically pop up to facilitate the purchase process.

Step 1: Install the Global Code

First, you must install the global code in the footer of your website. You can find this code in the control panel in any service, under the Services tab >>> PX (Desired Service) >>> Installation. We recommend consulting our detailed guide on installing the widget at this link.

Step 2: Widget Code Configuration and Installation

Next, you can use the widget code found in the desired service, under the Services tab >>> PX (Desired Service) >>> Installation.

To locate the specific code for each service in your TuriTop panel, we recommend consulting the following tutorial, where you will find detailed steps.

For the calendar to behave like a button, you will need to make two small modifications to the code:

• Change the format: Modify the attribute data-embed="box" to data-embed="button".
• Customise the text: Change the default text according to your preferences (for example: "Book now").

Here is an example of how the code should look:

<div class="load-turitop" data-service="P1" data-lang="en" data-embed="button">Book now</div>

The button will look like this:

Additionally, you can customise the design of your booking button using the CSS class load-turitop in the Design tab. For more information on customising calendars and buttons from the Design tab, you can refer to this article.