Insira o widget link do seu restaurante e selecione o seu país.

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 separador novo através de botão

 

Clique neste botão para redirecionar o widget para um separador novo. Observe o exemplo que se segue.

 

Cole este código dentro da parte do código do site onde pretende ter o botão:

Botão flutuante

 

Este botão que redireciona o widget para separador novo é fixo e está sempre visível.

 

 

Observe o exemplo que se segue. Cole este código dentro da tag <body> do seu site:

Embutido no seu site através de iframe

 

Observe o exemplo que se segue.

 

 

Cole este código dentro da tag <body> do seu site:

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:

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%

Iframe + Button

Este script alterna entre o iframe e um botão dependendo da largura da tela. O botão do telemóvel é mostrado e assim evita que o scroll horizontal apareça no iframe..

Cole o seguinte código dentro da tag <body> da sua página web:

Instale o seu widget em menos de um minuto com o nosso plugin WordPress

 

  • Aceda à página backadmin do site WordPress
  • Vá para “Plugins >> Instalar Plugin novo”
  • Procure TheFork Widgets
  • Clique em “Instalar agora”
  • Depois de instalado, clique em “Ativar”
  • O plugin TheFork aparecerá como um item do menu na barra lateral da página backadmin
  • Configure as opções com a UID do seu restaurante

 

Visite o site oficial do plugin para mais informações.