So fügen Sie einen kostenlosen QR-Code-Generator zu Ihrer Website hinzu (Widget in 1 Minute)

Jede gemeinnützige Website, jeder Tech-Blog, jede Agentur und jedes kleine Unternehmen hat Besucher, die schnell einen QR-Code erstellen möchten — und heute verlassen sie dafür Ihre Website. Jeder Abgang ist ein Besuch, der nicht zurückkommt.

Die Lösung ist einfach: einen QR-Code-Generator direkt auf Ihrer eigenen Website als Widget einbauen. Besucher erzeugen ihren Code, ohne die Seite zu verlassen, Sie gewinnen ein nützliches Tool, das wiederkehrende Besuche anzieht (und manchmal sogar einen Link von jemandem, der die Seite empfiehlt) — und das alles ohne eine einzige Zeile Backend-Code.

Dieses Tutorial zeigt den 1-Minuten-Weg: einen Embed-Schnipsel kopieren und in Ihr HTML, WordPress, Wix oder Squarespace einfügen.

Warum einen QR-Code-Generator auf Ihrer Website platzieren

Engagement: Besucher interagieren mit der Seite, statt nur zu lesen und zu gehen.
Bindung: Sie lösen ihr Problem (den QR-Code erstellen), ohne einen neuen Tab auf einer anderen Website zu öffnen.
Nützliches Tool = wiederkehrender Traffic: Wer es einmal nutzt, kommt oft zurück, wenn er einen weiteren QR-Code braucht — und empfiehlt die Seite eventuell weiter.
Organischer Linkaufbau: Eingebettete Tools sind genau die Art von Inhalt, auf die andere Websites von sich aus verlinken.
Null Wartung: Das Widget läuft auf dem Server von Code2Scan. Sie fügen den Code nur einmal ein.

Der 1-Minuten-Weg: Embed-Code kopieren und einfügen

Keine Installation, kein Konto, kein JavaScript nötig. Es ist ein einziger HTML-Block — ein <iframe> —, den Sie dort einfügen, wo der Generator erscheinen soll:

<iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>

Jedes Attribut hat eine Aufgabe:

Attribut	Funktion
`src`	Adresse des Widgets — muss nicht geändert werden
`width="100%"`	Füllt die Breite des Containers, in den es eingefügt wird
`height="400"`	Höhe in Pixeln — passen Sie sie an Ihr Layout an
`style="max-width:340px"`	Verhindert, dass das Widget auf breiten Bildschirmen riesig wird
`loading="lazy"`	Lädt erst, wenn der Besucher dorthin scrollt — belastet die Seite nicht
`title="..."`	Barrierefreiheit: beschreibt das iframe für Screenreader

Wo einfügen und was Sie davon haben

Wo einfügen	Vorteil
Blog-Footer	Nützliches Tool neben dem Inhalt, erhöht die Verweildauer
Kontaktseite	Besucher erstellen einen QR-Code Ihrer Adresse oder Ihres Links direkt dort
Beitrag über digitales Marketing	Perfekter Kontext — wer über QR-Codes liest, will schon einen ausprobieren
Agentur-Landingpage	Zeigt technisches Können ohne Entwicklungskosten
Internes Dashboard / Intranet	Team erstellt QR-Codes ohne ein weiteres Tool zu benötigen

So fügen Sie es in reinem HTML hinzu

Wenn Ihre Website aus statischem HTML besteht (oder einem individuellen Template), fügen Sie das <iframe> genau dort ein, wo das Widget erscheinen soll — in einem <div>, einem Abschnitt oder einer Seitenleiste:

<section>
  <h2>QR-Code-Generator</h2>
  <iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>
</section>

Speichern Sie die Datei, veröffentlichen Sie sie — das Widget funktioniert bereits.

So fügen Sie es in WordPress hinzu

Bearbeiten Sie die Seite oder den Beitrag, auf dem das Widget erscheinen soll.
Fügen Sie einen „Custom HTML"-Block hinzu (im Block-Editor) oder nutzen Sie ein „Text/HTML"-Widget (bei Themes mit klassischem Editor).
Fügen Sie den <iframe>-Code in den Block ein.
Klicken Sie auf Vorschau, um es vor der Veröffentlichung zu prüfen.
Veröffentlichen Sie die Seite.

Kein Plugin nötig — der native HTML-Block von WordPress reicht.

So fügen Sie es in Wix oder Squarespace hinzu

Beide erlauben das Einfügen von benutzerdefiniertem HTML über ein spezielles Element:

Wix: Fügen Sie das Element „Einbetten" → „HTML einbetten" hinzu, fügen Sie den iframe-Code ein und passen Sie die Größe des Elements auf dem Bildschirm an.
Squarespace: Fügen Sie einen Inhaltsblock vom Typ „Code-Block" hinzu, fügen Sie den Schnipsel ein und speichern Sie.

In beiden Fällen passt sich das Widget dem reservierten Platz an — an width="100%" muss nichts geändert werden.

Kostenlos, ohne Anmeldung, funktioniert mit jedem CMS

Das Widget ist öffentlich und kostenlos: kein Login, kein API-Schlüssel, kein Nutzungslimit. Es funktioniert auf jeder Plattform, die HTML akzeptiert — WordPress, Wix, Squarespace, Webflow, Shopify, Notion oder eine handgecodete Website. Wenn ein Besucher nur einen einmaligen QR-Code braucht, ohne dass Sie etwas auf Ihrer eigenen Website installieren, kann er auch direkt den kostenlosen QR-Code-Generator nutzen — aber mit eingebettetem Widget entfällt dieser Umweg.

Grundlegende Anpassung: Breite und Höhe

Die beiden gängigsten Anpassungen:

Schmalere Breite: Ersetzen Sie width="100%" durch einen festen Wert wie width="340", wenn das Widget in einer schmalen Seitenleiste sitzt.
Größere oder kleinere Höhe: Der Wert height="400" funktioniert in den meisten Fällen gut, aber wenn das Widget Inhalte abschneidet, erhöhen Sie ihn auf 450 oder 500.

Vermeiden Sie zu kleine Abmessungen (unter 300px Breite) — der Generator wirkt dann gequetscht und ist auf dem Handy schwer zu bedienen.

Vollständige Schritt-für-Schritt-Anleitung

Gehen Sie zur Seite des QR-Code-Widgets und kopieren Sie den fertigen Embed-Code.
Fügen Sie das <iframe> in das HTML Ihrer Seite, in den HTML-Block von WordPress oder in das Code-Element von Wix/Squarespace ein.
Passen Sie width und height bei Bedarf an Ihr Layout an.
Speichern und veröffentlichen Sie die Seite.
Testen Sie auf dem Handy und am Computer — erzeugen Sie einen echten QR-Code und scannen Sie ihn, um zu bestätigen, dass alles funktioniert.

Häufige Fehler

❌ `loading="lazy"` vergessen

Ohne dieses Attribut lädt das iframe sofort beim Öffnen der Seite, selbst wenn der Besucher nie dorthin scrollt. Das verlangsamt den ersten Seitenaufbau unnötig.

❌ iframe ohne `max-width` einfügen

Auf großen Bildschirmen streckt ein width="100%" ohne Breitenbegrenzung das Widget übermäßig. Behalten Sie das style="max-width:340px" aus dem Original-Snippet bei.

❌ Annehmen, dass ein Konto oder API-Schlüssel nötig ist

Das Widget ist öffentlich — es gibt keinen Authentifizierungsschritt. Wenn ein Tutorial etwas anderes behauptet, ist es veraltet oder beschreibt einen anderen Dienst.

❌ Nicht auf dem Handy testen

Das Widget selbst ist responsiv, aber der Container, in den Sie es eingefügt haben, ist es vielleicht nicht. Prüfen Sie immer die Handy-Darstellung, bevor Sie die Aufgabe als erledigt betrachten.

❌ Widget mit rückverfolgbarem QR-Code verwechseln

Das Widget erzeugt einen statischen QR-Code direkt im Browser des Besuchers. Wenn Sie wissen müssen, wie viele Personen jeden QR-Code gescannt haben, brauchen Sie eine andere Funktion — siehe den Leitfaden zu rückverfolgbaren QR-Codes mit UTM.

Zusammenfassung

Kopieren Sie den <iframe>-Schnipsel vom QR-Code-Widget — kein Konto nötig.
Fügen Sie ihn in reines HTML, den HTML-Block von WordPress oder das Code-Element von Wix/Squarespace ein.
loading="lazy" verhindert, dass das Widget den Seitenaufbau verlangsamt.
Passen Sie width und height an den verfügbaren Platz in Ihrem Layout an.
Es ist kostenlos, funktioniert mit jedem CMS und gibt keine Ihrer Daten preis.
Für Scan-Tracking oder ein bearbeitbares Ziel ist das schon ein Anwendungsfall für dynamische QR-Codes — das Widget deckt die einfache, kostenlose Erstellung ab.

Möchten Sie es testen, bevor Sie es auf Ihrer Website einfügen? Sehen Sie sich das QR-Code-Widget live an und kopieren Sie den Embed-Code — in unter einer Minute ist es startklar. Wenn Sie lieber sofort einen einmaligen QR-Code erstellen möchten, nutzen Sie den QR-Code-Generator.