Skip to content

Including QR codes

If you want to include a QR code in your document, you can use the following libraries:

  1. qr-code-styling
  2. qrcode

If you want more control over the QR code styling, we recommend using qr-code-styling. If you want a simple QR code, you can use qrcode.

Using qr-code-styling

To include a QR code in your document using qr-code-styling, you need to include the JSON configuration object in a qr-config tag.

Tip

The maintainer of qr-code-styling provides a web-based editor to help you generate the JSON configuration object.

The qr-config should target the ID of the div element where the QR code will be rendered. The class attribute should be set to qr-code-styling.

Here is an example of how to include a QR code in your document:

<div id="myQR"></div>
<qr-config target="myQR" class="qr-code-styling">
{
    "width": 300,
    "height": 300,
    "data": "https://qr-code-styling.com",
    "margin": 0,
    "qrOptions": {
        "typeNumber": "0",
        "mode": "Byte",
        "errorCorrectionLevel": "Q"
    },
    "imageOptions": {
        "hideBackgroundDots": true,
        "imageSize": 0.4,
        "margin": 0
    },
    "dotsOptions": {
        "type": "extra-rounded",
        "color": "#6a1a4c"
    },
    "backgroundOptions": {
        "color": "#ffffff"
    },
    "dotsOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#6a1a4c",
            "color2": "#6a1a4c",
            "rotation": "0"
        }
    },
    "cornersSquareOptions": {
        "type": "extra-rounded",
        "color": "#000000"
    },
    "cornersSquareOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#000000",
            "color2": "#000000",
            "rotation": "0"
        }
    },
    "cornersDotOptions": {
        "type": "",
        "color": "#000000"
    },
    "cornersDotOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#000000",
            "color2": "#000000",
            "rotation": "0"
        }
    },
    "backgroundOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#ffffff",
            "color2": "#ffffff",
            "rotation": "0"
        }
    }
}
</qr-config>


<div id="myQR"></div>
<qr-config target="myQR" class="qr-code-styling">
{
    "width": 300,
    "height": 300,
    "data": "$payload.url",
    "margin": 0,
    "qrOptions": {
        "typeNumber": "0",
        "mode": "Byte",
        "errorCorrectionLevel": "Q"
    },
    "imageOptions": {
        "hideBackgroundDots": true,
        "imageSize": 0.4,
        "margin": 0
    },
    "dotsOptions": {
        "type": "extra-rounded",
        "color": "#6a1a4c"
    },
    "backgroundOptions": {
        "color": "#ffffff"
    },
    "dotsOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#6a1a4c",
            "color2": "#6a1a4c",
            "rotation": "0"
        }
    },
    "cornersSquareOptions": {
        "type": "extra-rounded",
        "color": "#000000"
    },
    "cornersSquareOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#000000",
            "color2": "#000000",
            "rotation": "0"
        }
    },
    "cornersDotOptions": {
        "type": "",
        "color": "#000000"
    },
    "cornersDotOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#000000",
            "color2": "#000000",
            "rotation": "0"
        }
    },
    "backgroundOptionsHelper": {
        "colorType": {
            "single": true,
            "gradient": false
        },
        "gradient": {
            "linear": true,
            "radial": false,
            "color1": "#ffffff",
            "color2": "#ffffff",
            "rotation": "0"
        }
    }
}
</qr-config>
For this to work, your payload object should include the url property. Here is an example of how the payload should look: 
{
  // other data...
  "url": "https://qr-code-styling.com"
  // more data...
}

Using qrcodejs

To include a QR code in your document using qrcode, you need to include the JSON configuration object in a qr-config tag.

The qr-config should target the ID of the div element where the QR code will be rendered. The class attribute should be set to qrcodejs.

Here is an example of how to include a QR code in your document:

<div id="qrcode"></div>
<qr-config target="qrcode" class="qrcodejs">
{
    "text": "http://jindo.dev.naver.com/collie",
    "width": 128,
    "height": 128,
    "colorDark": "#000000",
    "colorLight": "#ffffff",
    "version": 10
}
</qr-config>


<div id="qrcode"></div>
<qr-config target="qrcode" class="qrcodejs">
{
    "text": "$payload.url",
    "width": 128,
    "height": 128,
    "colorDark": "#000000",
    "colorLight": "#ffffff",
    "version": 10
}
</qr-config>
For this to work, your payload object should include the url property. Here is an example of how the payload should look: 
{
  // other data...
  "url": "http://jindo.dev.naver.com/collie"
  // more data...
}