QR Code Generator

Design help Custom code
1

Hello friends,

I want to create a QR Code Generator like this: QR Code Generator | CodingNepal. I have an idea of how to do it, but I’m having trouble figuring out the exact syntax since w-ebflow adds additional classes.

Here’s my site Read-Only: https://qrcg.webflow.io/

I basically need to know how to set up those query selectors. I tried lots of combinations, but I’ve come to realize it’s beyond my expertise. :persevere:

Thanks in advance if anyone is able to help. :slight_smile:

2

Hey Danny, do you mean to generate a QR containing a plaintext message?

4

The example provided allows you to generate whatever you want. URL, link, message or whatever.

5

I will contact you shortly.

6

UPDATE: made the demo cloneable and changed the site name

1 Like
7

Did my post yesterday answer your question?

8

Yes it did. Thank you! Sorry for the delayed response. Working crazy hours.

10

Thank you for sharing this!

14

This is broken now as Google Charts no longer supports QR codes. Anyone have any new suggestions?

UPDATE:

Here’s a way to do this once and for all without needing a 3rd party service. You will need to host a QR code generating JS file somewhere. I use AWS S3 as I load several external JS files. The other main one being a light embedded YouTube handler/player. There’s probably some CDN that already has this file hosted or something similar that you can just link to.

The QR library I use is qr-code-generator on npm. I’ve been using this for years in another project. You can download/copy the raw JS file here. I took this file and manually minified it on the web, so it would be smaller.

Then on your webflow page’s settings in the Before </body> tag section, add/tweak the following example code:

<!-- 
Load minified QR code library from our AWS S3 libs bucket.
This goes at the end so we don't need to defer/async it. It can
block until loaded as we don't want the following code to run if
the library isn't loaded.
-->
<script type="text/javascript" src="<your_host>/js/qrcode_min.js"></script>

<script>
  //  This calls the qr code generator to generate the QR codes
  const url = "<the_url_to_encode_in_the_qr>";
  const typeNumber = 0;
  const errorCorrectionLevel = 'L';
  const qr = qrcode(typeNumber, errorCorrectionLevel);
  qr.addData(url);
  qr.make();
  const cellSize = 10;
  const margin = 0;
  const qrCodeDataURL = qr.createDataURL(cellSize, margin)
  document.getElementById('qrCode1').src = qrCodeDataURL;
</script>

The element defined by qrCode1 is an <img> tags where I set the width and height.

The most important line of the above is qr.createDataURL(cellSize, margin). The cellSize is the fidelity of the cells of the QR code. The larger your display size is of the QR code, the larger cellSize you’ll need. The margin is just a margin around the generate QR code. You can leave this as zero if you’re adding your own margin on the <img> tag.

15

Thanks Ross, I’ll update at some point.

At the moment my favorite solutions are CDN-served client-side QR generation libraries. There are a ton of them. You don’t need a server-hosted solution.

1 Like