Ein QR-Code Generator kann für viele Webseiten ein praktisches Zusatzangebot sein. Ob für Agenturen, Unternehmen, Vereine, interne Portale oder eigene Webprojekte: Mit dem iframe von FreeQRCode lässt sich ein vollständiger QR-Code Generator schnell und unkompliziert in die eigene Webseite einbinden.
Der große Vorteil: Du musst keinen eigenen QR-Code Generator installieren, keine API anbinden und keine zusätzliche Software warten. Der Generator wird einfach über ein iframe eingebunden und kann direkt von deinen Besucherinnen und Besuchern genutzt werden.
Was ist ein iframe?
Ein iframe ist ein HTML-Element, mit dem Inhalte einer anderen Webseite innerhalb der eigenen Webseite angezeigt werden können. In diesem Fall wird der QR-Code Generator von FreeQRCode direkt in deine Seite geladen.
Für 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.
Einfacher iframe-Code für den QR-Code Generator
Die einfachste Variante sieht so aus:
<iframe
src="https://freeqrco.de/iframe.php"
width="100%"
height="900"
style="border:0; max-width:100%;"
loading="lazy">
</iframe>Damit wird der QR-Code Generator mit den Standard-Einstellungen geladen. Die Breite beträgt 100%, sodass sich das iframe an die verfügbare Breite des Inhaltsbereichs anpasst.
QR-Code Generator auf Deutsch einbinden
Soll der Generator direkt auf Deutsch angezeigt werden, kann der Parameter lang=de-DE verwendet werden:
<iframe
src="https://freeqrco.de/iframe.php?lang=de-DE"
width="100%"
height="900"
style="border:0; max-width:100%;"
loading="lazy">
</iframe>Diese Variante eignet sich besonders für deutschsprachige Webseiten, Blogs, Portale und Unternehmensseiten.
QR-Code Generator auf Englisch einbinden
Für englischsprachige Webseiten kann der Generator mit lang=en geladen werden:
<iframe
src="https://freeqrco.de/iframe.php?lang=en"
width="100%"
height="900"
style="border:0; max-width:100%;"
loading="lazy">
</iframe>Damit kann derselbe QR-Code Generator auch auf internationalen Webseiten verwendet werden.
Layout auswählen: classic oder vertical
Der iframe-Generator unterstützt verschiedene Layouts. Über den Parameter layout kann festgelegt werden, wie Formular und QR-Code-Ausgabe dargestellt werden.
Classic Layout
Das klassische Layout zeigt das Formular und die QR-Code-Ausgabe nebeneinander. Es eignet sich besonders für breite Inhaltsbereiche, Desktop-Ansichten und Landingpages.
<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>Vertical Layout
Das vertikale Layout stellt die Inhalte untereinander dar. Es eignet sich besonders für schmalere Bereiche, mobile Ansichten oder Webseiten mit engerem Content-Layout.
<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>Farbe des iframe-Generators anpassen
Zusätzlich kann die Hauptfarbe des Generators über die URL angepasst werden. Dafür wird der Parameter color_primary verwendet. Der Farbwert wird als Hex-Code ohne Rautezeichen angegeben.
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 mögliche Farbwerte:
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=DC3545So lässt sich der QR-Code Generator besser an das Design der eigenen Webseite anpassen.
Alle Funktionen kombiniert
Sprache, Layout und Farbe können gemeinsam verwendet werden. So entsteht eine individuell angepasste iframe-URL:
<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>Oder 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 URL-Parameter
| Parameter | Beispiel | Funktion |
|---|---|---|
lang | de-DE, en | Legt die Sprache des Generators fest. |
layout | classic, vertical | Legt die Darstellung des Generators fest. |
color_primary | 00008B | Legt die Hauptfarbe des Generators fest. |
Einbindung in WordPress
In WordPress kann der iframe-Code sehr einfach eingefügt werden. Du benötigst dafür kein zusätzliches Plugin.
- WordPress-Seite oder Beitrag öffnen
- Neuen Block hinzufügen
- Block Individuelles HTML auswählen
- iframe-Code einfügen
- Beitrag 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>Warum funktioniert height=“100%“ beim iframe oft nicht?
Viele versuchen, ein iframe mit height="100%" einzubinden. Das funktioniert jedoch oft nicht wie erwartet. Der Grund ist, dass sich 100% immer auf die Höhe des Elternelements bezieht. Wenn dieses Elternelement keine feste Höhe hat, kann der Browser die iframe-Höhe nicht korrekt berechnen.
Deshalb ist für diese Einbindung eine feste Höhe empfehlenswert. Für das klassische Layout sind meist 900 bis 1000 Pixel sinnvoll. Für das vertikale Layout können 1100 bis 1300 Pixel besser geeignet sein.
Vorteile der iframe-Einbindung
- Keine eigene Installation notwendig
- Keine API-Anbindung erforderlich
- Schnell in WordPress, HTML-Seiten und Webprojekte integrierbar
- Sprache per URL-Parameter wählbar
- Layout per URL-Parameter wählbar
- Farbe individuell anpassbar
- Responsive Breite durch
width="100%" - Ideal für Agenturen, Portale, Unternehmensseiten und Kundenprojekte
Für welche Webseiten eignet sich der QR-Code iframe?
Die iframe-Einbindung eignet sich für viele unterschiedliche Einsatzbereiche. Besonders praktisch ist sie für Webseiten, die ihren Besucherinnen und Besuchern ein nützliches Zusatzwerkzeug anbieten möchten.
- Agentur-Webseiten
- Marketing- und SEO-Portale
- Unternehmenswebseiten
- Vereinswebseiten
- Schul- und Bildungsportale
- Interne Firmenportale
- WordPress-Blogs
- Kundenbereiche und Service-Seiten
Komplettes HTML-Beispiel
Hier ist ein vollständiges Beispiel für eine einfache HTML-Seite mit Header, Content-Bereich, iframe und Footer:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR-Code Generator einbinden</title>
<meta name="description" content="QR-Code Generator per iframe in die eigene Webseite einbinden.">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f6f8;
color: #222;
}
header {
background: #00008B;
color: #fff;
padding: 40px 20px;
text-align: center;
}
header h1 {
margin: 0 0 10px;
font-size: 32px;
}
header p {
margin: 0;
font-size: 18px;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
background: #fff;
}
.intro {
max-width: 800px;
margin: 0 auto 30px;
text-align: center;
font-size: 18px;
line-height: 1.6;
}
iframe {
width: 100%;
max-width: 100%;
border: 0;
display: block;
}
footer {
background: #111;
color: #fff;
padding: 25px 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Kostenloser QR-Code Generator</h1>
<p>Erstelle QR-Codes direkt auf dieser Webseite.</p>
</header>
<main>
<div class="intro">
<p>
Nutze den integrierten QR-Code Generator, um schnell und einfach QR-Codes für Links,
Texte, Kontaktdaten und weitere Inhalte zu erstellen.
</p>
</div>
<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>Direkt testen
Du kannst den QR-Code Generator direkt im Browser testen:
QR-Code Generator im iframe öffnen
Fazit
Mit dem FreeQRCode iframe lässt sich ein vollständiger QR-Code Generator sehr einfach in die eigene Webseite einbinden. Die Integration funktioniert mit wenigen Zeilen HTML und kann flexibel angepasst werden.
Durch die URL-Parameter für Sprache, Layout und Farbe kann der Generator an unterschiedliche Webseiten und Designs angepasst werden. Für WordPress, klassische HTML-Seiten, Kundenportale und Agenturprojekte ist die iframe-Lösung eine einfache und praktische Möglichkeit, einen QR-Code Generator direkt bereitzustellen.