Guide · Technical

Embed a Smoobu booking engine in WordPress: the step-by-step guide

Updated 22 July 2026 · Approx. 6 min read

Your holiday rental website runs on WordPress, your calendars and rates live in Smoobu — now guests should be able to book directly on your site. The good news: you need neither a plugin nor a developer. A booking engine is embedded as an iframe — a small HTML snippet that WordPress understands out of the box. Here is the complete guide, including the pitfalls almost everyone hits once.

The principle: one iframe, whatever your theme

An iframe is a “window” inside your page in which the booking engine runs. Whether the snippet comes from the standard Smoobu widget or from a solution like BineBoost, at its core it looks like this:

<iframe src="https://…/your-booking-engine"
        style="width:100%; border:0;" height="900"
        title="Booking"></iframe>

All that matters is where you paste this snippet in WordPress — and that depends on your editor.

Gutenberg (block editor)

1. Edit the page → click the + → search for the “Custom HTML” block.
2. Paste the iframe snippet.
3. Switch to “Preview” at the top — the calendar appears right in the editor. Save and you are done.

Elementor

1. Edit the page with Elementor → drag the “HTML” widget from the left into the desired area.
2. Paste the snippet into the code field — the preview updates immediately.

Classic Editor / other page builders

In the Classic Editor switch to the “Text” tab (not “Visual”) and paste the snippet. Divi, WPBakery and friends all have a “Code” or “Raw HTML” element — that is the right place.

The 4 most common pitfalls

1. Height: a cut-off calendar or double scrollbars

An iframe has a fixed height. If it is too small, the booking flow gets cut off or gets its own scrollbar inside the page scrollbar — the ultimate conversion killer, especially on mobile. Two solutions: set a generously large fixed height (ugly, because some steps leave empty space) — or use a booking engine that reports its height to the page automatically (via postMessage). BineBoost does the latter out of the box; the snippet from the dashboard already includes the auto-height script.

2. The cookie banner blocks the iframe

Some consent plugins (Borlabs, Complianz, Cookiebot) block iframes until the visitor consents — guests then see a grey box instead of the calendar. Check the plugin settings: a booking engine only processes personal data during an actual booking and sets no marketing cookies, so as a rule it does not belong on the block list. When in doubt, add the booking engine's domain as an exception.

3. Caching plugins serve old versions

If you change the snippet and nothing happens: WP Rocket, LiteSpeed and others often serve a cached page. Clear the page cache after any change.

4. HTTPS

Your WordPress site must run over https:// (standard these days). An http iframe inside an https page is blocked by the browser — make sure the snippet contains an https address.

The alternative without embedding: a direct booking link

You can also simply link to the booking engine — as a “Book now” button that leads to the booking page. That is the right choice if your theme leaves little room, or if you want the booking to be reachable from an Instagram profile. The downside: visually the guest leaves your website, unless the booking page is styled like your site.