Instalación del Widget de Reservas

La mejor manera de instalar el widget de tu sistema de reservas TuriTop es usando la integración de JavaScript. Es más flexible, tiene más opciones y está mejor soportada.


Para realizar la instalación de tu calendario de reservas, necesitarás estos dos códigos que te mostramos en la siguiente imagen: 

Código de instalación JS

 

Los conseguirás en tu Panel de Control en tu pestaña Servicios en cada Servicio individual. 

Ten en cuenta: Si quieres instalar tu widget en otro idioma, deberás seleccionar el idioma deseado antes de copiar el código

Script Tag Global

El primer paso para añadir el widget con JavaScript es añadir el script tag global al footer de tu página web. Si tu has creado la página web, no tendrás problema en saber qué hacer. Si estás usando un web builder, tiene que haber una manera de añadir código al footer de tu página (seguramente si te deja añadir texto en ese campo puedes añadir el script). Este es un ejemplo del script:

<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>

Copia el código y cambia los atributos de ser necesario.

Hay un par de cosas que tienes que tener en cuenta con respecto a los atributos

  • Data-ga: Si usas Google Analytics con TuriTop, cambia esto a "yes". Para saber como configurar GA consulta este artículo.
  • Data-buttoncolor: Cambia el color por defecto del botón del widget. Si quieres que tu widget aparezca como un botón. Puedes cambiarlo a verde, naranja, azul, amarillo, negro o blanco.
  • Data-afftag:  Esto no es necesario cambiarlo. 

Si quieres usar tus propios diseños para el botón quita el atributo data-buttoncolor (o cambiándolo a none) y añade el atributo: data-cssclass="my-button". Cambia my-button por tu clase. 

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

Añade el CSS del botón a tu página web y habrás personalizado tu botón de compra.

Si quieres usar tu propia imagen, sigue leyendo. 

Ten en cuenta: para usuarios de Logo Wix , ve a este apartado. Para usuarios Wordpress, consulta este artículo.

Idiomas y colores

Si quieres más información sobre los idiomas y los colores admitidos por tu sistema de reservas TuriTop, haz clic aquí.  


Añadir el Widget

Hay varias formas entre las que elegir para el widget de reservas:

Opción 1: Incrusta un widget de reservas

Esta manera te deja añadir un widget a tu página web. Cuando la página carga el widget, se cargará el widget con el calendario. Esto es un ejemplo del código que necesitarás añadir:

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

Así se verá el widget de reservas.

Opción 2: Añade un Botón de Reserva Ya!

Para insertar un botón, cambia el data-embed de "box" a "button":

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

Si quieres que el botón diga algo diferente cambia el "Reserva Ya" con tu frase.

Así se verá el botón "Reserva ya".

Si por el contrario, quieres usar una imagen en vez de un botón, usa este código:

<div class="load-turitop" data-service="P1" data-buttoncolor="none" data-lang="es" data-embed="button"><img src="https://link-de-tu-imagen.jpg"></div>
Ten en cuenta: cambia la dirección descrita en <img src=> por la tuya propia. 

Opción 3: Añade un botón de Canjear o comprar un bono regalo en tu web

Si quieres insertar un botón de canjeo de bono regalo, consulta el siguiente artículo.

Opción 4. Añade botoneras de todos los servicios o categorías

Para añadir botoneras de todos los servicios, usa el código proporcionado en la pestaña Categorías en el apartado de insertar todos tus servicios:

Script de Categoría de servicios

Puedes copiar de aquí el código:

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

 Así se verán las botoneras de todos los servicios.

Para añadir botoneras de todas las categorías,usa el código proporcionado en la pestaña Categorías en el apartado de insertar todas tus categorías:

Script de Gategorías

Copia aquí el código:

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

 Así se verá las botoneras de todas las categorías.

Ten en cuenta: igual que con el código de instalación del widget, si quieres mostrar otro idioma, debes seleccionarlo antes de copiar el código

5. Añade el Daily Widget por servicio o por categoría

También puedes añadir nuestro widget diario multiservicio. Debes copiar el siguiente código desde la pestaña Categorías en tu panel de control:

Script Daily Widget

Aquí el código para instalarlo:

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

Lo podrás ver de la siguiente manera: 

Widget Diario Multiservicio

Para más información sobre el Daily Widget puedes ir a este artículo

Ten en cuenta: si quieres hacer un daily widget de categorías, usa el mismo código indicado arriba y reemplaza el atributo data-service por data-category. Y no olvides el script que debes pegar en el footer de tu página. 

JavaScript en páginas 1&1

El servicio 1&1 no deja añadir scripts al footer de la página directamente. Para que la integración JavaScript funcione sigue estos pasos: 

  1. 1.Ve a tu panel de control y entra en el modo desarrollador. Haz clic aquí.
  2. 2. Añade el código del <div> seguido del <script> entre el tag <footer> de tu sitio 1&1, así:
<div class="load-turitop" data-service="P1" data-lang="es" data-embed="box"></div>
<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>

Widget de afiliado

Para añadir un widget de afiliado, tienes que añadir un nuevo atributo al <div>: data-affiliate="333". Este es un ejemplo:

<div class="load-turitop" data-service="P1" data-lang="es" data-embed="box" data-affiliate="333"></div> 
Cambia el tag de afiliado para que concuerde con tu agente/afiliado. Para más información ve a este artículo.
 
¡Ahora estás list@ para instalar el widget de tu sistema de reservas con JavaScript!