Inserisci il widget link del tuo ristorante e seleziona il tuo Paese.
Puoi usare il link al widget di prenotazione di Thefork perchè si apra in una nuova scheda del browser, quando clicchi su un testo o pulsante. Installazione facile. Funziona su tutti i tipi di dispositivi, desktop, tablet, smartphone, ecc. Se vuoi che l'internauta rimanga sul tuo sito, puoi anche mettere il widget all'interno di una finestra utilizzando un iframe.
Di seguito, ti spieghiamo come generare il tuo codice da incollare nel tuo sito.
Reindirizza a una nuova scheda tramite il testo
Reindirizza il widget a una nuova scheda, inserendo un collegamento ipertestuale. Dai un'occhiata al seguente esempio.
Incolla questo codice all'interno della parte del codice del sito Web in cui desideri avere il collegamento ipertestuale:
Pulsante mobile
Questo pulsante reindirizza il widget a una nuova scheda, ed è fisso e sempre visibile. Dai un'occhiata al seguente esempio.
Incolla questo codice all'interno del tag <body> del tuo sito web:
Incorporato nel tuo sito tramite iframe
Dai un'occhiata al seguente esempio.
Incolla questo codice all'interno del tag <body> del tuo sito web:
Link all'interno di un iframe utilizzando media queries
Come fare perchè il tuo widget si adatti automaticamente alle dimensioni dei diversi display esistenti. Il nostro modulo ha una altezza dinamica, il chè significa che questa cambia durante il processo di prenotazione.
Widget durante il processo di prenotazione
Per evitare di avere un’altezza fissa permanente e quindi la comparsa di barre di scorrimento (scroll bar), utilizziamo media queries per adattare il widget a tutte le dimensioni dei display esistenti.
Utilizza un id nell’iframe:
Incolla prima del tag </head> i seguenti stili:
<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>
Da questo momento la altezza del widget (iframe) cambierà in funzione della larghezza del display e del blocco html che lo contiene. Nella tabella seguente ti indichiamo la relazione tra le dimensioni:
| Larghezza del display | Altezza widgett | Larghezza widget |
|---|---|---|
| Fino a 320px | 840px | 100% |
| Da 321 to 516px | 650px | 100% |
| Da 517px | 550px | 100% |