The Daily Multi-service Widget

Where can I find it? Services >>> Categories. 

In this article, we will show you what the Multi-Service Daily Widget is, how it can transform the booking experience on your website, and the steps required to install it correctly. The Multi-Service Daily Widget is a tool designed to offer a comprehensive overview of your offerings. Unlike the standard widget (a single calendar), this format allows you to display all your available services in a single daily calendar view.

At present, the Multiservice Daily Widget is exclusively compatible with Tour/Activity services.

How to install it

You can find the installation codes in your TuriTop panel by going to the Services tab >>> Categories.

Step 1: Install the global code script

Install the script that must be placed at the bottom of each page of your website before the tag.

<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="XX" data-buttoncolor="green" data-afftag="ttafid" ></script>

Change the company identification code XX in data-company="XX"  to your own TuriTop ID. This can be found in the top right-hand corner of the control panel of your TuriTop booking system.

Step 2: Install the widget code

Install the multi-service daily widget code in the part of your website where you want it to be displayed.

<div class="load-turitop" data-service="all" data-lang="en" data-embed="box"></div>

Step 3 (Optional): Install the widget in other languages

The "en" in data-lang="en" code represents the language in which the widget will appear. You can change it to any available language you need, provided that the translation has been done beforehand.

If you copy the code directly from your panel in the Services tab >>> PX (Desired Service) >>> Installation, you will see a menu that allows you to change it automatically.

Other configurations

Below, we detail other advanced settings that will allow you to customise your Multi-service Daily Widget according to your needs. Among these options, you will learn how to filter the widget to show only specific services, configure the display of days without events to improve user navigation, and add cover images that will make your availability calendar much more visual and attractive.

Showing specific services

If you want the Multi-service Daily Widget to display only a select group of activities instead of your entire offering, follow these steps to filter them by category:

1. Create a Category: Go to the Services tab >>> Categories and create a new category that includes only the services you want to display.
2. Identify the code: Once created, locate the category identifier code (e.g. C1, C2, C3, etc.).
3. Modify the Widget code: In the HTML code you obtained in Step 2, locate the parameter data-service="all" and replace it with data-category="CX", replacing the 'X' with your category number.
    

<div class="load-turitop" data-category="CX" data-lang="en" data-embed="box"></div>

Displaying days without events

By default, the Multi-service Daily Widget calendar does not visually distinguish between days that are available and those that are not; it only differentiates between past and future dates.

To improve the user experience and avoid unnecessary clicks, you can add the parameter data-data-datepickeravailability="show" to the installation code.

Example:

<div class="load-turitop" data-service="all" data-lang="es" data-embed="box" data-datepickeravailability="show"></div>

What is the difference?

• Without the parameter (default mode): The calendar is 'silent' with regard to availability. All future days are displayed with the same appearance, and the user must click on each one to find out if there are places or events available.

• With data-datepickeravailability="show": The calendar becomes 'smart' and works like a visual traffic light to guide the customer:
  • Green Days: Indicate immediate availability, encouraging booking.
  • Red Days: Indicate dates with sold-out or closed events.
  • Grey Days: Indicate days when there are no events scheduled.

By enabling this feature, you optimise the purchasing process by directing the user's attention directly to days with available spaces, reducing the abandonment rate on your website.

Due to the amount of data it processes, this version of the widget has higher loading latency, so the initial display time may be slightly longer.

Adding banner images

<div class="load-turitop" data-service="all" data-version="2" data-lang="en" data-embed="box" data-datepickeravailability="show"></div>

<div class="load-turitop" data-category="CX" data-version="2" data-lang="en" data-embed=
"box" data-datepickeravailability="show"></div>