Sie arbeiten mit einem Static-Site-Generator, einem modernen Framework oder einer eigenen HTML-Seite und brauchen das Schulferien-Widget als reines Iframe ohne Plugin-Overhead. Hier sind die wichtigsten Einbau-Snippets — alle performance-optimiert, mobil-tauglich und ohne externe Abhängigkeiten.
Jetzt kostenlos registrieren →
Die Hub-Seite zeigt alle 4 Themes nebeneinander.
Hinweis für Seitenbetreiber: Der feste Footer ist standardmäßig aktiv. Mit ?footer=0 können Sie ihn im Iframe deaktivieren. Das Theme wählen Sie per ?theme=ocean|light|dark|minimal.
Das einfachste Snippet — kopieren, einfügen, fertig. Das Attribut loading="lazy" verzögert das Laden, bis der Iframe in den Viewport scrollt, was die Initial-Load-Performance Ihrer Seite verbessert. Setzen Sie width="100%" für responsive Layouts und eine feste Höhe (z. B. 640px) für stabilen Layout-Flow ohne CLS.
Im JSX schreiben Sie iframe einfach kleingeschrieben als HTML-Element. Wenn Sie next/dynamic verwenden, ist das nicht nötig — das Iframe selbst ist nicht SSR-relevant. Tipp: rendern Sie ein Skeleton-Placeholder, bis das Iframe geladen ist, um Layout-Shifts auf Mobile zu vermeiden.
In Astro-Komponenten fügen Sie das Iframe direkt im .astro-File ein. Wenn Sie View Transitions nutzen, achten Sie auf transition:persist, damit das Iframe beim Navigationswechsel nicht neu geladen wird.
In Markdown-Files können Sie das Iframe als raw HTML einfügen — bei Hugo aktiviert durch markup.goldmark.renderer.unsafe = true. Alternativ als Shortcode definieren, um Wiederverwendung zu erleichtern.
Setzen Sie immer loading="lazy". Vermeiden Sie iframes über dem Fold (Above-the-Fold), wenn es geht — sie sind teuer für den Largest Contentful Paint. Wenn das Widget zentral ist, geben Sie ihm eine feste, an die Inhaltsbreite angepasste Höhe, damit Cumulative Layout Shift gegen Null geht.
Kostenlos, in unter zwei Minuten eingerichtet.
Embed-Code generieren →