Instruções do site
Você pode instalar o widget de reserva do TheFork diretamente no seu site para aumentar suas reservas.
O widget pode redirecionar os usuários para uma nova página que contém a plataforma de reservas ou permitir que eles reservem na página atual instalando o widget iframe. A escolha é sua! O processo de instalação é rápido, fácil e compatível com todos os dispositivos, como desktops, tablets, smartphones etc.
Abaixo, você encontra as etapas para instalar cada uma das opções de widget disponíveis.
Redirecionar para nova aba, vincular através do texto
Use o link do seu widget da seguinte maneira:
<a href=" WIDGET LINK ">Texto</a>
Cole esse código no seu site.
EXEMPLO
<a href="https://module.lafourchette.com/pt_BR/module/263821-13c83">Online Booking</a>
Redirecionar para a nova aba, vincular através do botão
Mude o texto para o botão:
<a href=" WIDGET LINK "><img src="/imagen.png"></a>
Cole esse código no seu site.
EXEMPLO:
<a href="https://module.lafourchette.com/pt_BR/module/263821-13c83"><img src="https://static.myfourchette.com/uploads/email_campaign/56567_new_GB.png"></a>
Incorporado ao seu site através do iframe
Use o seguinte código:
<iframe src=" WIDGET LINK " style="width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>
EXEMPLO:
<iframe src="https://module.lafourchette.com/pt_BR/module/263821-13c83" style=" width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>
Link dentro de um iframe adaptado ao tamaño do ecrã (usando Media Queries)
Quando os usuários fazem reservas em plataformas diferentes, o tamanho da tela pode variar. Para criar a experiência de reserva mais fácil, nosso mecanismo de reserva se adapta ao tamanho, comprimento e altura da tela.
Widget durante a reserva
Para evitar uma longitude fixa e impedir que a barra de rolagem apareça, usamos Media Queries para adaptá-lo aos diferentes tamanhos de tela de qualquer dispositivo.
Use um ID no iframe:
<iframe class="thefork" src="https://module.lafourchette.com/pt_BR/module/56567-a3fd1"></iframe>
Cole os seguintes estilos antes da tag </head>:
<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 agora, a altura do iframe mudará dependendo da largura da tela e do bloco html que o contém. A tabela a seguir mostraa relação das medidas:
|
Altura do widget | Largura do widget | |
---|---|---|---|
Até 320px | 840px | 100% | |
De 321 a 516px | 650px | 100% | |
A partir de 517px | 550px | 100% |