De reserveringsmodule installeren

De reserveringsmodule van TheFork kan rechtstreeks op jouw eigen website geïnstalleerd worden zodat gasten altijd en overal kunnen reserveren.

De reserveringsmodule kan gasten omleiden naar een nieuwe pagina met de kalender of hen toestaan op de huidige pagina te reserveren door de iframe-reserveringsmodule te installeren, die meteen een kalender met opties toont. De keuze is aan jou! Het installatieproces is snel en gemakkelijk en werkt op alle apparaten zoals desktops, tablets, smartphones, etc.

Hieronder vind je de stappen om de reserveringsmodule te installeren.

 

Open in nieuw tabblad, link in de vorm van een knop

 

Verander de tekst naar een knop:

<a href="WIDGET LINK "><img src="/imagen.png"></a>

Plak de code in jouw website.

VOORBEELD:
<a href="https://module.lafourchette.com/nl_NL/module/263821-13c83"><img src="https://static.myfourchette.com/uploads/email_campaign/56567_new_GB.png"></a>

 

BEKIJK HIER EEN VOORBEELD

 

 
 

Geïntegreerd in de site als kalender

 

Gebruik de volgende code:

<iframe src=" WIDGET LINK " style="width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>

VOORBEELD:
<iframe src="https://module.lafourchette.com/nl_NL/module/263821-13c83" style=" width: 100%; min-height:800px; border:none; overflow:scroll;"></iframe>

 

 

BEKIJK HIER EEN VOORBEELD

 

 

Link in de kalender, aangepast aan de grootte van het scherm (dankzij Media Queries)

 

Het formaat van het scherm kan variëren per pagina. Om de beste ervaring te bieden aan de gast, past onze reserveringsmodule zich aan de grootte, lengte en hoogte van het scherm aan.

 

screenshot

Widget during the reservation process

 

 

Om een vaste lengte te vermijden en om te voorkomen dat een scroll optie verschijnt, gebruiken we Media Queries om deze aan te passen aan de verschillende schermformaten van een bepaald apparaat.

Gebruik een Class in het frame:

<iframe class="thefork" src="https://module.lafourchette.com/nl_NL/module/56567-a3fd1"></iframe>

 

Plak de volgende stijlen vóór de tag </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>

 

Vanaf nu verandert de hoogte van het frame afhankelijk van de breedte van het scherm en het html-blok dat het bevat. De relatie tussen deze afmetingen werkt als volgt.

 

Breedte scherm Hoogte reserveringsmodule Breedte reserveringsmodule
Tot 320px 840px 100%
Van 321 tot 516px 650px 100%
Vanaf 517px 550px 100%