Cloudbeds Booking Engine - How to Add the Booking Engine to Your Website Using an Iframe

The Cloudbeds Booking Engine uses SSL security to ensure that all data passed between our web servers and a guest's browser remains private and integral. For tips on how to ensure that SSL is properly implemented in an iframe solution, see our Cloudbeds Security Features and PCI DSS Certification.

Cloudbeds Booking engine codes saved in the Custom Header/Footer section will not work if it is saved in an iframe with ?widget=1 in the Booking Engine link. This removes/strips the header and footer section along with all the codes saved in them. To resolve this, save all of the codes in Custom Meta Tag section instead.

Wordpress websites require a different method for adding an iframe and need to be added by using short code. For more information about adding iframes to a Wordpress site, read this article from Wordpress.

Add the code block </> from the options and save iframe code in this code block. The iframes may not expand in the first instance when the web page loads. This happens due to the Ajax Loading feature which is enabled on the Squarespace. Make sure it is disabled. More information on it can be found here.

Change the iframe size by:

1. Editing the width and height parameters in the iframe code:

<iframe src="https://YOUR-MYBOOKINGS-URL?widget=1" width="100" height="500" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>

2. Changing the size of container you insert the iframe into

Yes, check this article to learn how: Customize mybookings - HTML and CSS Custom Meta Tags

By default, the language of booking engine is defined by the website guest browser's settings (if you access booking engine from United States, it will be set to English. If you switch it manually to German, the next time you access it will be set to German).

Yes, you can add any of the supported languages 2 digit code in the URL to change the default language for the iframe:

Example:

• Default <iframe src="https://hotels.cloudbeds.com/reservation/rRmoV78?widget=1" width="976" height="976"></iframe>
• Spanish Version <iframe src="https://hotels.cloudbeds.com/es/reservation/rRmoV5?widget=1" width="976" height="976"></iframe>

This can't be done through the Cloudbeds PMS interface and can't be done by Cloudbeds team, but it might be possible with script added to your website. Consult with your webmaster to find out the solutions.

To show both Currency and Language selectors in your booking engine, add the full booking engine link (without ?widget=1) to your website within the iframe. Click here to learn more.

1. In the Customize the Booking Engine section, click on the Gallery Design tab.
2. Add the code below in the Custom Meta Tags section.
3. Save your changes.

<style>
.page-header-wrap.navbar {
visibility: hidden;
}
.listing .logo { display: none !important; }
#lang_currency_switchers { visibility: visible; }
.page-boxed .page-footer, .page-boxed .page-container { display: none; }
</style>

Add this code below in the Custom Meta Tags section. You may change the pixel values of #wizard-container depending on the drop-down lists to make them visible:

<style>
#wizard-container{ margin-bottom: 130px !important; }
.search-panel-wrap { margin-top: 40px !important; }
</style>