Guide · Embedding

Embed your own booking engine in a Smoobu website

Updated 25 August 2026 · Approx. 5 min read

Before you start

• Have the code ready. In BineBoost it sits in the dashboard under “Embedding”, one click on “Copy” is enough. It is two lines.
• Have API access. A booking layer connects through Smoobu's API, and that is included in the Professional plan.
• Know that the Book now page will be emptied. What you delete there is Smoobu's standard booking engine. It can be put back at any time, and every other page stays untouched.

Step 1: embed the booking engine

Six steps. Each animation shows where the pointer goes and what happens next.

1. Open the editor

In Smoobu, go to Core features on the left, then Website Builder, and click Open editor at the top right. The editor opens in a new tab.

2. Open the “Book now” page

In the narrow bar on the left, click Pages. The page list opens; click Book now. That is the page your booking engine will live on.

3. Clear the page

The page already carries Smoobu’s own booking engine. Click it until the small toolbar appears and remove it with the bin icon. Repeat until the page is empty and only a blank section is left.

4. Drop in the HTML element

Click Add on the left, then Elements. Type html into the search box and drag the HTML result into the empty section.

5. Paste the code

The HTML content window opens. Paste the code you copied and click Update. The booking engine appears straight away, right inside the editor.

6. Publish

Click Republish at the top right. Smoobu confirms with Your project is live and shows the address. Open it and click a booking through to the summary once.

Step 2: the search widget for the home page

The search widget is the small search bar: arrival, departure, guests, one button. It does not book anything; it sends the guest to your booking page carrying the search they just typed. The setup works as above, with four differences.

1. Set the booking page, then copy the code

In BineBoost, open Embedding and scroll to the Search widget section. Enter the address of your booking page there, meaning exactly the page the booking engine sits on, and save. Only then copy the code.

2. Remove the search bar that is already there

In the editor, open the page the search should sit on, usually the home page. Smoobu’s own search bar already sits in the hero image, marked View only. Select the section and click the bin in its toolbar. Smoobu asks once to confirm.

3. Add an empty section

Below the header area click + Add section and pick Layout. An empty section appears. Into it goes the HTML element as in the first part, then the copied code and Update.

4. Publish and click it through once

After Republish the search sits on your page. Enter dates and party size and click Search: the guest lands on your booking page with the search already filled in.

Two places where it usually goes wrong

Give the HTML element a column of its own. The builder itself recommends this, and the reason is practical: tall content covers the element inside the editor. After that it can no longer be clicked, and the only way back is through the column it sits in. A booking engine is exactly that kind of tall content. Put it in its own column and you can edit or remove it at any time.

Every address in the code has to start with https. Smoobu points this out in the code window itself, and it is not a formality: a script served over an unencrypted address is blocked by the browser on a secure page, silently. The BineBoost embed code meets this out of the box.

What happens to Smoobu's own booking engine

On the Book now page you replace it; everywhere else it stays. If you prefer, you can add a separate page instead and leave Book now untouched. The only thing that matters is that the two do not sit underneath each other on one page: the guest would see two search forms working out different prices and could not tell which one counts.

Smoobu's role does not change. The channel manager stays Smoobu, the calendar stays Smoobu, and the sync to Booking.com, Airbnb and the other portals carries on untouched. A booking made through the layer is created directly in the Smoobu calendar through the official API and blocks the dates there immediately. The layer is the booking flow, not the system behind it.

When the effort pays off

If the standard booking flow covers your needs, you need none of this. Embedding only becomes interesting once your pricing does not fit the standard pattern. Typical cases are a tourist tax with age bands, separate nightly rates per child age group, an occupancy surcharge that differs by season, a separate VAT rate per line item, or a higher prepayment for last-minute arrivals. Those are the points where hosts otherwise reach for the calculator and the email, and every email is a booking that could have gone through on its own.

Frequently asked questions

Can I embed my own booking engine in a Smoobu website?

Yes. The Smoobu Website Builder has an HTML element that takes any code you paste into it. Smoobu's own help centre names third-party widgets and forms as its purpose. The setup takes a few minutes and needs no coding skills: copy the code, drag the element in, paste, publish.

Do I have to delete Smoobu's own booking engine first?

On the page where yours is going to sit, yes. The Book now page already carries Smoobu's booking tool. With both underneath each other, the guest sees two search forms showing different prices and cannot tell which one counts. Remove the existing content with the bin icon in the small toolbar until only a blank section is left. On every other page Smoobu's engine can stay.

Do I see the booking engine inside the editor?

Yes. Right after you click Update it appears in the editor, with your real properties and rates. If the spot does stay empty, publish first and look at the live page before you go hunting through the code.

Does the code belong in the page body or in the head section?

In the page body, through an HTML element placed where the booking engine should appear. The head section only accepts certain building blocks and is the wrong place for anything visible. Smoobu also points out in the code window that third-party scripts have to load over HTTPS.

Why does my search not land on my own booking page?

Because the address of the booking page is missing. It sits in BineBoost under Embedding in the Search widget section and has to be saved before you copy the code. Without it the search widget sends the guest to our address instead of your page. That works, but it is not on your website.

Do I need a particular Smoobu plan for this?

Not for the embedding itself, but you do for the connection: a booking layer such as BineBoost works through Smoobu's API, and API access is included in the Professional plan. If you cannot find an API tokens section in your Smoobu settings at all, the access is not enabled on your account.