Add the Cloudbeds Booking Engine to your website using an iframe

An iframe is an HTML element used to embed one web page into another. This article shows how to embed the Cloudbeds Booking Engine into your website using an iframe.

To see other options for adding the Cloudbeds Booking Engine to your website, click here.

Overview

Use an iframe to incorporate your Cloudbeds Booking Engine page seamlessly into your own website, all without redirecting your guests to an external site. In other words, your guests can book directly from the page in which they have already located without having to navigate elsewhere.

This is how the booking engine iframe would appear on a property website (The highlighted area below is the Cloudbeds Booking Engine iframe code pasted into the website)

The Cloudbeds Booking Engine is being upgraded to a new version. Learn more: Cloudbeds Booking Engine Plus (November 2023)

Embed Cloudbeds Booking Engine iframe into your website

  1. In the Account menu, go to the Settings page and click on the Cloudbeds Booking Engine
  2. Grab your Booking Engine URL.
  3. 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 and 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.

Do you have any doubts about the Cloudbeds Booking Engine iframe? Visit our frequently asked questions.

Other options to add the Booking Engine to your website

Find below some other options to add the Cloudbeds Booking Engine to your website, besides the iframe. This article offers three different options to complete this process. For advanced website configuration, we recommend you contact your web designer or web developer directly.

  • Option 1 - Direct link to your Booking Engine: Take any link on your website and point it directly to your booking engine URL. Here is a quick and simple an example of the HTML to create this link. Simply replace the URL here href="https://outsite.cloudbeds.com" with your Booking Engine link: 
<a href="https://outsite.cloudbeds.com">Reserve</a>
Click to copy
  • Option 2 - Use a widget: Refer to the Booking Engine Website Widgets for more details about how to use a widget to add the booking engine to your website.
Was this article helpful?
6 out of 10 found this helpful

Comments

2 comments
  • 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.

    0
  • 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.

    0

Please sign in to leave a comment.