Calenso booking widget with automatic height adjustment (Calenso iFrame resize)

Created by Calenso Support, Modified on Fri, 15 Sep, 2023 at 2:15 PM by Calenso Support

INHALTSVERZEICHNIS

Introduction
Requirements
Sample code

Introduction

The Calenso booking widget can be implemented into your website in 2 different ways:

iFrame
Web component

The iFrame integration is usually cleaner or more secure, but has the disadvantage that the height of the booking widget does not automatically adjust when the content of the widget changes. For this reason, we have implemented the iFrame resizer script in the booking widget. With a corresponding counterpart on your website, the two scripts can communicate with each other and height changes will be passed to your website.

The plugin is documented on the following page:

https://github.com/davidjbradshaw/iframe-resizer

Requirements

jQuery is available. If jQuery is not available, then it can be loaded with the script below.

The iFrame resizer script must be loaded.

Code example with jQuery

The following code shows the booking widget in action:

 <!DOCTYPE html>
 <html>
 <head>
   <style>
     iframe {
       width: 1px;
       min-width: 100%;
     }
   </style>
 
   <!-- Load jQuery (only if it is not yet loaded on your website) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
   <!-- Load the iFrame-Resizer script that communicates with the Calenso booking widget -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.2/iframeResizer.min.js" charset="utf-8"></script>
 
   <script>
       // wait until jQuery is ready
       jQuery(document).ready(function() {
         // initialize the iFrame-Resizer
         iFrameResize({ log: true }, '#calenso-booking-widget')
       });
   </script>
 </head>

 <body>
   <!-- replace partner name with your booking name -->
   <iframe 
     id="calenso-booking-widget" 
     src="https://widget.calenso.com/?partner=calenso-meeting&type=appointment&isFrame=true&lang=de_CH" 
     frameborder="0" 
     style="width: 100%;" 
     scrolling="no">
   </iframe>
 </body>
 </html>

The project is available as a running example on jsFiddle:

https://jsfiddle.net/7q5pg3dL/

Code example without jQuery

The following script example was recommended to us by stilvoller.ch. It has the following advantages:

Elimination of jQuery dependency:

The new sample code no longer requires the jQuery library. This reduces the total number of libraries required and can improve web page load times.

Native JavaScript function to check DOM readiness:

Instead of using the jQuery(document).ready() method, a native JavaScript function is used to check if the DOM is fully loaded before initializing the iFrame resizer. This makes the code less dependent on external libraries and provides a reliable method for checking DOM readiness.

Deferred loading of the iFrame resizer script:

By refactoring the code, the iFrame resizer script is loaded "deferred". This means that the script is loaded only after the entire DOM is loaded, which can improve the visible load time of the web page.

Improved compatibility and reliability:

Using native JavaScript instead of jQuery increases the compatibility and reliability of the code, as it is not dependent on the availability of the jQuery library.

Many thanks for improving our script example goes to the advertising agency stilvoller

<!DOCTYPE html>
<html>
<head>
  <style>
    iframe {
      width: 1px;
      min-width: 100%;
    }
  </style>
</head>

<body>
  <!-- replace partner name with your booking name -->
  <iframe 
    id="calenso-booking-widget" 
    src="https://widget.calenso.com/?partner=calenso-meeting&type=appointment&isFrame=true&lang=de_CH" 
    frameborder="0" 
    style="width: 100%;" 
    scrolling="no">
  </iframe>


  <!-- Load the iFrame-Resizer script that communicates with the Calenso booking widget -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.2/iframeResizer.min.js" charset="utf-8" defer></script>
 
  <script>
     function activateResizer() {
       iFrameResize({ log: true }, '#calenso-booking-widget');
     };

     function ready(fn) {
       if (document.readyState !== 'loading') {
         fn();
       } else {
         document.addEventListener('DOMContentLoaded', fn);
       }
     }

     ready(activateResizer);
  </script>
</body>
</html>