The Daily Multi-service Widget – TuriTop Booking System Help Center

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

By adding this widget to your website you will be able to display all the services available per day. Then your clients will see all the services and time slots available in a day and choose the events they are more interested in.

Keep in Mind: Right now, the Daily Multi-Service Widget only works with Tour services.

Installation

You can find the installation codes on your TuriTop panel by accessing Services >>> Categories. To install the Daily Multi-service Widget, please, follow the instructions below:

Step 1: Install the global script

Install the script that must be placed at the bottom of every 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 ID XX in the data-company="XX" parameter with your own TuriTop Company ID. This ID can be found in the top-right corner of your TuriTop booking system Control Panel.

Step 2: Install the widget code

Install the code of the Daily Multi-service Widget (below) into the section of your website where you want it to be displayed:

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

More options

Installing the widget in other languages

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

If you are copying the code directly from your panel, you will see a menu that allows you to change it automatically.

Showing specific services

If you want to use the Daily Multi-service Widget to show only some services (not all), please follow these steps:

Go to the Categories in the Services tab and create a new category with the services you want to display.
Copy the Category code that will appear (C1, C2, C3, etc.)
Change data-service="all"for data-category="CX", substituting "CX" for the code of the category. E. g. "C3":

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

Display of days with no events

When opening the calendar to select a day in the Daily Multi-service, by default, it does not make a distinction between the days that are open (have events) and those that don't. It just distinguishes between past and future events.

To enable this, you need to include the parameter data-datepickeravailability="show" within the widget installation code.

E. g.:

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

You can see the difference between both versions here:

WITHOUT data-datepickeravailability="show"

WITH data-datepickeravailability="show"

Keep in Mind: this version of the widget has a higher loading latency, so it may take a little longer to load.

Adding banner images

This version allows the addition of banner images to the widget.

Version 1 - per services

1. First add an image within the service. Go to Services >>> PX >>> Service details >>> Upload product banner image and add a picture:

2. Then, use this div code for the installation:

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

Keep in mind, you will need to adapt the data-lang="en" attribute if you are installing it in different languages.

Preview

Version 2 - per categories

You also have the possibility to show only a category.