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


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/


War dieser Artikel hilfreich?

Das ist großartig!

Vielen Dank für das Feedback

Leider konnten wir nicht helfen

Vielen Dank für das Feedback

Wie können wir diesen Artikel verbessern?

Wählen Sie wenigstens einen der Gründe aus

Feedback gesendet

Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren