QR code generator

Need to link users in the real world to your website or online resources?

In this example, we'll build an Interval tool to generate QR codes with just a few lines of code. Anyone in your organization will be able to generate the codes, and they'll continue to work forever with no dependancy on external redirects.

Get started with this example

interval.com

Try it out

To create a fresh project based off this example, run:

npm

npx create-interval-app --template=qr-codes

yarn

yarn create interval-app --template=qr-codes

The full source code for this tool can also be found in our examples repo.

How it works

This example uses the qrcode Node library for generating QR codes, and depends on Interval for collecting input to and displaying the generated image.

First, we'll build on a basic Interval action by collecting the desired URL for the QR code via io.input.url.

import { Action, io } from "@interval/sdk";

export default new Action(async () => {
  const url = await io.input.url("URL for the QR code to link to", {
    placeholder: "https://example.com",
  });
});

When an Interval user in your organization runs this action, we'll collect the requested URL before running the remainder of your action's code.

Next we'll import our QR code Node library and use it to generate a code for the provided URL. Since Interval supports rendering images to the person running the action via a simple Node Buffer, there's no need to save or manage the image outside of our action handler.

import { Action, io } from "@interval/sdk";
import QRCode from "qrcode";

export default new Action(async () => {
  const url = await io.input.url("URL for the QR code to link to", {
    placeholder: "https://example.com",
  });

  const buffer = await QRCode.toBuffer(url.toString());
});

Finally, we'll leverage Intervals io.display.image method to display the generated code to the person running the action. They'll be able to download it and utilize the code wherever it is needed.

import { Action, io } from "@interval/sdk";
import QRCode from "qrcode";

export default new Action(async () => {
  const url = await io.input.url("URL for the QR code to link to", {
    placeholder: "https://example.com",
  });

  const buffer = await QRCode.toBuffer(url.toString());

  await io.display.image("Generated QR code", { buffer });
});

API methods used

• io.input.url
• io.display.image

Was this section useful?