Instala TuriTop en tu página web

18.06.2017 14:02:16

Instalar TuriTop en tu página web, con todas sus funcionalidades, es más fácil que nunca. Solo requiere que pegues una línea de código en el footer (pie de página) y otra línea de código donde quieras mostrar el widget de reserva. Eso es todo. 

Este tutorial explica las diferentes opciones para insertar el sistema de reservas, dependiendo de tus necesidades.

 

Script tag general

Este es el ejemplo del código que hay que insertar en el footer (pie de página) de tu página web. Justo antes de la 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>


Cambia D1 por tu propio id de TuriTop (lo encontrará en la esquina superior derecha de tu panel de control TuriTop).

Después de que esa línea de codigo esté añadida, podrás empezar a insertar el widget de reservas de dos formas diferentes:

  • Formulario de reservas incrustado
  • Botón de "Reserva Ya" 


1. Para insertar el formulario de reservas embebido (muestra el calendario de reservas de forma directa - recomendado) copia y pega este código en cualquier parte de tu página web.

NOTA: recuerda que si decides usar esta forma de integración tendrás que dejar un mayor espacio en tu web para que el sistema de reserva se vea correctamente. 

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

data-service="P1" indica el código del producto/servicio que quieres cargar, y data-lang="es", indica el lenguaje en el cual quieres mostrarlo.

2. Para insertar un botón de "Reserva Ya", solo debes cambiar el parámetro data-embed a "button":
<div class="load-turitop" data-service="P1" data-lang="es" data-embed="button">¡Reserva ya!</div> 

Al pegar este código en tu web, aparecerá un botón, el cual mostrará el widget de reserva en una ventana emergente con el fondo oscuro de tu página web por detrás.

NOTA: cambia ¡Reserva ya! por la palabra o frase que quieras que aparezca en el botón.

El parámetro data-buttoncolor="green" indica el color del botón . Puedes elegir entre estos colores:


data-buttoncolor="green"
data-buttoncolor="orange"
data-buttoncolor="blue"
data-buttoncolor="yellow"
data-buttoncolor="black"
data-buttoncolor="white"
data-buttoncolor="red"

 
Consejo: Estos botones representan una "Llamada a la acción", es decir, debe tener un color totalmente diferente a los colores de tu página web para que destaquen y no sean pasados por alto en ningún momento. Recomendamos usar uno de los botones TuriTop en vez de tu propio estilo CSS.


Habiendo dicho esto, si sigues queriendo usar tu propio diseño para los botones de "Reserva ya", no incluyas el parámetro data-buttoncolor= (o escribe data-buttoncolor="none") y el sistema no añadirá el estilo/color de los botones TuriTop.

Usa el parámetro data-cssclass= para añadir el nombre de la clase de los botones de tu elección.

Si en vez de un botón en CSS lo quieres insertar mediante una imagen, usa este código:

<div class="load-turitop" data-service="P1" data-buttoncolor="none" data-lang="en" data-embed="button"><img src="https://ENLACE DE TU IMAGEN.jpg"></div>

Parámetros globales del script

Cuando añades la tag del script en el footer de todas tus páginas, puedes definir parámetros globales, los cuales afectarán a la configuración por defecto de todos tus widgets de reserva. Por ejemplo:

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

Esto indica que todos tus widgets de reserva que cargan en tu página web, corresponden a los servicios de la empresa D1. Luego, data-ga="no" , indica que no hay necesidad de esperar por el código de Google Analytics, y data-buttoncolor="green" indica que el color de TODOS los botones de "Reserva ya" deben ser verdes.

Cuando defines algo de forma global, no hay necesidad de definir de forma local, a menos que quieras sobrescribir los valores globales.

¡Importante!: Para integrar TuriTop con Google Analytics ve a este artículo

¡Contáctanos!


¿Listo para comenzar a trabajar con nosotros? ¡Genial! Llámanos o envíanos un correo electrónico y nos pondremos en contacto contigo lo antes posible!

(+34) 922 394 632