iFrame-Integration · einsatzbereit

Förderrechner einbetten

Das iFrame-Widget bettet den vollständigen Förderrechner in deine Seite ein — geladen aus der schlanken Variante unter https://foerdergrad.de/embed/rechner, ohne Navigation, Kopf- und Fußzeile. Alles läuft über URL-Parameter; kein Login, kein JavaScript-SDK.

Profil — alter, brutto, sparbetrag belegen die Eingaben des Rechners vor.
Darstellung — theme[akzent|bg|text] (Hex ohne #), theme[radius] (Eckenradius) und theme[font] (Schriftart) für das White-Label.
Optionen — teilen=nein blendet den „Ergebnis teilen"-Button aus. consent=ja aktiviert den Cookie-Banner im Widget (standardmäßig aus — der Consent läuft über die einbettende Seite). Die Höhe meldet das Widget per postMessage; das Resize-Snippet unten zieht sie nach.

Konfiguration

Live-Vorschau

Einbettungs-Code

<iframe
  class="fg-rechner"
  src="https://foerdergrad.de/embed/rechner?alter=30&brutto=45000&sparbetrag=100&theme%5Bakzent%5D=2b6cb0&theme%5Bbg%5D=ffffff&theme%5Btext%5D=1a202c&theme%5Bradius%5D=12"
  width="1240" height="600"
  style="border:0;width:100%;max-width:1240px;border-radius:12px"
  title="foerdergrad.de Förderrechner" loading="lazy"></iframe>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://foerdergrad.de") return;
  if (!e.data || e.data.type !== "fg-embed-height") return;
  // Über contentWindow zuordnen — funktioniert auch bei mehreren Rechnern
  // auf derselben Seite (kein ID-Konflikt).
  var frames = document.querySelectorAll("iframe.fg-rechner");
  for (var i = 0; i < frames.length; i++) {
    if (frames[i].contentWindow === e.source) {
      frames[i].style.height = e.data.height + "px";
    }
  }
});
</script>

Alle Einstellungen sind in der src-URL kodiert. Das<script> ist optional, sorgt aber dafür, dass das iFrame ohne inneren Scrollbalken mit dem Inhalt mitwächst.