{"id":149,"date":"2026-05-01T09:10:38","date_gmt":"2026-05-01T07:10:38","guid":{"rendered":"https:\/\/freeqrco.de\/docs\/?p=149"},"modified":"2026-05-02T11:00:52","modified_gmt":"2026-05-02T09:00:52","slug":"embed-a-qr-code-generator-on-your-website-with-an-iframe","status":"publish","type":"post","link":"https:\/\/freeqrco.de\/docs\/embed-a-qr-code-generator-on-your-website-with-an-iframe\/","title":{"rendered":"Embed a QR Code Generator on Your Website with an iframe"},"content":{"rendered":"\n

A QR code generator can be a useful feature for many websites. Whether you run an agency website, a company page, a customer portal, an internal tool, or a WordPress blog: with the FreeQRCode<\/strong> iframe, you can embed a complete QR code generator into your own website quickly and easily.<\/p>\n\n\n\n

The main advantage is that you do not need to install your own QR code software, connect an API, or maintain additional code. The generator is loaded directly through an iframe and can be used by your website visitors immediately.<\/p>\n\n\n\n

\n\n\n\n

What is an iframe?<\/h2>\n\n\n\n

An iframe is an HTML element that allows content from another website to be displayed inside your own page. In this case, the FreeQRCode generator is loaded directly into your website.<\/p>\n\n\n\n

All you need is a short HTML snippet. You can add it to WordPress, a classic HTML website, a landing page, or a custom web project.<\/p>\n\n\n\n

\n\n\n\n

Simple iframe Code for the QR Code Generator<\/h2>\n\n\n\n

The simplest version looks like this:<\/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
This loads the QR code generator with the default settings. The width is set to 100%<\/code>, so the iframe adapts to the available width of your content area.<\/p>\n\n\n\n
\n\n\n\n
Embed the QR Code Generator in English<\/h2>\n\n\n\n
To display the generator in English, use the lang=en<\/code> parameter:<\/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
This option is ideal for English-speaking websites, international blogs, SaaS tools, and business websites.<\/p>\n\n\n\n
\n\n\n\n
Embed the QR Code Generator in German<\/h2>\n\n\n\n
For German websites, use the lang=de-DE<\/code> parameter:<\/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
This allows the same QR code generator to be used on German-language websites as well.<\/p>\n\n\n\n
\n\n\n\n
Choose a Layout: classic or vertical<\/h2>\n\n\n\n
The iframe generator supports different layout options. The layout can be controlled with the layout<\/code> parameter.<\/p>\n\n\n\n
Classic Layout<\/h3>\n\n\n\n
The classic layout displays the form and the QR code output next to each other. It works especially well for wider content areas, desktop views, and landing pages.<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=en&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
The vertical layout displays the content below each other. It is especially useful for narrow content areas, mobile views, or pages with a compact layout.<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=en&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
Customize the iframe Generator Color<\/h2>\n\n\n\n
You can also customize the main color of the generator directly through the URL. Use the color_primary<\/code> parameter for this. The color value must be passed as a hex code without the hash symbol.<\/p>\n\n\n\n
Example with dark blue:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=en&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
More color examples:<\/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
This makes it easy to adapt the QR code generator to the design of your own website.<\/p>\n\n\n\n
\n\n\n\n
Combine All Options<\/h2>\n\n\n\n
Language, layout, and color can be combined in one iframe URL. This gives you a customized version of the generator:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=en&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
Or with the vertical layout:<\/p>\n\n\n\n
<iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=en&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
Available URL Parameters<\/h2>\n\n\n\n
Parameter<\/th>Example<\/th>Function<\/th><\/tr><\/thead>
lang<\/code><\/td>en<\/code>, de-DE<\/code><\/td>Sets the language of the generator.<\/td><\/tr>
layout<\/code><\/td>classic<\/code>, vertical<\/code><\/td>Controls how the generator is displayed.<\/td><\/tr>
color_primary<\/code><\/td>00008B<\/code><\/td>Sets the main color of the generator.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
How to Embed the QR Code Generator in WordPress<\/h2>\n\n\n\n
In WordPress, the iframe code can be added very easily. No additional plugin is required.<\/p>\n\n\n\n
    \n
  1. Open your WordPress page or post<\/li>\n\n\n\n
  2. Add a new block<\/li>\n\n\n\n
  3. Select the Custom HTML<\/strong> block<\/li>\n\n\n\n
  4. Paste the iframe code<\/li>\n\n\n\n
  5. Save or publish the page<\/li>\n<\/ol>\n\n\n\n
    Recommended WordPress iframe code:<\/p>\n\n\n\n
    <iframe\n  src=\"https:\/\/freeqrco.de\/iframe.php?lang=en&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
    Why height=“100%“ Often Does Not Work with iframes<\/h2>\n\n\n\n
    Many users try to embed an iframe with height=\"100%\"<\/code>. However, this often does not work as expected. The reason is that 100%<\/code> refers to the height of the parent element. If the parent element does not have a defined height, the browser cannot calculate the iframe height correctly.<\/p>\n\n\n\n
    For this reason, a fixed height is recommended. For the classic layout, 900<\/code> to 1000<\/code> pixels usually works well. For the vertical layout, 1100<\/code> to 1300<\/code> pixels may be a better choice.<\/p>\n\n\n\n
    \n\n\n\n
    Benefits of the iframe Integration<\/h2>\n\n\n\n