Show your availability calendar on your website (Calendar iFrame)

With the Calendar iFrame you embed a small availability calendar on your own website: visitors see which dates are free and which are taken, straight from your Smoobu Calendar. You copy a short block of code from Smoobu and paste it into your site. Guests cannot book through this calendar; it is a display, not a booking form.

Before you start

You need both of these before you embed the calendar:

• A website where you can paste a block of HTML code. Most website systems offer a "custom HTML" or "embed code" element for this.
• Your property set up in Smoobu. Each property gets its own calendar code.

The calendar shows availability only

The widget displays free and blocked dates. It shows no prices, and guests cannot select dates or complete a booking in it. It suits hosts who take bookings through their own inquiry form or by email and want visitors to see availability at a glance. To let guests book and pay on your site, use the Booking Engine instead: see . You can use both, with the calendar as the quick availability view next to your booking or contact option.

Steps

1. In Smoobu, go to Advanced > Calendar iFrame.
2. Pick the calendar's language. Ten languages are available (German, English, Italian, French, Spanish, Dutch, Greek, Portuguese, Russian, Polish). The page then shows the code for every property in that language.
3. Find your property's row. Each property offers two code versions side by side: Default, a widget that loads through JavaScript and can be restyled, and iFrame, a ready-made frame that adapts to the screen (a compact 280 by 540 pixel layout on phones, a wider 1000 by 600 pixel layout on larger screens) but can't be restyled.
4. Copy the code of the version you want.
5. Paste it into your website's HTML at the spot where the calendar should appear, then save and publish the page in your website system.
6. To show calendars for more properties, copy each property's own code and paste it on the page where it belongs.

Check it worked

Open the page on your website: the calendar renders and matches your Smoobu Calendar. To confirm it updates, block a date on your Smoobu Calendar, wait a short while for the sync, and reload the page on your website; the date should then show as unavailable there too.

Common problems

Guests say they can't select dates or book in the calendar

That is how this widget works: it is display-only, so there is no date selection and no checkout. It is not broken. To let guests pick dates and book directly on your site, embed the Booking Engine: see . Many hosts keep the availability calendar on one page and the Booking Engine on their booking page.

The calendar's design doesn't match my website

The iFrame version can't be restyled: it resizes itself to fit the screen but always uses Smoobu's standard look. The Default version can be styled. Its code carries data-disable-css="false"; change that value to true to switch off Smoobu's built-in styling and apply your own CSS instead. This part is aimed at web designers, and the change is made in the pasted code on your site, not in Smoobu. Without that change, the calendar keeps Smoobu's standard look.

Related articles

• Booking Engine, Website Builder, Calendar iFrame: what each one is for

Still stuck?

If these steps didn't fix it, contact the Smoobu team: open the Help menu to open a ticket or book a call slot, or use the chat bubble in the bottom-right corner. To get the fastest answer, please include:

• Your Smoobu User ID (in the profile-icon menu, top right).
• The property name or ID, if it's about one property.
• The Booking ID, if it's about one booking (Bookings, then View more).
• The channel name, if it's about channel sync (Booking.com, Airbnb, Vrbo, and so on).
• A short step-by-step: what you did, what you expected, and what happened.
• Screenshots or a short screen recording of the problem.
• Your browser and operating system, if something looks wrong on screen.