INHALTSVERZEICHNIS


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/