Webflow · Embed element · 5 minutes
Add online booking to your Webflow site
Webflow gives you an Embed element for exactly this. Drop it into the section where booking belongs, paste the snippet, publish — and the booking flow runs inside your layout instead of sending people to another site. The one thing that surprises people is the Designer canvas, so that is covered below.
Step by step
Add an Embed element
In the Designer, add an Embed element inside the section where booking should appear. Treat it like any other element — it respects your layout, spacing and breakpoints.
Paste the snippet
Paste your snippet from Booking Page → Add to Website into the code editor and save. Webflow allows up to 50,000 characters of custom code, so a booking embed of about two kilobytes is nowhere near the limit.
Publish, then look at the live site
Publish the site and open the published URL. Webflow shows a placeholder for script tags on the canvas and only runs them once you preview, publish or export — an empty-looking element in the Designer is expected.
The code you paste
Example — replace with your own snippet
<iframe id="booking-frame" loading="lazy" src="https://app.gobookingsuite.com/?key=YOUR_KEY&embed=1"
title="Book an appointment"
style="width:100%;border:0;height:600px"></iframe>This example is an illustration — the key is a placeholder. Your real snippet, with your key, is in the admin under Booking Page → Add to Website. It also carries your salon's phone and email as a fallback and a small script that reports the widget height.
Before you start
The Designer canvas is not the test
Webflow renders a placeholder where a <script> tag sits and executes the code only on preview, publish or export. An <iframe> may show a preview on the canvas, but some embeds are only visible on the live site. Judge the result on the published URL.
Nothing here is plan-specific: this is how the Embed element works for every third-party embed, not a GoBookingSuite quirk.
The result
What your clients end up with
This is the actual widget, embedded here exactly the way it will embed inside your Webflow section — your spacing, your breakpoints, this flow. Pick a service and a time to try it.
- On the published URL the service list renders inside your section, with your spacing intact.
- The element grows to fit the list — no inner scrollbar.
- Your breakpoints still behave: check the section at a phone width too.
- If the element is empty on the live site, confirm the snippet went into an Embed element and that you republished after pasting.
Live demo — a real widget, book a test appointment
Questions
6 things people ask
Do I need a developer for this?
No. Adding an Embed element and pasting into it is a standard part of building in Webflow.
Why does the Designer show an empty box?
Webflow displays a placeholder for script tags on the canvas and runs the code only on preview, publish or export. That is documented behavior, not a broken embed.
Is there a size limit on the code?
Webflow allows up to 50,000 characters of custom code across site settings, page settings, Embed elements and CMS rich text fields. The booking snippet is roughly two kilobytes.
Will the widget match my design?
Yes — nine named colors, separate heading, body and mono fonts, four layouts and two component styles, all set in Theme Studio. Custom CSS is included in the plan if you want the last five percent.
Will it slow my site down?
The widget is lazy-loaded: below the fold, the browser does not fetch it until a visitor scrolls to it. In our measurement that keeps roughly 21 requests and 332 KB off the initial page load.
What do clients see if the booking service is unreachable?
After 8 seconds without a response, the frame is replaced by your salon's phone number and email so the visitor still has a way to reach you. The fallback clears itself once the service responds again.
Different site?
Wondering whether this is the right booking tool at all?See what the widget does on a Webflow site →
Get your embed code
in the next five minutes.
Sign up, add your services, copy the snippet from Booking Page → Add to Website.