How to Embed Koalendar with an <iframe>

Koalendar bietet mehrere Einbettungsoptionen, die JavaScript zur Steuerung des Layouts und Verhaltens verwenden. Wenn Ihre Plattform jedoch kein JavaScript unterstützt – oder nur iframe-Inhalte zulässt –, können Sie Koalendar dennoch mit einer einfachen iframe-Konfiguration einbetten.

📑 Menü

1. Schritt 1 – Kopieren Sie Ihren Koalendar-Link
2. Schritt 2 – Erstellen und Einfügen des Iframes
3. Fehlerbehebung

📋 Schritt 1 – Kopieren Sie Ihren Koalendar-Link

1. In Ihrem Koalendar-Dashboard die Buchungsseite aus, die Sie einbetten möchten.
2. Klicken Teilen und kopieren Sie die URL (z. B. https://koalendar.com/e/your-page ).

📝 Schritt 2 – Erstellen und Einfügen des Iframes

Fügen Sie Ihren Link in die untenstehende Vorlage ein und fügen Sie dann den HTML-Code zu Ihrer Website hinzu.

<iframe
 title="Booking page powered by Koalendar"
 src="PASTE_YOUR_KOALENDAR_LINK_HERE?embed=true"
 width="100%"
 height="800px"
 frameborder="0">
</iframe>

• Aus Gründen der Barrierefreiheit sollten Sie Titel  Attribut im iframe. Es hilft Nutzern von Bildschirmleseprogrammen, den eingebetteten Inhalt zu verstehen. Sie können den Titel an Ihre Buchungsseite anpassen.
• Wenn Ihr Link bereits ein ?  ersetzen ?embed=true  mit &embed=true  .
• Fügen Sie diesen Code in einen beliebigen HTML-/Einbettungs-/Code -Block Ihres Website-Builders ein und speichern oder veröffentlichen Sie ihn anschließend.

Besucher sehen Ihren Kalender sofort – ganz ohne Skripte.

🛠️ Fehlerbehebung

Suchen Sie nach weiteren Einbettungsstilen – wie Popup-Widget oder Popup-Text/Button– oder erweiterten Parametern? Schauen Sie hier:

• So fügen Sie Koalendar zu Ihrer Website hinzu
• Erweiterte Koalendar-Einbettung für Entwickler