QR-Code Generator per iframe einbinden

Mit dem iframe von FreeQRCode kannst du den QR-Code Generator ganz einfach in deine eigene Webseite integrieren. Du benötigst keine eigene Installation, keine API und keine zusätzliche Programmierung.

Der Generator wird direkt über ein iframe geladen und kann auf Webseiten, Landingpages, Kundenportalen, Intranets oder WordPress-Seiten eingebunden werden.

Einfacher iframe-Code

Die einfachste Einbindung erfolgt mit folgendem HTML-Code:

<iframe
  src="https://freeqrco.de/iframe.php"
  width="100%"
  height="900"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Dieser Code lädt den QR-Code Generator mit den Standard-Einstellungen.

Einbindung auf Deutsch

Wenn der Generator direkt auf Deutsch angezeigt werden soll, verwende den Parameter lang=de-DE:

<iframe
  src="https://freeqrco.de/iframe.php?lang=de-DE"
  width="100%"
  height="900"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Einbindung auf Englisch

Für die englische Version kann der Parameter lang=en verwendet werden:

<iframe
  src="https://freeqrco.de/iframe.php?lang=en"
  width="100%"
  height="900"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Farbe anpassen

Die Hauptfarbe des QR-Code Generators kann über den Parameter color_primary angepasst werden. Die Farbe wird als Hex-Code ohne Rautezeichen übergeben.

Beispiel mit Dunkelblau:

<iframe
  src="https://freeqrco.de/iframe.php?lang=de-DE&color_primary=00008B"
  width="100%"
  height="900"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Weitere Beispiele:

https://freeqrco.de/iframe.php?color_primary=000000
https://freeqrco.de/iframe.php?color_primary=0066CC
https://freeqrco.de/iframe.php?color_primary=198754
https://freeqrco.de/iframe.php?color_primary=DC3545

Layout auswählen

Der iframe unterstützt unterschiedliche Layout-Varianten. Das Layout kann über den Parameter layout gesteuert werden.

Vertical Layout

Das vertikale Layout eignet sich besonders gut für schmale Bereiche, mobile Ansichten oder Einbindungen innerhalb von Content-Seiten.

<iframe
  src="https://freeqrco.de/iframe.php?lang=de-DE&layout=vertical"
  width="100%"
  height="1100"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Classic Layout

Das klassische Layout zeigt Formular und QR-Code-Ausgabe nebeneinander und eignet sich besonders für breitere Inhaltsbereiche.

<iframe
  src="https://freeqrco.de/iframe.php?lang=de-DE&layout=classic"
  width="100%"
  height="900"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Alle Optionen kombiniert

Natürlich können Sprache, Farbe und Layout gemeinsam verwendet werden.

<iframe
  src="https://freeqrco.de/iframe.php?lang=de-DE&layout=classic&color_primary=00008B"
  width="100%"
  height="900"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Beispiel mit vertikalem Layout:

<iframe
  src="https://freeqrco.de/iframe.php?lang=de-DE&layout=vertical&color_primary=00008B"
  width="100%"
  height="1100"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Verfügbare Parameter

Parameter	Beispiel	Beschreibung
`lang`	`de-DE` oder `en`	Legt die Sprache des QR-Code Generators fest.
`layout`	`classic` oder `vertical`	Legt fest, ob Formular und QR-Code-Ausgabe klassisch nebeneinander oder vertikal angezeigt werden.
`color_primary`	`00008B`	Ändert die Hauptfarbe des Generators. Der Hex-Code wird ohne `#` angegeben.

Empfohlene iframe-Höhen

Da ein iframe nicht automatisch zuverlässig die komplette Höhe seines Inhalts übernimmt, sollte eine feste Höhe gesetzt werden.

Layout	Empfohlene Höhe
`classic`	`900` bis `1000` Pixel
`vertical`	`1100` bis `1300` Pixel

Eine Höhe von 100% funktioniert bei iframes meistens nicht zuverlässig, weil der Browser dafür eine definierte Höhe des Elternelements benötigt. Deshalb empfehlen wir die Angabe einer festen Höhe in Pixeln.

Beispiel für eine HTML-Seite

Hier ein vollständiges Beispiel für eine einfache HTML-Seite mit eingebundenem QR-Code Generator:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QR-Code Generator</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f5f5f5;
      color: #222;
    }

    header,
    footer {
      background: #00008B;
      color: #fff;
      padding: 30px 20px;
      text-align: center;
    }

    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px 20px;
      background: #fff;
    }

    iframe {
      width: 100%;
      border: 0;
      max-width: 100%;
    }
  </style>
</head>
<body>

  <header>
    <h1>QR-Code Generator</h1>
    <p>Erstelle kostenlos QR-Codes direkt auf unserer Webseite.</p>
  </header>

  <main>
    <iframe
      src="https://freeqrco.de/iframe.php?lang=de-DE&layout=classic&color_primary=00008B"
      height="900"
      loading="lazy">
    </iframe>
  </main>

  <footer>
    <p>Powered by FreeQRCode</p>
  </footer>

</body>
</html>

Einbindung in WordPress

In WordPress kann der iframe-Code einfach über einen HTML-Block eingefügt werden.

WordPress-Seite oder Beitrag öffnen
Neuen Block hinzufügen
Blocktyp Individuelles HTML auswählen
iframe-Code einfügen
Seite speichern oder veröffentlichen

Empfohlener WordPress-Code:

<iframe
  src="https://freeqrco.de/iframe.php?lang=de-DE&layout=classic&color_primary=00008B"
  width="100%"
  height="900"
  style="border:0; max-width:100%;"
  loading="lazy">
</iframe>

Vorteile der iframe-Einbindung

Keine eigene Installation notwendig
Schnelle Integration in WordPress, HTML-Seiten oder Webprojekte
Sprache per URL-Parameter wählbar
Farbe individuell anpassbar
Layout wählbar: classic oder vertical
Responsive Darstellung über width="100%"
Ideal für Webseiten, Portale, Agenturen und Kundenprojekte

Direkt testen

Du kannst den QR-Code Generator direkt über folgende URL testen:

QR-Code Generator im iframe öffnen

Fazit

Mit dem FreeQRCode iframe lässt sich ein vollständiger QR-Code Generator schnell und unkompliziert in bestehende Webseiten integrieren. Über URL-Parameter können Sprache, Layout und Farbe individuell angepasst werden. Damit eignet sich die Einbindung besonders für WordPress-Seiten, Agenturen, Unternehmenswebseiten, interne Tools und Kundenportale.

Hier gehts zum Blog Beitrag:

QR-Code-Generator per iframe in die eigene Webseite einbinden