El widget puede redirigir a los usuarios a una nueva página que contenga la plataforma de reservas o permitirles reservar en la página actual instalando el widget de iframe. El proceso de instalación es rápido y fácil y es compatible con todos los dispositivos, como computadoras de escritorio, tabletas, teléfonos inteligentes, etc.

A continuación puede encontrar los códigos de instalación de las opciones de widget disponibles.

Hipervínculo en un texto

Redirige el widget a una nueva pestaña a través de un texto. Eche un vistazo al siguiente ejemplo.

 

 

Pega este código dentro de la parte de la web donde quieras que aparezca el hipervínculo:

Botón

Clic en este botón para redirigir el widget a una nueva pestaña. Eche un vistazo al siguiente ejemplo.

 

 

Pega este código dentro de la parte de la web donde quieras tener el botón:

Floating button

Este botón tiene una posición fija y siempre es visible. Redirige el widget a una nueva pestaña. Echa un vistazo al siguiente ejemplo.

 

 

Pega este código dentro de la etiqueta <body> de tu sitio web:

Iframe Incrustado

Echa un vistazo al siguiente ejemplo.

 

 

Pega este código dentro de la parte de la web donde quieras tener el iframe:

Iframe + Button

Este script conmuta entre el iframe y un botón dependiendo del ancho de la pantalla. Se muestra el botón para móviles y así se evita que aparezca el scroll horizontal en el iframe.

Pega el código siguiente dentro de la etiqueta <body> de tu página web:

Iframe incrustado usando media queries

 

 

Para no tener una longitud grande fija en todos los casos y evitar que aparezca el scroll utilizamos media queries para adaptarlo a los diferentes tamaños de pantalla de cualquier dispositivo. Utiliza una clase en el iframe:

 

Pega antes de la etiqueta </head> los siguientes estilos:

<style type="text/css">

.thefork{
width: 100%;
border:none;
overflow: scroll;
}
/* Media queries widget */ 
@media only screen and (max-width : 320px) { 
    .thefork{
    min-height: 840px;
    }
}
@media only screen and (min-width : 321px) and (max-width : 516px){
    .thefork{
    min-height: 650px; 
    }
}
@media only screen and (min-width : 517px) { 
    .thefork{
    min-height: 550px; 
    }
}
</style>

 

A partir de ahora el alto del iframe cambiará en función del ancho de la pantalla y del bloque html que lo contiene. En la siguiente tabla se indica la relación de medidas.

 

Ancho de pantalla Alto widget Ancho widget
Hasta 320px 840px 100%
De 321 a 516px 650px 100%
A partir de 517px 550px 100%