How do I integrate Smoobu's Booking Engine into my external site?

Integrate the booking engine in your external site (Wordpress, Wix, Squarespace or any other)

All blocks (CMS) are ultimately based on HTML and CSS codes. We use HTML for integration. To integrate into your own website you have two options.

Option 1) Direct integration in website with HTML / iframe

If you want to seamlessly integrate the booking engine into your website without sending the guest to an external website, use the HTML code (iframe) for integration within your Website. Check out the website of our The Beach Pad Rincon user to see what the "All available accommodations" booking engine code appears Vs. "Individual" booking engine code. 

Here you can see the "All accommodations" code, and here you can see the "Individual" code. 

Please copy the code and paste it within the HTML of your external website. If you have had a Web Designer create your site, you might have to ask them to do this for you. Once you have decided where you would like to integrate the code, it will only take your designer a few moments to embed the code.

Where to find your Booking Engine Code

General Search iframe (ALL accommodations) 

The default option will be ALL accommodations

Configuration - Booking Engine - Embed in Website - HTML code (iframe) to insert booking tool into external page
Code example: <div id="booking-tool-container-allApartments">
<script type="text/javascript" src="https://login.smoobu.com/js/Settings/BookingToolIframe.js"></script>
<script>BookingToolIframe.initialize({"url": "https://login.smoobu.com/en/booking-tool/iframe/12532", "baseUrl": "https://login.smoobu.com", "target": "#booking-tool-container-allApartments"})</script>
</div>

Individual Search iframe (single properties)

Settings - Booking tool - Embed in Website - Individual properties

Select the property, copy the html code and paste it within your website's code. 

Code example: <div id="booking-tool-container-apartment66317">
<script type="text/javascript" src="https://login.smoobu.com/js/Settings/BookingToolIframe.js"></script>
<script>BookingToolIframe.initialize({"url": "https://login.smoobu.com/en/booking-tool/iframe/12532/66317", "baseUrl": "https://login.smoobu.com", "target": "#booking-tool-container-apartment66317"})</script>
</div>

Option 2) Link to the Booking Engine via URL

This kind of integration is used when you'd like to send your guest to an external page. Use the link to the booking engine and you can redirect your potential guests to another site for direct booking. Through a button, a photo or any element that you wish to link to your site for direct booking.

It can be used when creating a button on your page, for example a 'Book now' button and link it to Smoobu's booking tool. 

The general code is for ALL accommodation combined. You might also be interested in using a link for individual units, which is also possible with Smoobu.

How to get the link(s)?

1) Link to General Search (all properties included). Configuration - Booking Engine - Embed in Website. Click on 'Preview' and copy the link from the URL. Example: https://booking.smoobu.com/berlinvillas

2) Link to Individual Search (single properties). Compose it as follows:

https://booking.smoobu.com/yourbookingenginename + ?apartmentId= + individualpropertyIDnumberhere

Example: https://booking.smoobu.com/berlinvillas?apartmentId=427153

https://booking.smoobu.com/berlinvillas?apartmentId=427153

Where to get the propertyID from? In Smoobu: API Keys

To change the opacity/transparency of the Booking Engine, choose a value here.

Thanks for reading! Please also remember to:

- Adjust your Booking Engine settings 
- Enter your prices and minimum night restrictions