DEV Community

loading...
Cover image for QR Codes for Scheduling and Bookings

QR Codes for Scheduling and Bookings

spurwing profile image Spurwing ・2 min read

QR codes allow us to embed/encode information as an image, which we all know as this large square filled with smaller black and white squares. The science and math behind QR codes isn't very easy, but there are a ton of articles and videos on YouTube that explain the process.

business card qr code generator

All modern phones have a built-in QR Code Scanner which decodes the information. If the encoded data was just text, your phone will show the message, but if it's an URL then it will prompt you to open it in the browser. It's a great way to promote your website or project. But we can also use it for embedding email addresses or special app events.

You can use our open source GitHub repository which allows you to generate QR codes using various parameters, Live demo here.

QR code website javascript

The file index.html contains the JavaScript code for encoding plain text to a QR code image.

function update_qrcode(text) {
  text = text.replace(/^[\s\u3000]+|[\s\u3000]+$/g, '');
  console.log(text, text.length)
  document.getElementById('qr').innerHTML =
    create_qrcode(text, 4, 'M', 'Byte', 'UTF-8');
};

function create_qrcode(text, version, ECL, mode, mb) {
  qrcode.stringToBytes = qrcode.stringToBytesFuncs[mb];
  let qr = qrcode(version || 4, ECL || 'M');
  qr.addData(text, mode);
  qr.make();
  // return qr.createImgTag();
  return qr.createSvgTag();
};
Enter fullscreen mode Exit fullscreen mode

The default settings allow you to encode 62 characters, which is usally enough for a simple URL or message. If you need to encode longer texts you can tweek the settings (version and ECL) using this reference sheet. The library we used for QR code generation is this one.

Since QR codes can encode URLs, we can encode a link pointing to our Appointment Scheduling or Availability Page. For instance our page on Spurwing which allows users to book a demo call: https://www.spurwing.io/learn-more

Similarly you can encode your email address as such mailto:ilya@spurwing.io When scanning that QR code your device will prompt you to open the Email app with your email in the recipient field.

Conclusion

QR codes are a wonderful technological invention. Unfortunately they are not (yet) very common in the west, but in Asia they are used like crazy.

Discussion (0)

Forem Open with the Forem app