Instruções do Website

Pode instalar o botão de reservas do TheFork diretamente no seu website, na sua página de Facebook ou perfil de Instagram de forma a aumentar as suas reservas.

O botão de reservas (widget) do seu website pode redirecionar utilizadores para uma nova página de navegação ou separador ao clicarem num botão ou texto. Caso prefira que o utilizador permaneça na mesma página, ou seja, no seu website, poderá instalar o botão de reservas usando um iframe.

Em qualquer opção o processo de instalação é rápido, acessível e compatível com todos os tipos de dispositivos como computadores, tablets ou smartphones.

De seguida explicamos como pode instalar cada uma das opções de widgets disponíveis. 

 

 

Redirecionar para um novo separador ou página de navegação através de um link num botão 

 

Modifique o texto para um botão:

<a href=" LINK DO WIDGET "><img src="/imagem.png"></a>

Cole o seguinte código criado pela ação anterior no seu website.

EXEMPLO
<a href="https://module.lafourchette.com/pt_PT/module/263821-13c83"><img src="https://calendarexamples.thefork.com/wp-content/uploads/2020/12/56567_new_GB.png"></a>

 

 

 

CLIQUE  AQUI PARA VER O RESULTADO

 

Incorporado no seu website através de um código iframe

 

Use o seguinte código:

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

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

 

 

CLIQUE AQUI PARA VER O RESULTADO

 

Link dentro de um iframe adaptado ao tamanho do ecrã usando Media Queries

 

Quando os utilizadores reservam nas diferentes plataformas, o tamanho do ecrã pode variar. De modo a criar uma experiência de reserva mais intuitiva, o nosso widget de reservas adapta-se ao tamanho, largura e altura do ecrã.

 

screenshot

Widget durante o processo de reserva

 

 

De forma a evitar uma longitude fixa e prevenir que apareça o scroll, usamos media queries para adaptar o widget aos diferentes tamanhos de ecrã de qualquer dispositivo.

Utilize o atributo ‘classe’ no iframe:

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

 

Cole os seguintes estilos antes da etiqueta </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 será responsiva em função da largura do ecrã e do bloco de html que a contém. Na seguinte tabela, estão indicadas as relações entre medidas:

 

Largura do ecrã Altura do widget Largura do widget
Até 320px 840px 100%
De 321 a 516px 650px 100%
A partir de 517px 550px 100%