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.

Ejemplo:

<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/en_GB/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.

Nuestro motor de reservas tiene una longitud dinámica, es decir el tamaño del alto cambia durante el proceso de reserva.



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 un id en el iframe:

<iframe class="eltenedor" src="https://module.lafourchette.com/en_GB/module/263821-13c83"></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%
Enlace dentro de un iframe usando el script iframe resizer

Si quieres que el tamaño de tu widget iframe se adapte de forma dinámica puedes usar un script externo para la instalación. En este caso necesitas comunicarlo al equipo técnico de Eltenedor. Puedes consultar como se hace en el siguiente enlace.