Add a booking widget to Webflow

What you need

• Any Webflow project plan (Starter is fine).
• Designer access to the project.
• A Google account.

Step 1 — Sign up for circleit

Go to circleit.app, sign up with Google, pick a username, set availability, create one event type.

Step 2 — Drag an Embed component onto your page

1. In the Webflow Designer, open the page where you want the widget.
2. From the Elements panel (the + at top-left), drag Embed onto the page.
3. The Embed code dialog opens. Paste the snippet.
4. Click Save & Close.
5. Publish the site (top-right Publish button).

The widget renders on the published page. Webflow's Designer canvas shows a placeholder for embed components — it won't render the live widget inside Designer, but the published preview will.

Inline placement vs. floating button

By default the widget is a floating button. For inline rendering, use the inline mode snippet:

<script src="https://circleit.app/embed.js"
        data-circle="your-username"
        data-mode="inline"></script>

For Webflow, you'll usually want inline mode placed inside a well-sized container — the widget then sits flush with your page design.

Common Webflow gotchas

• Embed shows blank in the Designer. Normal — Webflow sandboxes embeds for editor performance. Click Publish to see the live widget.
• Webflow Logic / Forms collision. If you've set up Webflow Logic flows triggered by form submissions on the same page, those flows do NOT capture circleit booking submissions — circleit posts to its own API, not to Webflow Forms. (This is usually a feature, not a bug.)
• Custom Code project settings. You don't need to add the snippet to the Project Settings → Custom Code → Head/Body. Drop the Embed component on a specific page instead — keeps your sitewide HTML clean.

What your customer sees

The widget appears wherever you placed the Embed component. Visitors get the same flow as on any platform: pick event → pick date → pick time → enter contact info → confirmation. The widget iframe insulates the booking UI from your Webflow theme styles.

Troubleshooting

• Widget doesn't load on published page: Open DevTools (F12) — if you see "Failed to load script" or CSP errors, check your Webflow project's CSP / iframe-related custom code.
• "Username not found": Verify data-circle spelling.
• Want to put the widget in your site navbar / footer: You can drop the Embed component into your global Navbar or Footer symbol so it appears on every page. That gives you the floating button across the whole site.