SevenRooms Reservation Widget on Webflow: The Guide

Adding the SevenRooms reservation widget to a Webflow site comes down to one decision up front: link or embedded code. SevenRooms recommends linking out to the widget with a simple link behind a "Book now" button. It is also the lightest option for your site's performance. The embedded code (pop-up) is possible, but it takes more care, and SevenRooms does not troubleshoot embedded widgets.

This guide covers both methods in Webflow, how to keep them from slowing your pages down, and above all how to keep reliable tracking of your bookings (Google Tag Manager, pixels, Tracking Links).

Good to know. Menu labels in Webflow and SevenRooms change over time. The paths below come from the official documentation at the time of writing. Several tracking features depend on your SevenRooms package.

Link, pop-up or iFrame: which method should you choose?

There are three ways to show SevenRooms reservations on a website.

• The direct link: a button on your site opens the widget on the SevenRooms page. This is the method SevenRooms recommends, because the widget renders correctly on every device and payments sync properly.
• The pop-up: a small script loads the widget over your page. The experience is smoother for guests, but SevenRooms states that it does not troubleshoot problems with embedded widgets. Your developer therefore has to check the display on all devices.
• The iFrame: possible, but SevenRooms does not usually recommend it because it is less responsive on mobile. Another limit: Google Tag Manager tracking is not available for the iFrame version of the widget.

Our recommendation: start with the direct link. Move to the pop-up only if staying on the page is a priority for your art direction, and test it thoroughly before launch. Avoid the iFrame.

Get your SevenRooms widget link

With the New Widget, the link takes two clicks.

1. In the SevenRooms web portal, open Settings > Widget Settings > Reservation Widget.
2. Click Copy Widget Link at the top of the page.

The link always follows the same format, with your venue's URL Key. You can also click View Live Widget to open the live widget and copy the address shown.

If you are still on the Legacy Widget, the link is in the Direct Link to widget section of the same page.

Good news: when you switch from the Legacy Widget to the New Widget, existing links on your site redirect to the new widget automatically. There is nothing to change in Webflow.

Add the "Book now" button in Webflow

In the Designer, create a button (Button or Link Block) and paste the SevenRooms link as its destination in the element settings. The principle is the same for a navigation button, a hero button or a sticky mobile bar.

A few good practices:

• One clear label, repeated everywhere: "Book a table". The button must be visible without scrolling, on mobile and desktop.
• A reusable button style (a dedicated class), so you can change colour or text everywhere at once.
• Opening in a new tab or not: decide with your team. A new tab keeps your site open but can complicate tracking. Test both with a real booking.
• A shared class on every booking button: you will use it later for click tracking (see below).

This method adds no JavaScript to your page. It is the safest for load time.

Embed the widget as a pop-up with a Webflow Embed

If you choose the pop-up, here is the logic according to SevenRooms documentation.

1. In SevenRooms, copy the embed code from the widget settings page, in the Links section (documented for the Legacy Widget: check with your SevenRooms contact that the same code applies to your widget).
2. The code includes a trigger element (the button), the SevenRooms script load, and a SevenroomsWidget.init call with your parameters.
3. In Webflow, paste all of it into an Embed element placed where you want it.

Note that Webflow's Embed element requires a paid site plan (or a Workspace). Webflow advises checking the rendering in Preview mode or on the staging domain, then publishing: custom scripts only appear on the published site.

The parameters to know:

• venueId: the venue identifier, visible in the address of your SevenRooms back office.
• triggerId or triggerSelector: the element that opens the widget. triggerSelector lets any element with the same class open the widget, which works well with the shared class tip above.
• styleButton: set it to true to use the SevenRooms button, false to use your own Webflow button (recommended to respect your brand).
• type: reservations, events or waitlist, depending on the widget.
• Optional: defaultDate, defaultPartySize, defaultTime, allVenues (multi-venue widget) and trackingSlug.

To show several buttons on a page, do not load the script again. Only duplicate the initialisation block with a different identifier (for example sr-res-root2). You can also add ?triggerSevenrooms=true to a page address to open the pop-up automatically on load.

Warning. If you use a custom Webflow button, check that it works after publishing, on a real phone. A pop-up that does not open is a lost booking.

Keep your Webflow site fast with the SevenRooms widget

An external script weighs on loading. Here is how to limit the impact.

• Prefer the direct link wherever the pop-up is not essential.
• Load the script only where it is needed. In Webflow, code in Site settings > Custom code (Head code or Footer code) applies to every page. Page settings let you limit code to a single page, for example your "Book" page.
• Place the script in the footer (Footer code, before the closing body tag) rather than the head, so it does not block content from displaying.
• Webflow's advice: consider the async or defer attributes on script tags. Careful: the SevenRooms initialisation call depends on embed.js having loaded first. If you change the loading mode, test that the pop-up still opens, several times, on mobile. If you cannot test it, keep the loading as provided.
• Do not add html, head or body tags in code areas: Webflow forbids them and they would break the layout.
• Do not duplicate the script: a single embed.js tag per page is enough for several buttons.

Finally, measure before and after. Open the page on a smartphone on a mobile network, with and without the pop-up. If the difference is visible, go back to the direct link.

Track bookings: Tracking Links, GTM and pixels

This is where integrations fail most often. The guest clicks on your site, books on SevenRooms, and your analytics tool only sees the click. There are three complementary levels of tracking.

Tracking Links for booking origin. In SevenRooms, Marketing > Tracking Links lets you create links that show where a booking came from (social network, third-party site, promoter). They attach to the widget link and feed your reports. For a button on your site, create a dedicated link (for example "website") and use it as the button's destination. For the pop-up, the trackingSlug parameter plays that role.

This feature depends on your package. For a campaign, you can also add tracking=campaign-name to the widget address, along with other parameters such as date, time or party size, separated by &.

Google Tag Manager and Google Analytics. The New Widget feeds a data layer readable in Google Tag Manager. Available events include loadSearchPage, selectTimeslot, loadCheckoutPage, successfulCheckout and failedCheckout. To enable them:

1. Send your GTM ID to SevenRooms Support. The stated turnaround is 1 to 2 business days.
2. In your GTM account, create the triggers and tags for the events you want to measure.
3. Make a test booking and check that the events arrive.

Two important points. First, the New Widget changes address at each step of the journey (search, upgrades, checkout, then the confirmation page): review your events in Google Analytics. Second, SevenRooms does not provide support for configuring Google Analytics or GTM.

Advertising pixels. The New Widget supports several pixels: Google Analytics, Meta/Facebook, TikTok, Adobe, Twitter/X, Segment.io, Adroll and Tealium. For Meta, standard events are sent (for example Search, InitiateCheckout, and Schedule and Purchase on a successful booking). Installation goes through SevenRooms Support: send the full script, the venue(s) concerned, and state that you use the New Widget. The stated turnaround is 3 to 5 business days, and this feature also depends on your package.

And tracking on the Webflow side? Your Webflow site does not see the booking, only the click on the button. So measure that click too (for example with the shared class mentioned above), and let SevenRooms measure the booking. If you run campaigns, think about consent: load measurement tags in line with your cookie banner and your GDPR policy.

Pre-launch test checklist

• The booking button is visible without scrolling on mobile and desktop.
• The link or pop-up opens the right venue.
• You made a complete test booking on a real smartphone.
• The SevenRooms script loads only once per page, and only where needed.
• Your code contains no html, head or body tags.
• The site has been published: custom scripts only show on the published site.
• Tracking Links appear in SevenRooms reports after the test booking.
• If you requested GTM or pixels, events arrive after a test booking.
• Support turnaround (1 to 2 days for GTM, 3 to 5 days for pixels) was planned for before your launch.

To go further on the page itself, see our common restaurant website mistakes and the article on Upgrades, which appear in the New Widget journey.

SevenRooms widget on Webflow: frequently asked questions

Need help adding SevenRooms to your Webflow site?

A button that opens, a fast page and bookings correctly attributed: it all comes down to integration details. māhie, a Webflow partner agency, designs websites for restaurants and hotels and connects them to SevenRooms.

• Design or redesign of your Webflow site with SevenRooms reservations built in.
• Choice of method (link or pop-up) and rollout across all pages.
• Setup of Tracking Links, Google Tag Manager and pixels with SevenRooms Support.
• Mobile testing and tracking checks before launch.
• Audit of your existing SevenRooms setup.

Explore our Web and SevenRooms services, then Contact māhie.