Install TuriTop on your website

18.06.2017 14:02:16

Integrating TuriTop in your website, with all its features, is now easier than ever. It only requires pasting one line of code in the footer of all your pages and another line of code in the place where you want to insert the booking widget. That's it.


This post explains the different options for inserting the booking module according to your needs.



Global script tag

Here is an example of the script tag that must be inserted in the bottom of every page in your website before the  tag.

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

Change D1 with your own TuriTop id (you will find it on the top right corner of your TuriTop control Panel)

After that line of code is added you can start inserting the booking widget in two different ways:

  1. Embed booking form.
  2. Book now button.

1. To embed booking form insert the following line of code where you want to display it.

NOTE: if you choose this option, remember to leave some empty space on your website to fit the booking widget.

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


The data-service="P1" indicates the id of the product/service you want to load, and data-lang="en" the language in which the booking module shall be loaded.

2. To insert a Book now button just change the parameter data-embed to "button":

<div class="load-turitop" data-service="P1" data-lang="en" data-embed="button">Book now</div>

This will create a button on your page (change the wording Book now by any other text you rather show inside the button).

Clicking on this button will open the booking widget inside a lightbox, keeping your website behind a dark background.
 
TipChange "Book Now" for the word or phrase that you want to say in the button.
 
data-buttoncolor="green"
data-buttoncolor="orange"
data-buttoncolor="blue"
data-buttoncolor="yellow"
data-buttoncolor="black"
data-buttoncolor="white"
data-buttoncolor="red"

The parameter data-buttoncolor="green" indicates the color for the button. You can choose between green, orange, blue, red, yellow, black and white. 

Tip: these buttons represent a Call To Action, so they must have have a very different color from the rest of your website to stand out and avoid being overlooked. We strongly recommend using one of our buttons instead of your own style/css

Having said that, if you remain willing to use your own design for book now buttons, do not include the parameter data-buttoncolor=  (or write data-buttoncolor="none") and the system will not add styles/colors to the buttons. 

Use the parameter data-cssclass= for adding a class name of your choice to the button's tag. 
 
If you want to use an image instead use this code: 
<div class="load-turitop" data-service="P1" data-buttoncolor="none" data-lang="en" data-embed="button"><img src="https://LINK OF YOUR IMAGE.jpg"></div>


Global parameters on script tag

When you add the script tag in the footer of all your pages, you can define global parameters that will apply as a default for all booking widgets. For example:

<script src="https://app.turitop.com/js/load-turitop.js" data-company="D1" data-ga="no" data-buttoncolor="green" data-afftag="ttafid" ></script>
 
This indicates that all booking widgets loaded on the website will correspond to services of the company D1. Then data-ga="no" indicates there is no need to wait for Google Analytics code, and data-buttoncolor="green" that the color of all book now buttons shall be "green".

When you define something globally, there is no need to define it locally unless you want to override the global value.

Important!: To integrate Google Analytics with TuriTop, go to this article.

Let's Get In Touch!


Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!

(+34) 922 394 632