How to use an iframe with mybookings

Follow

An iframe is used to embed one webpage into another. For example, if you want to embed the booking engine page into your website. This is a perfect solution for those, who want to use mybookings as their main booking engine but do not want to redirect their guests to external websites.

This article will show how to embed mybookings page into your website as an iframe.

If you want to use mybookings booking widget on your website instead, please check this article.

This is how mybookings iframe looks on the website:

How to embed mybookings iframe into your website

  1. Click the gear icon 'Manage'
  2. Under the menu 'Booking Engine', click 'Mybookings'
  3. Grab your mybookings URL
    Example: https://hotels.cloudbeds.com/reservation/zsWUhE
  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 4 to embed the full mybookings page)
    Example: https://hotels.cloudbeds.com/reservation/zsWUhE?widget=1

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

This iframe strips the following elements:

  • Header (logo, property name, property photos)
  • Policies
  • Map
  • Amenities
  • Terms and conditions
  • Language and Currency drop-down

To display the whole mybookings 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_MYBOOKINGS_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_MYBOOKINGS_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 their website designer only. It cannot be done by Cloudbeds Team

Frequently Asked Questions

Security and PCI Certification

Mybookings 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, please consult our Cloudbeds Security Features and PCI DSS Certification article.

How to use iframes with WordPress?

Wordpress websites require a different method for adding an iframe and need to be added by using shortcode. For more info about adding iframes to a Wordpress site, please 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?

You may change the iframe size by:

a) Changing 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>

b) Changing the size of container you insert the iframe into

How the language of mybookings in iframe is set by default?

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

Is it possible to change the default language displayed in the mybookings 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:

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>

The drop-down options (Adults/Children/Rooms) are hidden inside the iframe

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 Situmorang

    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