As HTML/CSS/JavaScript exercise I created* a QR code generator, which is embeddable into any website. It’s even usable offline, because it’s just a single HTML file.

Try it

And here’s how you embed it, as example, using the media item right from this post:

<iframe src="https://qrys.ch/wp-content/uploads/2021/11/qr.frameable.inline.html" frameborder="0" scrolling="no" style="overflow: hidden;" width="100%" height="400px"></iframe>

You can also change the sizes or the frame border. The displayed QR code will adapt accordingly on page load. However, only one iframe per page is currently supported.

You may also take the qr.frameable.inline.html and host it on your own server, or just download it to your local file system for offline use.

API

The offered QR code generator supports two request query parameters:

• text, to allow for a custom preset text. Requires URL encoding of the text.
• readonly, to disallow text entry. This may be useful when you just want to present a QR code for a given text.

Here’s an example with a link, which uses the (URL encoded) URL of this post: https://qrys.ch/wp-content/uploads/2021/11/qr.frameable.inline.html?text=https%3A%2F%2Fqrys.ch%2Fan-embeddable-single-file-qr-code-generator%2F&readonly=true

Credits

* To be honest, I just tried to pull the right strings. The QR Code generator page presented here is based on the Javascript QR Encoder by tz@execpc.com, released under GPLv3. It also uses small bits of Bootstrap, jQuery and AngularJS.