🪟 Booking & Checkout

Embeddable Checkout Widget

Your booking flow lives on your website, not ours.

Shipped February 16, 2026

✦ Key takeaways

  • The checkout widget embeds into any website with a single script tag and a data attribute pointing to your product. No iframe hacks, no third-party domain.
  • Stripe payment is handled securely within the widget — card data never touches Freebo’s or your web server.
  • Fully responsive out of the box. The flow is optimized for mobile checkout at 375px and above.

The problem with booking software that redirects your customers to a third-party site is that you spent money getting them to your website — and then you hand them off to someone else’s page with someone else’s branding and someone else’s upsells at the end.

Freebo’s embeddable checkout widget keeps your customers on your site, on your domain, in your brand environment. The full booking experience — date selection, availability, pricing, Stripe payment, and confirmation — runs inside a widget that you drop into your existing site.

Implementation

<!-- Add this once in your site's head -->
<script src="https://cdn.freebo.io/widget/v2/checkout.js" defer></script>

<!-- Place this wherever you want the booking widget -->
<div
  data-freebo-widget="checkout"
  data-product="prod_abc123"
  data-location="loc_xyz456"
></div>

That’s it. The widget picks up your location’s branding (colors, logo) and renders the checkout flow. No build step, no NPM install, no framework dependency.

  1. Copy your product and location IDs

    Find them in the product detail page in your Freebo dashboard.

  2. Add the script tag to your site

    Paste the script tag into your site’s head section. This loads the widget runtime once.

  3. Add the widget div where you want it

    Place the widget div in your page — in a sidebar, a full-width section, or a modal trigger. It adapts to its container.

  4. Publish

    That’s it. The widget is live. Test a booking end-to-end before announcing it to customers.

Reliable sizing, no third-party scripts

An embedded checkout is only as good as its fit. The widget sizes itself to your page using a first-party resize protocol: the checkout measures its own content and posts its height to the host page, which sets the iframe to match. There’s no external resizer script to load, so there’s no third-party dependency that can go missing and leave the checkout stuck at a fixed height with an internal scrollbar.

It also sizes correctly when the embed starts offscreen. Browsers pause layout callbacks for cross-origin iframes that aren’t in view, which is common on mobile pages, background tabs, and collapsed accordions. The widget reports its height on mount and keeps it in sync as content changes, so the checkout is already the right size the moment a visitor scrolls it into view — no clipped forms, no empty gap.

Can I show multiple products in one widget?
The current widget embeds one product at a time. If you have multiple products, add multiple widget divs, each with its own product ID. You can also link to separate pages for each product.
Is Stripe payment secure when it runs inside my site?
Yes. The payment form uses Stripe Elements, which loads in a Stripe-hosted iframe. Card data is sent directly to Stripe — it never touches Freebo's servers or yours. This is the same pattern used by every major SaaS company for embedded Stripe checkout.
Will the widget size itself correctly on my page?
Yes. The checkout measures its own content and tells your page how tall to make the iframe, using a first-party protocol with no external resizer script to load. It works even when the embed starts below the fold or in a hidden tab or accordion — the height stays in sync so the checkout is the right size by the time a visitor reaches it.

Shipped in Public checkout v2 · June 2026