Embeddable Checkout Widget

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.

Trip details on the payment step

The last screen before a guest pays is where doubts creep in — where do we meet, what’s included, what do I bring? The payment step now answers them. A Trip Details card shows the product content you’ve already written — where you’ll meet (meeting point, address, pickup instructions), what’s included, what to bring, and what’s good to know — next to the booking summary and card form. It closes with a note that the confirmation email will carry all of it, plus your support phone number for anything that comes up.

Fill these in on the product’s Content tab. Anything you leave blank is simply omitted, and if none of them are filled the card doesn’t appear at all. On phones the card form comes first and the trip details sit below it, so the guest is never scrolling past a screen of text to find the pay button. It works on every checkout style.

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.