How we do QR Codes

  • Why we use JavaScript & QRCodeMap

  • How to do it

  • How to use it on printed material

What is a QRCode?

QRCode is a square shaped collection of dots that are generated by a computer; scanned using a phone’s camera app & parsed (read) giving the user an option to take the action or view the data embedded in the QRCode.

What kind of QRCodes do we use?

Why use JavaScript & QRCode Map

You could make a QR Code point to a URL.

However there’s 3 logistic issues with static QRCodes (codes that map

  • Longer URLs make for denser QR Codes (more dots). More dots means you can’t make the QRCode very very small in on print

  • Not Flexible: Say for instance you have a QRCode on a hand-out that is for one purpose, but later that initiative sunsets (expires) but you still wish to capture all the traffic from that QRCode and redirect it to an appropriate destination. Using the QRCode Map style makes that far easier.

  • Metrics not captured. By going through or redirection map, we can capture metrics (data points) on every QRCode scan, even if those QRCodes are intended to open an website other than ours. Because you CAN print a UNIQUE QRCode VERY TIME you print… you can track which print was scanned.

With the QRCode Map we don’t have to fully retire codes!

Using this technique, we have a small bit of code that is executed when our page starts to load in the browser.

Before the browser has loaded the entire page that was linked to (typically https://ballingercenter.org/) the browser is instructed to review the URL in the address bar and if your qrc=XYZ is found, the code will redirect the address bar to the location you specified.

Let’s Making a QRCode

Step 1: Identify your Target

What is the shortest version of a URL you wish to redirect to?

Said differently: if you’re linking to something off-site

Review the Existing QRCode Map

To view / edit this map, in SquareSpace web editing click Home > Settings > Developer Tools (Advanced) > Code Injection

See the other QRCodes that are in play.

Follow the patterns you observe: creating a unique code

Step 2: Choose your Target

You’ll add an entry to the QRCodeMap for the mapping you wish to create.

Ideally we will use as short-a-url-as-possible.

Let’s go with: this: https://ballingercenter.org/?qrc=AB1

The first part of this is the domain & protocol:

https://ballingercenter.org/ we can’t get much shorter than that.

Next is adding a Query String Parameter (this is data sent to the page you’re trying to load). In this case our only Query String Parameter following the Question Mark “?” is “qrc”

Use a short and not meaningful alpha numeric value

the “value” which is used as the look-up-key in the map, doesn’t need to be special, nor does it need to be symbolic of the content you’re trying to load.

It would help if it was similar to other related materia

When using our QRCode Generator: QR.io, please use URLs like:

https://ballingercenter.org/?qrc=1BA

We can change this any time.

If a userQRCode