Installation of the Widget

You already configured all of your services and are ready to publish them on your website. In the next section, we will show you what is the basic way to install your reservation calendar.

In addition, you have the following installation options:

• Install the services via the WordPress plugin
• Add a "Book now" button
• Add a gift voucher purchase button
• Add a gift voucher redemption button
• Install the daily widget - multiservice
• Install a category with all your services
• Install a service category

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.