Widget de réservation SevenRooms sur Webflow : le guide

Intégrer le widget de réservation SevenRooms sur un site Webflow demande une seule décision au départ : lien ou code embarqué. SevenRooms recommande de renvoyer vers le widget par un simple lien derrière un bouton « Réserver ». C'est aussi le choix le plus léger pour la performance de votre site. Le code embarqué (pop-up) reste possible, mais il demande plus de rigueur, et SevenRooms ne dépanne pas les widgets embarqués.

Ce guide vous montre les deux méthodes dans Webflow, comment éviter qu'elles ralentissent vos pages, et surtout comment garder un suivi fiable des réservations (Google Tag Manager, pixels, Tracking Links).

À noter. Les libellés de menus de Webflow et de SevenRooms évoluent. Les chemins ci-dessous sont ceux des documentations officielles à la date de rédaction. Plusieurs fonctions de tracking dépendent de votre package SevenRooms.

Lien, pop-up ou iFrame : quelle méthode choisir ?

Il existe trois façons d'afficher la réservation SevenRooms sur un site.

• Le lien direct : un bouton de votre site ouvre le widget sur la page SevenRooms. C'est la méthode que SevenRooms recommande, car le widget s'affiche correctement sur tous les appareils et les paiements se synchronisent correctement.
• Le pop-up : un petit script charge le widget par-dessus votre page. L'expérience est plus fluide pour le client, mais SevenRooms précise qu'il ne dépanne pas les problèmes liés aux widgets embarqués. Votre développeur doit donc valider l'affichage sur tous les appareils.
• L'iFrame : possible, mais SevenRooms ne le recommande généralement pas, car il est moins adapté au mobile. Autre limite : le suivi Google Tag Manager n'est pas disponible pour la version iFrame du widget.

Notre recommandation : commencez par le lien direct. Passez au pop-up uniquement si l'expérience sans quitter la page est une priorité de votre direction artistique, et testez-le sérieusement avant la mise en ligne. Évitez l'iFrame.

Récupérer le lien de votre widget SevenRooms

Avec le nouveau widget (New Widget), le lien se copie en deux clics.

1. Dans le web portal SevenRooms, ouvrez Settings > Widget Settings > Reservation Widget.
2. Cliquez sur Copy Widget Link en haut de la page.

Le lien suit toujours le même format, avec la clé URL (URL Key) de votre établissement. Vous pouvez aussi cliquer sur View Live Widget pour ouvrir le widget en ligne et copier l'adresse affichée.

Si vous êtes encore sur l'ancien widget (Legacy Widget), le lien se trouve dans la section Direct Link to widget de la même page.

Bonne nouvelle : quand vous passez du Legacy Widget au New Widget, les liens existants sur votre site redirigent automatiquement vers le nouveau widget. Vous n'avez rien à modifier dans Webflow.

Ajouter le bouton « Réserver » dans Webflow

Dans le Designer, créez un bouton (Button ou Link Block) et collez le lien SevenRooms comme destination dans les réglages de l'élément. Le principe est identique pour un bouton de menu de navigation, un bouton dans le hero ou un bandeau fixe sur mobile.

Quelques bonnes pratiques :

• Un seul libellé clair, répété partout : « Réserver une table ». Le bouton doit être visible sans défiler, sur mobile comme sur ordinateur.
• Un style de bouton réutilisable (une classe dédiée), pour changer la couleur ou le texte partout en une fois.
• Ouvrir ou non dans un nouvel onglet : à décider avec votre équipe. Un nouvel onglet garde votre site ouvert, mais complique parfois le suivi. Testez les deux avec une réservation réelle.
• Une classe commune sur tous les boutons de réservation : elle vous servira plus tard pour le suivi des clics (voir plus bas).

Cette méthode n'ajoute aucun JavaScript à votre page. C'est la plus sûre pour le temps de chargement.

Intégrer le widget en pop-up avec un Embed Webflow

Si vous choisissez le pop-up, voici la logique, d'après la documentation SevenRooms.

1. Dans SevenRooms, copiez le code d'intégration depuis la page des réglages du widget, section Links (documenté pour le Legacy Widget : vérifiez avec votre contact SevenRooms que le même code convient à votre widget).
2. Ce code comprend un élément déclencheur (le bouton), le chargement du script SevenRooms, puis un appel SevenroomsWidget.init avec vos paramètres.
3. Dans Webflow, collez le tout dans un élément Embed placé à l'endroit voulu.

Notez que l'élément Embed de Webflow nécessite un plan de site payant (ou un Workspace). Webflow indique de vérifier le rendu en mode Preview ou sur le domaine de staging, puis de publier : les scripts personnalisés n'apparaissent que sur le site publié.

Les paramètres à connaître :

• venueId : l'identifiant de l'établissement, visible dans l'adresse de votre back-office SevenRooms.
• triggerId ou triggerSelector : l'élément qui ouvre le widget. triggerSelector permet de déclencher le widget depuis tous les éléments portant une même classe, pratique avec le conseil de la classe commune ci-dessus.
• styleButton : mettez true pour utiliser le bouton SevenRooms, false pour utiliser votre propre bouton Webflow (recommandé pour respecter votre charte).
• type : reservations, events ou waitlist selon le widget.
• Optionnels : defaultDate, defaultPartySize, defaultTime, allVenues (widget multi-établissements) et trackingSlug.

Pour afficher plusieurs boutons sur la page, ne rechargez pas le script. Dupliquez seulement le bloc d'initialisation avec un identifiant différent (par exemple sr-res-root2). Vous pouvez aussi ajouter ?triggerSevenrooms=true à l'adresse d'une page pour ouvrir automatiquement le pop-up au chargement.

Attention. Si vous utilisez un bouton Webflow personnalisé, vérifiez qu'il fonctionne après publication, sur mobile réel. Un pop-up qui ne s'ouvre pas, c'est une réservation perdue.

Garder un site Webflow rapide avec le widget SevenRooms

Un script externe pèse sur le chargement. Voici comment limiter l'impact.

• Préférez le lien direct partout où le pop-up n'est pas indispensable.
• Chargez le script uniquement où il sert. Dans Webflow, le code de Site settings > Custom code (Head code ou Footer code) s'applique à toutes les pages. Le réglage de page (Page settings) permet de limiter le code à une seule page, par exemple la page « Réserver ».
• Placez le script en pied de page (Footer code, avant la balise de fermeture du body) plutôt que dans le head, pour ne pas bloquer l'affichage du contenu.
• Le conseil de Webflow : envisagez les attributs async ou defer sur les balises script. Attention : l'appel d'initialisation SevenRooms dépend du chargement préalable de embed.js. Si vous modifiez le mode de chargement, testez que le pop-up s'ouvre toujours, plusieurs fois, sur mobile. Si vous ne pouvez pas le tester, laissez le chargement tel que fourni.
• N'ajoutez pas de balises html, head ou body dans les zones de code : Webflow les interdit et elles casseraient la mise en page.
• Ne dupliquez pas le script : une seule balise embed.js par page suffit pour plusieurs boutons.

Enfin, mesurez avant et après. Ouvrez la page sur un smartphone en réseau mobile, avec et sans le pop-up. Si la différence est visible, revenez au lien direct.

Suivre les réservations : Tracking Links, GTM et pixels

C'est le point où les intégrations échouent le plus souvent. Le client clique sur votre site, réserve sur SevenRooms, et votre outil d'analyse ne voit que le clic. Il y a trois niveaux de suivi complémentaires.

Les Tracking Links pour l'origine des réservations.

Dans SevenRooms, Marketing > Tracking Links permet de créer des liens qui indiquent d'où vient une réservation (réseau social, site tiers, promoteur). Ils s'ajoutent au lien du widget et alimentent vos rapports. Pour un bouton de votre site, créez un lien dédié (par exemple « site-web ») et utilisez-le comme destination du bouton. Pour le pop-up, le paramètre trackingSlug joue ce rôle.

Cette fonction dépend de votre package. Pour une campagne, vous pouvez aussi ajouter tracking=nom-de-campagne à l'adresse du widget, avec d'autres paramètres comme la date, l'heure ou le nombre de couverts, séparés par &.

Google Tag Manager et Google Analytics.

Le New Widget alimente une couche de données (data layer) lisible dans Google Tag Manager. Parmi les événements disponibles : loadSearchPage, selectTimeslot, loadCheckoutPage, successfulCheckout, failedCheckout. Pour les activer :

1. Envoyez votre identifiant GTM (GTM-ID) au support SevenRooms. Le délai annoncé est de 1 à 2 jours ouvrés.
2. Créez dans votre compte GTM les déclencheurs et balises pour les événements que vous voulez mesurer.
3. Faites une réservation test et vérifiez que les événements arrivent.

Deux points importants. D'abord, le New Widget change d'adresse à chaque étape du parcours (search, upgrades, checkout, puis la page de confirmation) : revoyez vos événements dans Google Analytics. Ensuite, SevenRooms ne fournit pas d'assistance sur la configuration de Google Analytics ni de GTM.

Pixels publicitaires.

Le New Widget prend en charge plusieurs pixels : Google Analytics, Meta/Facebook, TikTok, Adobe, Twitter/X, Segment.io, Adroll et Tealium. Pour Meta, des événements standard sont envoyés (par exemple Search, InitiateCheckout, Schedule et Purchase lors d'une réservation réussie). L'installation passe par le support SevenRooms : envoyez le script complet, le ou les établissements concernés, et précisez que vous utilisez le New Widget. Le délai annoncé est de 3 à 5 jours ouvrés, et cette fonction dépend aussi de votre package.

Et le suivi côté Webflow ?

Votre site Webflow ne voit pas la réservation, seulement le clic sur le bouton. Mesurez donc aussi ce clic (par exemple avec la classe commune évoquée plus haut), et laissez SevenRooms mesurer la réservation. Si vous diffusez des campagnes, pensez au consentement : chargez les balises de mesure conformément à votre bandeau cookies et à votre politique RGPD.

Checklist de test avant la mise en ligne

• Le bouton de réservation est visible sans défiler sur mobile et sur ordinateur.
• Le lien ou le pop-up s'ouvre sur le bon établissement.
• Vous avez fait une réservation test complète sur un vrai smartphone.
• Le script SevenRooms n'est chargé qu'une fois par page, et seulement où il sert.
• Votre code ne contient aucune balise html, head ou body.
• Le site a été publié : les scripts personnalisés ne s'affichent que sur le site publié.
• Les Tracking Links apparaissent dans les rapports SevenRooms après la réservation test.
• Si vous avez demandé GTM ou des pixels, les événements arrivent bien après une réservation test.
• Le délai de traitement du support (1 à 2 jours pour GTM, 3 à 5 jours pour les pixels) a été anticipé avant votre lancement.

Pour aller plus loin sur la page elle-même, voyez nos erreurs fréquentes sur un site de restaurant et l'article sur les Upgrades, qui apparaissent dans le parcours du New Widget.

Questions fréquentes sur le widget SevenRooms sur Webflow

Besoin d'aide pour intégrer SevenRooms à votre site Webflow ?

Un bouton qui s'ouvre, une page rapide et des réservations bien attribuées : tout se joue dans les détails d'intégration. māhie, agence partenaire Webflow, conçoit des sites pour restaurants et hôtels et les relie à SevenRooms.

• Création ou refonte de votre site Webflow avec la réservation SevenRooms intégrée.
• Choix de la méthode (lien ou pop-up) et mise en place sur toutes les pages.
• Configuration des Tracking Links, de Google Tag Manager et des pixels avec le support SevenRooms.
• Tests sur mobile et vérification du suivi avant la mise en ligne.
• Audit de votre configuration SevenRooms existante.

Découvrez nos prestations Sites web et SevenRooms, puis Contactez māhie.