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 texto
RRedirecionar o widget para separador novo; ligar através de texto. Observe o exemplo que se segue.
Cole este código dentro da parte do código do site onde pretende ter o link:
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ã.
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% |