Using QR Codes

Last updated March 23, 2026

Adding QR codes to PDF documents is a common requirement for invoices, shipping labels, event tickets, and more. PDFMonkey supports several JavaScript libraries that let you generate QR codes directly inside your templates with full control over style and content.

Paid account only

This technique uses JavaScript and is thus only usable on a paid account or during your 30-day trial.

qr-code-styling (recommended)

qr-code-styling is the library we use in the PDFMonkey Builder. It offers the most customization: multiple dot styles (square, dots, rounded, classy…), corner styles, custom colors, error correction levels, and even a centered logo.

<script src="https://cdn.jsdelivr.net/npm/qr-code-styling@^1.6/lib/qr-code-styling.js"></script>

<div id="qrcode"></div>

<script type="text/javascript">
  var qrCode = new QRCodeStyling({
    width: 200,
    height: 200,
    data: "https://pdfmonkey.io/",
    margin: 0,
    dotsOptions: {
      type: "rounded",
      color: "#0ea5e9"
    },
    cornersSquareOptions: {
     type: "extra-rounded"  // square, dot, extra-rounded
    }
  });

  qrCode.append(document.getElementById("qrcode"));
</script>

You can also add a logo in the center of the QR code by passing image and imageOptions:

<script src="https://cdn.jsdelivr.net/npm/qr-code-styling@^1.6/lib/qr-code-styling.js"></script>

<div id="qrcode"></div>

<script type="text/javascript">
  var qrCode = new QRCodeStyling({
    width: 200,
    height: 200,
    data: "https://pdfmonkey.io/",
    margin: 0,
    dotsOptions: {
      type: "rounded",
      color: "#0ea5e9"
    },
    cornersSquareOptions: {
     type: "extra-rounded"  // square, dot, extra-rounded
    },

    image: "https://example.com/logo.png",
    imageOptions: {
      imageSize: 0.4,
      margin: 4,
      crossOrigin: "anonymous"
    },
    qrOptions: {
      errorCorrectionLevel: "Q"  // use Q or H when adding a logo
    }
  });

  qrCode.append(document.getElementById("qrcode"));
</script>

QR code generated with qr-code-styling

bitjson/qr-code

This library offers a very simple web-component you can use to insert a QR Code in your document. It has no dependencies so you can simply link to the library using a CDN and insert the component in your code:

<script src="https://cdn.jsdelivr.net/npm/@bitjson/qr-code@^1.0/dist/qr-code.js"></script>

<!--
  contents: the text to transform
  module-color: color of the dots
  position-ring-color: color of the large surrounding squares
  position-center-color: color of the small surrounding squares
-->
<qr-code
  contents="https://pdfmonkey.io/"
  module-color="#0ea5e9"
  position-ring-color="#db7222"
  position-center-color="#27db22"
  style="width: 200px;"
></qr-code>

Avoid animations

Animations and PDF rendering usually don’t play nice. Avoid copy/pasting pieces of code that use animation, or removing the animation part, otherwise the QR Code might not finish its animation before “printing”, resulting in an absent or incomplete QR Code.

Dots-only

The main drawback of this library is that you’re stuck with the style of the dots. You can only get circles.

QRCode.js

For a more “classic” looking QR Code, the QRCode.js library is a good option. It doesn’t offer much customization but it should be good enough in most cases.

<script src="https://cdn.jsdelivr.net/npm/qrcodejs@^1.0/qrcode.min.js"></script>

<div id="qrcode"></div>

<script type="text/javascript">
  new QRCode(
    document.getElementById("qrcode"),
    {
      text: "http://pdfmonkey.io/",
      width: 200,
      height: 200,
      correctLevel: QRCode.CorrectLevel.L
    }
  );
</script>

All three libraries work with PDFMonkey’s PDF rendering engine. To learn more about loading and using JavaScript in your templates, see Custom JavaScript.

Frequently asked questions

How do I add a QR code to a PDFMonkey PDF?
Include a JavaScript QR code library via a CDN script tag in your HTML. PDFMonkey supports qr-code-styling (recommended), bitjson/qr-code, and QRCode.js. A paid plan or active trial is required because external scripts are needed.
Which QR code library should I use with PDFMonkey?
qr-code-styling is recommended. It offers the most customization — dot styles, corner styles, custom colors, error correction levels, and the ability to embed a logo in the center of the QR code.
Can I add a logo inside a QR code in PDFMonkey?
Yes. Use the qr-code-styling library and pass the image and imageOptions properties. Set the error correction level to Q or H so the QR code remains scannable with the logo overlay.
Navigation