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.
Text hyperlink
Redirecionar 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:
Button
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:
Iframe Embutido
Observe o exemplo que se segue.
Cole este código dentro da parte do código do site onde pretende ter o iframe:
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:
Link dentro de um iframe adaptado ao tamanho do ecrã usando Media Queries
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% |