Webflow est apprécié par les restaurants premium et les concepts gastronomiques pour la qualité de rendu et la finesse des animations qu'il permet. Ajouter un bouton Réserver ou un widget de réservation à un site Webflow est simple grâce au composant Embed natif. Ce guide détaille les deux méthodes (bouton lien classique et widget embed intégré) avec instructions pas à pas.
Les deux méthodes disponibles dans Webflow
| Méthode | Description | Cas d'usage |
|---|---|---|
| Composant Button | Bouton natif Webflow avec URL personnalisée qui redirige vers le widget de réservation | Header, page d'accueil, sections CTA récurrents |
| Composant Embed | Bloc qui accepte du HTML brut, permet d'intégrer un widget embed complet dans une page | Page dédiée Réservation avec widget complet |
La combinaison des deux méthodes (bouton dans le header partout, widget embed sur une page dédiée) maximise la conversion.
Méthode 1 · Composant Button avec URL de réservation
1Récupérer l'URL de réservation
Depuis le tableau de bord de votre logiciel de réservation, copier l'URL publique du widget :
2Ouvrir le Designer Webflow
Se connecter à Webflow, ouvrir le projet du restaurant, cliquer sur « Designer » pour lancer l'éditeur visuel.
3Ajouter un composant Button
Dans le panneau latéral gauche (Add Elements), rechercher « Button ». Glisser-déposer le composant dans le Navigator à l'emplacement souhaité (souvent dans le Navbar pour un bouton visible partout).
4Configurer le lien
Cliquer sur le bouton nouvellement créé pour le sélectionner. Dans le panneau Settings à droite, chercher la section « Link Settings ». Sélectionner « URL » comme type de lien, coller l'URL de réservation. Cocher « Open in new tab » pour préserver la navigation sur le site.
5Personnaliser le texte du bouton
Double-cliquer sur le bouton pour éditer son texte. Remplacer par « Réserver une table ». Plus explicite que « Réserver ».
6Styliser le bouton
Dans le panneau Style à droite, configurer :
- Background color : couleur qui contraste avec l'arrière-plan (vert vif, orange)
- Text color : couleur qui contraste avec le fond du bouton (blanc en général)
- Padding : environ 12 pixels haut et bas, 24 pixels gauche et droite
- Border radius : 6 à 12 pixels pour un rendu moderne
- Font weight : 600 ou 700 pour la visibilité
Optionnellement, ajouter un état hover (effet au survol) via l'onglet States : légère variation de couleur ou d'ombre pour donner un feedback visuel.
7Publier le site
Cliquer sur « Publish » en haut à droite, sélectionner le domaine de publication, valider. Le bouton apparaît immédiatement sur le site publié.
Méthode 2 · Composant Embed pour widget intégré
1Récupérer le code embed
Depuis le tableau de bord du logiciel de réservation, copier le code embed HTML :
2Créer une page « Réservation »
Dans le Designer Webflow, ouvrir le panneau Pages (icône dossier à gauche). Cliquer sur « + » pour créer une nouvelle page. Nommer « Réservation », URL /reservation. Choisir le template de base souhaité (souvent un template avec Navbar et Footer déjà en place).
3Ajouter un composant Embed
Dans le panneau latéral gauche (Add Elements), chercher « Embed » (composant HTML avec icône de balises). Glisser-déposer dans le canvas à l'emplacement souhaité, entre Navbar et Footer.
4Coller le code embed
Une fenêtre d'édition HTML s'ouvre automatiquement. Coller le code embed récupéré à l'étape 1. Cliquer sur « Save & Close ». Le widget s'affiche dans le canvas Webflow.
5Ajuster le conteneur
Le composant Embed occupe par défaut la largeur totale de son parent. Sélectionner le composant, dans le panneau Style à droite, ajuster :
- Width : 100 % ou une valeur maximale (par exemple max-width 800 pixels centrée)
- Margin : centrer si nécessaire (margin auto)
- Padding : ajouter un espace autour du widget
6Publier
Cliquer sur « Publish ». La page /reservation est immédiatement accessible avec le widget intégré.
7Ajouter la page au menu de navigation
Dans le Navbar, ajouter un Nav Link vers la page /reservation, avec le libellé « Réservation ». Alternative : conserver aussi le bouton du header (méthode 1) pour maximiser la visibilité.
Utiliser les deux méthodes en parallèle : bouton Réserver visible dans le Navbar (partout sur le site) + page dédiée /reservation avec widget embed complet. Un client indécis clique sur le bouton et arrive sur la page dédiée où il peut réserver immédiatement, sans redirection externe.
Le mode Responsive Webflow · à ne pas négliger
Webflow permet de définir des styles différents pour Desktop, Tablet, Mobile Landscape et Mobile Portrait. Chaque mode se sélectionne via les icônes en haut de l'éditeur (écran, tablette, smartphone).
Pour un widget embed, vérifier chaque vue :
- Desktop : le widget occupe une largeur confortable, souvent 600 à 800 pixels centrée.
- Tablet : le widget prend 90 à 95 % de la largeur de la page.
- Mobile : le widget prend 100 % de la largeur, avec padding minimal (10 à 15 pixels).
Toujours prévisualiser en mode Preview (icône œil en haut à droite) puis basculer entre les différentes vues pour valider le rendu.
Où placer le bouton Réserver dans Webflow
Trois emplacements incontournables :
- Navbar (barre de navigation) : bouton visible en haut de toutes les pages. Le levier numéro 1 de conversion.
- Hero section de la page d'accueil : gros bouton dans la première section visible, sous la promesse principale du restaurant.
- Footer (pied de page) : bouton dans la CTA finale, pour les visiteurs qui ont scrollé jusqu'en bas.
Dépannage · les 4 problèmes fréquents Webflow
C'est normal : Webflow n'affiche le rendu final des composants Embed que sur le site publié, pas dans l'éditeur. Utiliser le mode Preview ou visiter le site publié pour vérifier le rendu réel.
Modifier l'attribut height dans le code embed (par exemple passer de height="600" à height="900"). Alternative : dans le composant Embed Webflow, définir une hauteur minimale via min-height dans le panneau Style.
Webflow demande de configurer chaque mode responsive séparément. Passer en mode Mobile Portrait, ajuster la taille et la position du bouton pour cette vue spécifique. Webflow n'hérite pas automatiquement des styles Desktop sur Mobile.
Cliquer explicitement sur « Publish » en haut à droite. Webflow n'auto-publie pas les modifications. Vérifier que la publication cible bien le domaine principal et non uniquement le staging Webflow (webflow.io).
Bonus · connecter le bouton Réserver Google Business Profile
En parallèle du site Webflow, activer le bouton Réserver de Google Business Profile est un levier de conversion majeur. Ce bouton apparaît dans la fiche Google du restaurant, à côté d'Itinéraire et Appeler. Connexion via le même logiciel de réservation, en 5 à 10 minutes.
Voir également les 10 erreurs Google Business qui coûtent 30 % de trafic.
Ce qu'il faut retenir
Webflow propose deux méthodes simples pour intégrer un bouton Réserver : le composant Button natif avec URL personnalisée pour un lien classique, et le composant Embed pour intégrer un widget complet dans une page. La combinaison des deux (bouton dans le Navbar partout, widget embed sur une page dédiée) maximise la conversion. Le niveau de personnalisation visuelle (couleurs, animations, effets hover) est supérieur à Wix ou Squarespace, ce qui explique la popularité de Webflow chez les restaurants premium. Le mode Responsive Webflow demande de configurer explicitement chaque vue (Desktop, Tablet, Mobile), sans héritage automatique. Les problèmes fréquents (rendu Embed absent dans Designer, widget coupé, mobile mal aligné, publication manquée) se résolvent en quelques minutes avec les bonnes vérifications. Un logiciel de réservation moderne fournit URL et code embed prêts à intégrer dans Webflow, plus une intégration Google Business Profile pour couvrir tous les canaux.
Widget de réservation compatible Webflow en 10 minutes
Brewbook fournit URL et code embed prêts à coller dans un composant Embed Webflow. Widget responsive, apparence personnalisable, intégration transparente avec la charte graphique de votre site premium. Essai gratuit 30 jours, sans carte bancaire.
Essayer gratuitement →