Le widget peut soit rediriger les utilisateurs vers une nouvelle page contenant le module de réservation, soit leur permettre de réserver sur la page actuelle en installant le widget iframe. Le processus d'installation est rapide et facile et compatible avec tous les appareils tels que les ordinateurs de bureau, les tablettes, les smartphones, etc.
Vous trouverez ci-dessous les étapes pour installer chacune de nos options de widget disponibles.
Text hyperlink
Redirige le widget vers un nouvel onglet, lien depuis le texte. Essayez avec l'exemple suivant.
Copiez ce code dans la partie du code du site internet pour laquelle vous souhaitez afficher un hyperlien.
Bouton
En cliquant sur ce bouton, le widget est redirigé vers un nouvel onglet. Essayez avec l'exemple suivant.
Copiez ce code dans la partie du code du site internet pour laquelle vous souhaitez que le bouton soit affiché :
Bouton flottant
Ce bouton fixe et visible en permanence permet de rediriger le widget vers un nouvel onglet. Essayez avec l'exemple suivant.
Copiez ce code dans le tag <body> de votre site internet :
Embedded Iframe
Take a look at the following example.
Copiez ce code dans la partie du code du site internet pour laquelle vous souhaitez que le iframe soit affiché :
Iframe + Button
Ce script alterne entre l'iframe et le bouton, en fonction de la taille de l'écran. Le bouton est affiché sur les smartphones pour éviter le défilement horizontal dans l'iframe.
Collez le code ci-dessous dans la balise <body> de votre site web :
Lien à l'intérieur d'un iframe adapté à la taille de l'écran (à l'aide de Media Queries)
Afin d'éviter une longitude fixe dans tous les cas et d'empêcher le défilement d'apparaître, nous utilisons Media Queries pour l'adapter aux différentes tailles d'écran d'un appareil donné.
Utilisez une "class" dans l'iframe:
Collez les styles suivants avant la balise </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>
Désormais, la hauteur de l'iframe changera en fonction de la largeur de l'écran et du bloc html qui le contient. Le tableau suivant montre la relation des mesures.
| Largeur de l'écran | Hauteur du widget | Largeur du widget |
|---|---|---|
| Jusqu'à 320px | 840px | 100% |
| De 321 à 516px | 650px | 100% |
| À partir de 517px | 550px | 100% |