Instalación web

 

Puede instalar el widget de reserva de ElTenedor directamente en su sitio web para aumentar su capacidad de reserva.

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. ¡La decisión es tuya! 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 pasos para instalar cada una de nuestras opciones de widgets disponibles.

 

En una pestaña nueva a través de un enlace en un botón

 

Cambia el texto por un botón:

<a href="LINK DEL WIDGET "><img src="/imagen.png"></a>

Pega el código resultante en tu web.

EXAMPLE:
<a href="https://module.lafourchette.com/en_GB/module/263821-13c83"><img src="https://static.myfourchette.com/uploads/email_campaign/56567_new_GB.png"></a>

 

VISUALÍZALO AQUÍ

 

 
 

Dentro de la web con el enlace dentro de un iframe

 

Usa el siguiente código:

<iframe src=" LINK DEL WIDGET " style="width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>

EJEMPLO:
<iframe src="https://module.lafourchette.com/es_ES/module/263821-13c83" style=" width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>

 

VISUALÍZALO AQUÍ

 

 

Enlace dentro de un iframe usando media queries

 

Como hacer que tu widget se adapte a los diferentes tipos de pantalla existentes de forma automática.

 

screenshot

Widget durante la reserva

 

 

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:

<iframe class="eltenedor" src="https://module.lafourchette.com/es_ES/module/56567-a3fd1"></iframe>

 

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

<style type="text/css">

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