Guide · Technical

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

Updated 9 September 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. If your website does not run on WordPress at all but on the Smoobu website builder, the snippet goes somewhere else: that route is described in embedding a booking engine on a Smoobu website.

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, which is especially awkward on a phone. 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

Consent plugins such as Borlabs, Complianz or Cookiebot can block iframes until the visitor consents, depending on the setting. Guests then see a grey box instead of the calendar. Check the plugin settings: the BineBoost booking flow sets no cookies for guests and loads no tracking services; personal data only comes into play once a guest fills in the booking details. Many landlords therefore add the booking engine's domain as an exception. Whether that is right for your site belongs in your own privacy documentation, and if in doubt in front of a lawyer.

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.

Once the calendar is in place, the only question left is how many guests actually use it. What a booking is worth when it lands with you directly instead of through a portal is what the commission calculator works out.

Frequently asked questions

Which booking engine suits a holiday rental on WordPress?

One that uses the calendar you already have instead of opening a second one. A pure WordPress booking plugin keeps its own availability, and that availability knows nothing about your portals unless you keep syncing it by hand. If your calendars already live in Smoobu, take a booking engine that sits on top of them through the Smoobu API: Smoobu stays your channel manager, and every booking lands in the same calendar as the portal bookings.

Why is my booking calendar cut off at the bottom?

Because the iframe has a fixed height while the booking flow grows taller with every step. You usually notice it late: the calendar still fits, the guest details step does not. Either set a generously large fixed height and accept the empty space, or use a booking engine that reports its height to the page via postMessage. On a phone the cut-off part is easy to miss altogether, so test the last step there too.

Why do guests see a grey box instead of the calendar?

Most of the time the consent plugin is blocking the iframe until the visitor agrees. Borlabs, Complianz and Cookiebot can all do that with third-party content, depending on the setting. Many landlords therefore add the booking engine's domain as an exception; whether that is right for your site belongs in your own privacy documentation. Look at the page twice afterwards, once with the banner accepted and once with it declined.

Does a booking made inside the iframe really arrive in Smoobu?

Yes, provided the booking engine works through the official Smoobu API. BineBoost writes the booking into your existing Smoobu account that way, and Smoobu's role as your channel manager does not change. Check it yourself before you go live all the same: play a test booking through to the last step and then look in Smoobu.

Can I embed a separate booking engine per property?

Yes. Every property has its own page, so each property page in WordPress gets its own snippet in its own HTML block. For the home page there is a compact search widget instead of the full booking flow, embedded exactly the same way.