Embed QR Code Generator on Your Website

Add a free QR code generator to your website with our embeddable widget. Visitors can generate QR codes directly on your site — no redirects, no signups, no branding.

The widget is completely free. It works on any website — WordPress, Squarespace, Wix, custom HTML, or any other platform. Just paste a single line of code and you're done.

<h2>Quick Start — 30 Seconds</h2>

<p>Add this code to your HTML where you want the QR generator to appear:</p>

<pre><code>&lt;script src="https://qr-ooo-boombatzo.com/assets/qr-embed.js"&gt;&lt;/script&gt; &lt;div data-qr-embed&gt;&lt;/div&gt;</code></pre>

That's it. The widget will automatically load and display a full QR code generator with all modes (link, Wi-Fi, business card, email, WhatsApp).

<h2>Available Modes</h2>

<p>The embed widget supports 5 modes. Set the <code>data-mode</code> attribute to lock it to a specific mode:</p>

<pre><code>&lt;!-- Default: all modes --&gt; &lt;div data-qr-embed&gt;&lt;/div&gt; &lt;!-- Link mode only --&gt; &lt;div data-qr-embed data-mode="link"&gt;&lt;/div&gt; &lt;!-- Wi-Fi mode only --&gt; &lt;div data-qr-embed data-mode="wifi"&gt;&lt;/div&gt; &lt;!-- Business card mode only --&gt; &lt;div data-qr-embed data-mode="card"&gt;&lt;/div&gt; &lt;!-- Email mode only --&gt; &lt;div data-qr-embed data-mode="email"&gt;&lt;/div&gt; &lt;!-- WhatsApp mode only --&gt; &lt;div data-qr-embed data-mode="whatsapp"&gt;&lt;/div&gt;</code></pre>

<h2>Customization Options</h2>

<p>Configure the widget with data attributes:</p>

<pre><code>&lt;div data-qr-embed data-mode="link" data-size="512" data-margin="4" data-prefill="https://example.com" data-logo-url="https://yoursite.com/logo.png" data-logo-size="64" data-logo-margin="8" data-logo-padding="16" data-logo-radius="8" data-logo-bg="#ffffff" data-bg-color="#ffffff" data-fg-color="#000000" data-corner-radius="8" data-padding="16" data-margin-top="24" data-margin-bottom="24" data-margin-left="16" data-margin-right="16" data-hide-download="false" data-hide-clear="false" data-hide-logo="false" data-hide-size="false" data-hide-margin="false" data-hide-corner-radius="false" data-hide-padding="false" data-hide-bg-color="false" data-hide-fg-color="false" data-hide-prefill="false" data-hide-mode="false" data-hide-advanced="false" data-hide-simple="false" &gt;&lt;/div&gt;</code></pre>

<h2>WordPress Installation</h2>

<p>For WordPress sites, add the code using a Custom HTML block:</p>

<ol><li>Open your page or post in the WordPress editor</li><li>Click the + button and add a Custom HTML block</li><li>Paste the embed code</li><li>Preview and publish</li></ol>

Alternatively, add it to your theme's footer.php file before the closing <code>&lt;/body&gt;</code> tag.

<h2>Self-Hosted Option</h2>

<p>If you prefer to host the widget yourself, download the script and host it on your own domain:</p>

<pre><code>&lt;script src="https://yoursite.com/path/to/qr-embed.js"&gt;&lt;/script&gt; &lt;div data-qr-embed&gt;&lt;/div&gt;</code></pre>

Download the widget script from: <a href="/assets/qr-embed.js">/assets/qr-embed.js</a>

<h2>Troubleshooting</h2>

<p><strong>Widget doesn't appear:</strong> Make sure the script tag is before the div tag. Check the browser console for errors.</p>

<p><strong>Styling issues:</strong> The widget uses shadow DOM for styling isolation. It should not conflict with your site's CSS.</p>

<p><strong>Mobile responsiveness:</strong> The widget is fully responsive. It automatically adapts to screen size.</p>