{"id":137,"date":"2026-04-30T14:06:49","date_gmt":"2026-04-30T12:06:49","guid":{"rendered":"https:\/\/freeqrco.de\/docs\/?p=137"},"modified":"2026-05-02T10:59:26","modified_gmt":"2026-05-02T08:59:26","slug":"qr-code-generator-per-iframe-in-die-eigene-webseite-einbinden","status":"publish","type":"post","link":"https:\/\/freeqrco.de\/docs\/qr-code-generator-per-iframe-in-die-eigene-webseite-einbinden\/","title":{"rendered":"QR-Code-Generator per iframe in die eigene Webseite einbinden"},"content":{"rendered":"\n

Ein QR-Code Generator kann f\u00fcr viele Webseiten ein praktisches Zusatzangebot sein. Ob f\u00fcr Agenturen, Unternehmen, Vereine, interne Portale oder eigene Webprojekte: Mit dem iframe von FreeQRCode<\/strong> l\u00e4sst sich ein vollst\u00e4ndiger QR-Code Generator schnell und unkompliziert in die eigene Webseite einbinden.<\/p>\n\n\n\n

Der gro\u00dfe Vorteil: Du musst keinen eigenen QR-Code Generator installieren, keine API anbinden und keine zus\u00e4tzliche Software warten. Der Generator wird einfach \u00fcber ein iframe eingebunden und kann direkt von deinen Besucherinnen und Besuchern genutzt werden.<\/p>\n\n\n\n

\n\n\n\n

Was ist ein iframe?<\/h2>\n\n\n\n

Ein iframe ist ein HTML-Element, mit dem Inhalte einer anderen Webseite innerhalb der eigenen Webseite angezeigt werden k\u00f6nnen. In diesem Fall wird der QR-Code Generator von FreeQRCode direkt in deine Seite geladen.<\/p>\n\n\n\n

F\u00fcr die Einbindung reicht ein kurzer HTML-Code. Diesen kannst du zum Beispiel in WordPress, in eine klassische HTML-Seite oder in ein eigenes Webprojekt integrieren.<\/p>\n\n\n\n

\n\n\n\n

Einfacher iframe-Code f\u00fcr den QR-Code Generator<\/h2>\n\n\n\n

Die einfachste Variante sieht so aus:<\/p>\n\n\n\n

<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php\"\n  width=\"100%\"\n  height=\"900\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
Damit wird der QR-Code Generator mit den Standard-Einstellungen geladen. Die Breite betr\u00e4gt 100%<\/code>, sodass sich das iframe an die verf\u00fcgbare Breite des Inhaltsbereichs anpasst.<\/p>\n\n\n\n
\n\n\n\n
QR-Code Generator auf Deutsch einbinden<\/h2>\n\n\n\n
Soll der Generator direkt auf Deutsch angezeigt werden, kann der Parameter lang=de-DE<\/code> verwendet werden:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=de-DE\"\n  width=\"100%\"\n  height=\"900\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
Diese Variante eignet sich besonders f\u00fcr deutschsprachige Webseiten, Blogs, Portale und Unternehmensseiten.<\/p>\n\n\n\n
\n\n\n\n
QR-Code Generator auf Englisch einbinden<\/h2>\n\n\n\n
F\u00fcr englischsprachige Webseiten kann der Generator mit lang=en<\/code> geladen werden:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=en\"\n  width=\"100%\"\n  height=\"900\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
Damit kann derselbe QR-Code Generator auch auf internationalen Webseiten verwendet werden.<\/p>\n\n\n\n
\n\n\n\n
Layout ausw\u00e4hlen: classic oder vertical<\/h2>\n\n\n\n
Der iframe-Generator unterst\u00fctzt verschiedene Layouts. \u00dcber den Parameter layout<\/code> kann festgelegt werden, wie Formular und QR-Code-Ausgabe dargestellt werden.<\/p>\n\n\n\n
Classic Layout<\/h3>\n\n\n\n
Das klassische Layout zeigt das Formular und die QR-Code-Ausgabe nebeneinander. Es eignet sich besonders f\u00fcr breite Inhaltsbereiche, Desktop-Ansichten und Landingpages.<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=de-DE&layout=classic\"\n  width=\"100%\"\n  height=\"900\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
Vertical Layout<\/h3>\n\n\n\n
Das vertikale Layout stellt die Inhalte untereinander dar. Es eignet sich besonders f\u00fcr schmalere Bereiche, mobile Ansichten oder Webseiten mit engerem Content-Layout.<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=de-DE&layout=vertical\"\n  width=\"100%\"\n  height=\"1100\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
\n\n\n\n
Farbe des iframe-Generators anpassen<\/h2>\n\n\n\n
Zus\u00e4tzlich kann die Hauptfarbe des Generators \u00fcber die URL angepasst werden. Daf\u00fcr wird der Parameter color_primary<\/code> verwendet. Der Farbwert wird als Hex-Code ohne Rautezeichen angegeben.<\/p>\n\n\n\n
Beispiel mit Dunkelblau:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=de-DE&color_primary=00008B\"\n  width=\"100%\"\n  height=\"900\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
Weitere m\u00f6gliche Farbwerte:<\/p>\n\n\n\n
https://freeqrco.de\/iframe.php?color_primary=000000\nhttps:\/\/freeqrco.de\/iframe.php?color_primary=0066CC\nhttps:\/\/freeqrco.de\/iframe.php?color_primary=198754\nhttps:\/\/freeqrco.de\/iframe.php?color_primary=DC3545<\/code><\/pre>\n\n\n\n
So l\u00e4sst sich der QR-Code Generator besser an das Design der eigenen Webseite anpassen.<\/p>\n\n\n\n
\n\n\n\n
Alle Funktionen kombiniert<\/h2>\n\n\n\n
Sprache, Layout und Farbe k\u00f6nnen gemeinsam verwendet werden. So entsteht eine individuell angepasste iframe-URL:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=de-DE&layout=classic&color_primary=00008B\"\n  width=\"100%\"\n  height=\"900\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
Oder mit vertikalem Layout:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=de-DE&layout=vertical&color_primary=00008B\"\n  width=\"100%\"\n  height=\"1100\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
\n\n\n\n
Verf\u00fcgbare URL-Parameter<\/h2>\n\n\n\n
Parameter<\/th>Beispiel<\/th>Funktion<\/th><\/tr><\/thead>
lang<\/code><\/td>de-DE<\/code>, en<\/code><\/td>Legt die Sprache des Generators fest.<\/td><\/tr>
layout<\/code><\/td>classic<\/code>, vertical<\/code><\/td>Legt die Darstellung des Generators fest.<\/td><\/tr>
color_primary<\/code><\/td>00008B<\/code><\/td>Legt die Hauptfarbe des Generators fest.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
Einbindung in WordPress<\/h2>\n\n\n\n
In WordPress kann der iframe-Code sehr einfach eingef\u00fcgt werden. Du ben\u00f6tigst daf\u00fcr kein zus\u00e4tzliches Plugin.<\/p>\n\n\n\n
    \n
  1. WordPress-Seite oder Beitrag \u00f6ffnen<\/li>\n\n\n\n
  2. Neuen Block hinzuf\u00fcgen<\/li>\n\n\n\n
  3. Block Individuelles HTML<\/strong> ausw\u00e4hlen<\/li>\n\n\n\n
  4. iframe-Code einf\u00fcgen<\/li>\n\n\n\n
  5. Beitrag speichern oder ver\u00f6ffentlichen<\/li>\n<\/ol>\n\n\n\n
    Empfohlener WordPress-Code:<\/p>\n\n\n\n
    <iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=de-DE&layout=classic&color_primary=00008B\"\n  width=\"100%\"\n  height=\"900\"\n  style=\"border:0; max-width:100%;\"\n  loading=\"lazy\">\n<\/iframe><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Warum funktioniert height=“100%“ beim iframe oft nicht?<\/h2>\n\n\n\n
    Viele versuchen, ein iframe mit height=\"100%\"<\/code> einzubinden. Das funktioniert jedoch oft nicht wie erwartet. Der Grund ist, dass sich 100%<\/code> immer auf die H\u00f6he des Elternelements bezieht. Wenn dieses Elternelement keine feste H\u00f6he hat, kann der Browser die iframe-H\u00f6he nicht korrekt berechnen.<\/p>\n\n\n\n
    Deshalb ist f\u00fcr diese Einbindung eine feste H\u00f6he empfehlenswert. F\u00fcr das klassische Layout sind meist 900<\/code> bis 1000<\/code> Pixel sinnvoll. F\u00fcr das vertikale Layout k\u00f6nnen 1100<\/code> bis 1300<\/code> Pixel besser geeignet sein.<\/p>\n\n\n\n
    \n\n\n\n
    Vorteile der iframe-Einbindung<\/h2>\n\n\n\n