In this article, we show you an example of a booking button available for your services and how to easily integrate it into your website. Additionally, you will learn how to customize both its language and color.
In order to display the buttons in different languages, you must first have translated your services from the Translate tab. You can check this article for more information.
You can check this article for other booking widgets and buttons available to integrate into your website.
Customization Instructions
- Company ID: Replace D1 with your company ID (you will find it in the upper-right corner of your TuriTop dashboard).
- Categories: Replace P1 with P2, P3, etc., to filter by a specific service.
- Languages: If your service is available in multiple languages, go to the Translate tab in your control panel to configure the appropriate settings.
Languages and Codes
To change the button's language, locate the data-lang="es" attribute in the code and replace it with the corresponding code for the language you wish to display (you can refer to the table below for supported codes).
<div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">GREEN</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="green" data-afftag="ttafid" ></script>| Language | Code |
| German | de |
| Arabic | ar |
| Bulgarian | bg |
| Catalan | ca |
| Czech | cs |
| Chinese | zh |
| Korean | ko |
| Croatian | hr |
| Danish | da |
| Slovak | sk |
| Spanish | es |
| Basque | eu |
| Finnish | fi |
| French | fr |
| Galician | gl |
| Greek | el |
| Hebrew | he |
| Hindi | hi |
| Dutch | nl |
| Italian | it |
| Japanese | ja |
| Latvian | lv |
| Norwegian | no |
| Polish | pl |
| Portuguese | pt |
| Russian | ru |
| Swedish | sv |
| Thai | th |
| Turkish | tr |
Button Colors
Customize the color of your buttons: simply modify the attribute data-embed="button">GREEN</div>, replacing "green" with your desired color.
<div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">GREEN</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="green" data-afftag="ttafid" ></script>The above code will show the button in green colour.
<div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">ORANGE</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="orange" data-afftag="ttafid" ></script><div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">BLUE</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="blue" data-afftag="ttafid" ></script><div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">RED</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="red" data-afftag="ttafid" ></script><div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">YELLOW</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="yellow" data-afftag="ttafid" ></script><div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">BLACK</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="black" data-afftag="ttafid" ></script><div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">WHITE</div>
<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="D1" data-buttoncolor="white" data-afftag="ttafid" ></script>
Comments
0 comments
Please sign in to leave a comment.