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 un pulsante

 

Clicca su questo pulsante per reindirizzare il widget a una nuova scheda. Dai un'occhiata al seguente esempio.

 

 

Incolla questo codice all'interno della parte del codice del sito web in cui desideri avere il pulsante:

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.

 

screenshot

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%

Iframe + Button

Questo script passa dall'iframe al pulsante, a seconda delle dimensioni dello schermo. Il pulsante viene visualizzato sugli smartphone per evitare lo scorrimento orizzontale nell'iframe.

Incolla il codice sottostante all'interno del tag <body> del tuo sito web: