Ajouter le widget lien de votre restaurant et sélectionnez votre pays.

Vous pouvez installer le widget de réservation de TheFork directement dans votre site Web, votre page Facebook ou votre compte Instagram pour augmenter vos réservations. 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.

Redirection vers un nouvel onglet depuis le 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 :

Intégré à votre site depuis iframe

 

Essayez avec l'exemple suivant.

 

Copiez ce code dans le tag <body> de votre site internet :

Lien à l'intérieur d'un iframe adapté à la taille de l'écran (à l'aide de Media Queries)

 

Lorsque les utilisateurs réservent sur différentes plateformes, la taille de l'écran peut varier. Afin de créer l'expérience de réservation la plus simple, notre moteur de réservation s'adapte à la taille, la longueur et la hauteur de l'écran.

 

screenshot

Widget pendant le processus de réservation

 

 

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 un identifiant 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%

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 :