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:
- Embed booking form.
- 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.
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.
<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
<script src="https://app.turitop.com/js/load-turitop.js" data-company="D1" data-ga="no" data-buttoncolor="green" data-afftag="ttafid" ></script>
When you define something globally, there is no need to define it locally unless you want to override the global value.