What the embedded booking system does
Alongside its hosted booking page (on a smoobu.com subdomain), Smoobu also offers an embeddable widget: an iframe version of the same page that you can drop into any page on your own website. The calendar pulls live availability from Smoobu, guests pick dates, enter their details, and pay via Stripe or PayPal — all without leaving your site.
This is the fastest way to a working booking system on your own domain if you don't want to build your own availability logic. The trade-off: you're working within the design and layout constraints Smoobu sets for the widget — for a fully custom calendar design, you'd need a direct integration via the Smoobu API instead.
Step 1 — Check prerequisites
Before you go looking for the embed code, make sure the following are in place:
- At least one property is set up in Smoobu and connected to a calendar.
- The online booking tool (sometimes called "booking page" or "booking engine") is included in your Smoobu plan — check current details at smoobu.com/pricing, since plan names and scope can change.
- A payment method (Stripe or PayPal) is connected to your Smoobu account so guests can pay directly.
Step 2 — Set up the booking page in Smoobu
- In Smoobu: go to Settings → Online Booking Tool (also labelled "Booking Page" or "Booking Widget," depending on account language).
- Select which properties should appear on the booking page — for a single property, the default selection is fine.
- Customize the logo, accent colour, and language to match your brand. Available design options vary by plan.
- Set the default language and currency to match your target audience (e.g. German/Euro for a .de domain).
- Save and use the preview to confirm the calendar and pricing display correctly.
These settings apply to both the hosted booking page and the embed widget — you only configure them once.
Step 3 — Copy the embed code
Once the booking page is set up, Smoobu generates an iframe code you can paste into any website.
- In the same settings area (Online Booking Tool), look for the "Embed Widget" or "Embed Code" section.
- Copy the provided HTML snippet — typically an <iframe> tag pointing to a unique URL for your booking page.
- Some accounts also offer a simpler link-only version (a "Book now" button linking to the hosted page) as an alternative to the iframe.
- Keep the code somewhere safe in case you need it again for another page or a second property.
The iframe code includes a unique ID tied to your Smoobu account — don't share it publicly in forums or support tickets, since it could theoretically be used to access your booking page.
Step 4 — Add the iframe to your own website
How you paste the code depends on your website builder. The most common cases:
- Self-hosted HTML/CSS (e.g. Astro, Next.js, static HTML): paste the <iframe> code directly into the page template, e.g. on a dedicated "/book" page. Set a fixed minimum height via CSS (min-height: 800px) so the calendar isn't cut off.
- WordPress: add a "Custom HTML" block (Gutenberg) or an HTML widget/shortcode (Classic Editor) to the target page and paste the iframe code there. Some page builders like Elementor have a dedicated "HTML" element for exactly this purpose. WordPress also has an official Smoobu plugin with a native block/shortcode instead of an iframe.
- Wix: in the editor, use "Add Element" → "Embed" → "Embed HTML iframe" to place an embed element, then paste the Smoobu code. Wix caps the embed height by default — increase it manually in the element's settings panel.
- Squarespace: add a "Code" block to the target page (not "Embed" — the code block allows full HTML) and paste the iframe code. Squarespace templates with a strict Content Security Policy can occasionally block the embed.
After adding it, test on an actual smartphone, not just the builder's desktop preview — the Smoobu calendar is responsive, but an iframe set too short will still clip content on small screens.
→ Guide: set up the Smoobu plugin for WordPress
Alternative: integrating via the Smoobu API
The iframe widget is the fastest option, but it has limits: you can't customize the calendar's HTML markup or add your own intermediate steps (trust signals, cross-selling, custom form fields). If that matters to you, a direct integration via the Smoobu API is the next step — you build your own booking flow that pulls live availability and pricing from Smoobu and handles payment yourself via Stripe.
This is significantly more work than embedding the widget (typically a standalone development project), but it's worth it once direct bookings become a meaningful share of your revenue and website conversion matters.
Troubleshooting common issues
The calendar shows a property as "unavailable" even though it's free
First check that the booking page in Smoobu is set to the correct property or properties. The second most common cause: a block from another channel (e.g. a manual block, or an iCal import that hasn't synced yet) also affects the embedded widget, since both pull availability from the same Smoobu data. Check the calendar directly in the Smoobu dashboard for blocks in the affected date range.
The iframe has an ugly inner scrollbar or content gets cut off
This happens when the height set in the HTML (the height attribute or CSS min-height) is smaller than the calendar's actual content. Increase the height to 900–1100px as a starting point, then adjust after testing on mobile. Iframes don't automatically inherit their content's height — that's a general limitation of iframes, not something specific to Smoobu.
The widget's colours or language don't match the website
The widget's design and language are set centrally in Smoobu under Settings → Online Booking Tool, not through the embed code itself. Change them there — the update automatically applies everywhere the iframe is embedded, without needing to re-paste the code.
The widget doesn't load — just a blank white area
The most common cause on website builders (particularly certain Squarespace or custom WordPress themes) is a strict Content Security Policy (CSP) on the theme that blocks embedding third-party iframes. Check the browser console (right-click → Inspect → Console) for a CSP or "frame-ancestors" error. If the theme doesn't let you adjust the CSP, fall back to the link-only version (a button linking to the hosted Smoobu booking page) instead of the iframe.
The booking arrives in Smoobu but payment fails
This usually points to the payment connection, not the iframe itself. Check under Settings → Payments whether Stripe or PayPal is connected correctly and not stuck in test mode. For Stripe specifically: also verify the connected account is fully verified — incomplete verification blocks real charges even if test payments go through.