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.
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"
fordata-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>
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.
1. First add an image within the service. Go to Services >>> PX >>> Service details >>> Upload product banner image and add a picture:
2. Install the following div code modifying the value on data-category="CX"
according to the number of the category you want to display:
<div class="load-turitop" data-category="CX" data-version="2" data-lang="en" data-embed=
"box" data-datepickeravailability="show"></div>
Preview
Comments
0 comments
Please sign in to leave a comment.