Installation of the Widget

Once your services have been set up, the next step is to publish them on your website. Below, we explain how to carry out the basic installation of your booking calendar.

Below we also outline other display options, such as button panels and multiple calendars, including links to their help articles with detailed step-by-step instructions.

• Daily Multi-service Widget: The Daily Multi-service Widget is a tool designed to provide an overview of your offering. Unlike the standard widget (a single calendar), this format allows you to display all your available services in a single daily calendar view.
• Services button and Categories widget: These options allow you to group several services on a single screen to make navigation easier for your customers.
  • Services menu (Full button panel): Displays all your active services in a button format.
  • Services menu by category: Ideal for displaying only a specific group of services. This option requires you to create a category beforehand so that you can link only the services you wish to display in this widget.
  • Global categories menu: Displays all your created service categories.
• Book Now button: This button will automatically display the booking calendar to streamline the purchase process.
• Buy Gift Voucher button: This button will automatically display the calendar for the relevant service, allowing the customer to complete the gift voucher purchase process directly.
• Redeem Gift Voucher button: This button will automatically display the calendar for the relevant service, allowing the customer to complete the gift voucher redemption process directly.

Instructions

To install your booking calendar, you will need two codes: the Widget Code and the Global Code. These codes can be found inside each service, by going to Services >>> PX >>> Widget installation.

Step 1: Install the Global Code

First, copy the "Global code".

Example of the script:

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

For this installation, you will need to add the global code script to the footer of your website. If you have created the website, you will have no problem knowing what to do. If you are using a web builder, there must be a way to add this code to the footer of your page (see your CRM documentation or contact your technical support team).

You have at your disposal a variety of installation tutorials for the most famous CRMs in the market in this section of your TuriTop Help Center.

This script has several attributes that you can change, namely:

• data-afftag: This is the attribute that will identify your affiliate tag. It's not necessary to change it.
• data-buttoncolor: Change the default color of the widget button (in case you want your widget to appear as a button). You can change it to green, orange, blue, yellow, black, or white.

If you want to use your own designs for the button, remove the data-buttoncolor attribute (or change it to none) and add the attribute: data-cssclass="my-button". Change "my-button" for your preferred class.

Step 2: Install the Widget Code

Example of the code:

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

Copy the "Widget code" and insert it in the preferred section to add a widget to your web page. When the page loads the widget, the widget will load with the calendar of your service. 

Most of the websites, CRM or their managers, have tools that allow you to add HTML code that's then rendered.

Keep in mind that it is technically impossible to list all options based on all the systems and web builders in the market. But you have at your disposal a variety of installation tutorials for the most famous CRMs in this section of your TuriTop Help Center.