Calenso Buchungswidget mit automatischer Höhenanpassung (Calenso iFrame resize)

Erstellt von Calenso Support, Geändert am Fri, 15 Sep 2023 um 02:14 PM von Calenso Support

INHALTSVERZEICHNIS

Einführung
Voraussetzungen
Beispiel-Code mit jQuery
Beispiel-Code ohne jQuery

Einführung

Das Calenso Buchungswidget kann auf 2 verschiedene Arten in die eigene Webseite implementiert werden:

iFrame
Web-Komponente

Die iFrame-Integration ist meist sauberer bzw. sicherer, hat aber den Nachteil, dass sich die Höhe des Buchungswidget nicht automatisch anpasst, wenn der Inhalt des Widget ändert. Aus diesem Grund haben wir das iFrame-Resizer Script im Buchungswidget implementiert. Mit einem entsprechenden Gegenstück auf deiner Webseite können die zwei Scripts miteinander kommunizieren und Höhen-Änderungen werden an deine Webseite weitergeben.

Das Plugin ist auf folgender Seite dokumentiert:

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

Voraussetzungen

jQuery ist verfügbar. Wenn jQuery nicht verfügbar ist, dann kann es mit dem unten stehenden Script geladen werden.
Das iFrame-Resizer Script muss geladen werden.

Beispiel-Code mit jQuery

Der folgende Code zeigt das Buchungswidget in Aktion:

 <!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>

Das Projekt ist als lauffähiges Beispiel auf jsFiddle verfügbar:

https://jsfiddle.net/7q5pg3dL/

Beispiel-Code ohne jQuery

Das folgende Skript-Beispiel wurde uns von stilvoller.ch empfohlen. Es verfügt über folgende Vorteile:

Eliminierung der jQuery-Abhängigkeit:

Der neue Beispielcode benötigt nicht länger die jQuery-Bibliothek. Dies reduziert die Gesamtanzahl der erforderlichen Bibliotheken und kann die Ladezeiten der Webseite verbessern.

Native JavaScript-Funktion zur Überprüfung der DOM-Readiness:

Statt der jQuery(document).ready() Methode wird eine native JavaScript-Funktion verwendet, um zu überprüfen, ob das DOM vollständig geladen ist, bevor der iFrame-Resizer initialisiert wird. Dies macht den Code unabhängiger von externen Bibliotheken und bietet eine zuverlässige Methode zur Überprüfung der DOM-Readiness.

Deferred Laden des iFrame-Resizer-Skripts:

Durch die Überarbeitung des Codes wird das iFrame-Resizer-Skript „deferred” geladen. Das bedeutet, dass das Skript erst geladen wird, nachdem das gesamte DOM geladen ist, wodurch die sichtbare Ladezeit der Webseite verbessert werden kann.

Verbesserte Kompatibilität und Zuverlässigkeit:

Durch die Verwendung von nativem JavaScript anstelle von jQuery wird die Kompatibilität und Zuverlässigkeit des Codes erhöht, da er nicht von der Verfügbarkeit der jQuery-Bibliothek abhängig ist.

Vielen Dank für das Verbessern unseres Skript-Beispiels geht an die Werbeagentur 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>