The Cloudbeds PMS has a new look! As we work to update our knowledgebase some steps in our articles might not match our new design. Click here for more details.

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

Follow

This article shows how to embed the Cloudbeds Booking Engine into your website using an iframe.

To see other options for adding the Booking Engine to your website, see How to add the Booking Engine to your Website.

Overview

An iframe is an HTML element used to embed one webpage into another. For example, to insert your Cloudbeds Booking Engine page into your website as your main source, but without redirecting your guests to an external website.

This is how the booking engine iframe looks on a property website:

How to embed Cloudbeds Booking Engine iframe into your website

  1. Click on Manage (gear icon).
  2. Go to your Booking Engine.
  3. Grab your Booking Engine URL.
  4. Add the ?widget=1 parameter at the end of URL for the minimal version of iframe (or skip this step and proceed to step 5 to embed the full booking engine page).

The original booking engine page shows a lot of info, which can be a bit much when displayed in an iframe or integrated into a webpage. To streamline, we created a minimal version of the booking engine, which can be accessed by adding the ?widget=1 parameter.

This ?widget=1 parameter removes the following elements:

  • Header (logo, property name, property photos)
  • Policies
  • Map
  • Amenities
  • Terms and conditions
  • Language and Currency drop-down
  • The Custom Header and Custom Footer sections will get stripped off. Therefore, all the code in those sections won't work in the minimal version of BE. In this case, save the code in the Custom Meta Tags section.

To display the whole booking engine page inside iframe, do not add  ?widget=1 parameter to your URL.

  1. Insert the URL into iframe code provided below

For minimal iframe:

<iframe src="YOUR_BOOKINGENGINE_URL?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>

<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>

For full iframe:

<iframe src="YOUR_BOOKINGENGINE_URL" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>
<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>
  1. Copy the whole iframe code and paste it into your website:

This step should be done by the property or your website designer only.

Frequently Asked Questions

Security and PCI Certification

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.

Why Cloudbeds Booking engine code do not work when it is configured on the website as an iframe?

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.

How to use iframes with WordPress?

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.

How to use iframes with Squarespace?

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.

How to change the iframe size?

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>
  1. Changing the size of container you insert the iframe into

Manually added height values may affect the iframe display since the default code (Step 5) already adjusts the size, based on your total accommodations available.

How the language of booking engine in iframe is set by default?

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).

Is it possible to change the default language displayed in the booking engine iframe?

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

Example:

How to show the Currency and Language selectors for the minimal booking engine within the iframe?

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>
The drop-down options (Adults/Children/Rooms) are hidden inside the iframe. How to solve this?

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>

Comments

  • Avatar
    Evelyn Crumbaker

    I copied and pasted the code with our specific widget source code ~ it does not work ~ still waiting for tech support reply or call back with help.

  • Avatar
    Monika

    Hi Evelyn,
    Thank you for reaching out to us. We have opened a ticket to follow up on your issue.
    Our Support team will reach out to assist you.

Powered by Zendesk