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

Erstellt von Calenso Support, Geändert am Thu, 31 Mar 2022 um 01:12 PM von Calenso Support

INHALTSVERZEICHNIS

Einführung
Voraussetzungen
Beispiel-Code

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

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/