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. 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.
Text hyperlink
Doorverwijzen van de widget naar nieuw tablad, link via tekst. Bekijk het volgende voorbeeld.
Plak deze code in het gedeelte van de website code waar u de hyperlink wilt hebben:
Button
Klikken op deze knop stuurt de widget door naar nieuw tablad. Bekijk het volgende voorbeeld.
Plak deze code in het gedeelte van de website code waar u de knop wilt hebben:
Floating button
Deze knop stuurt de widget door naar nieuw tablad, is vast en altijd zichtbaar. Bekijk het volgende voorbeeld.
Plak deze code in de <body> tag van uw website:
Embedded Iframe
Bekijk het volgende voorbeeld.
Plak deze code in het gedeelte van de website code waar u de iframe wilt hebben:
Iframe + Button
Dit script schakelt tussen iframe en de knop, afhankelijk van de schermgrootte. De knop wordt weergegeven op smartphones om horizontaal scrollen in het iframe te voorkomen.
Plak de onderstaande code in de <body> -tag van uw website:
Link in de kalender, aangepast aan de grootte van het scherm (dankzij Media Queries)
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:
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% |