Barcodes & QR Codes
You can add barcodes and QR codes to your templates to generate scannable codes in your PDFs. Both support dynamic variables, so each generated PDF can have a unique code.
Barcodes
Barcodes encode text or numbers as a series of vertical lines. Use them for tracking numbers, product codes, SKUs, or any identifier that needs to be machine-readable.
To add a barcode, select a container in the Layers panel, click + New Element, and choose Barcode.
Setting the value
In the right panel, enter the value to encode in the Content field. You can type a static value or use a variable like {{tracking_number}}.
Barcode formats
Choose the format that matches your use case:
| Format | Use case | Value format |
|---|---|---|
| Code 128 | General purpose — letters, numbers, symbols | ABC-123456 |
| Code 39 | Industrial — uppercase letters and numbers only | SHIP12345 |
| EAN-13 | Retail products — exactly 13 digits | 5901234123457 |
| EAN-8 | Small product packaging — exactly 8 digits | 96385074 |
| ITF-14 | Shipping cartons — exactly 14 digits | 15400141288763 |
Code 128 is the most flexible and works for most situations.
Customization
- Line color — Color of the bars (default is black)
- Size — Drag the handles to resize the barcode on the canvas
QR Codes
QR codes encode data in a 2D square pattern. They can hold more information than barcodes and are easily scanned with a phone camera. Use them for URLs, payment links, ticket verification, or any data you want to make quickly accessible.
To add a QR code, select a container, click + New Element, and choose QR Code.
Setting the value
Enter the data to encode in the Content field of the right panel. This can be a URL, plain text, or a variable like {{payment_url}}.
Customization
- Foreground — Color of the dark squares (default: dark gray
#111827) - Background — Color of the light squares (default: white)
- Error Correction — How much of the code can be damaged and still scan:
| Level | Recovery | When to use |
|---|---|---|
| L (Low) | ~7% | Clean environments, maximum data capacity |
| M (Medium) | ~15% | General purpose — good default |
| Q (Quartile) | ~25% | Documents that may be folded or slightly worn |
| H (High) | ~30% | Harsh conditions, or if you plan to place a logo over the QR code |
Sizing
QR codes should be at least 2cm × 2cm for reliable scanning. If the code encodes a long URL, it becomes more dense — in that case, make it larger so scanners can read it comfortably.
Dynamic codes
Both barcodes and QR codes work with template variables. Set the Content field to a variable like {{tracking_number}} or {{payment_url}}, then pass the actual value through the API. Each generated PDF gets its own unique code.
This is commonly used for:
- Shipping labels — Barcode with the tracking number, QR code linking to the tracking page
- Invoices — QR code with the payment link
- Event tickets — QR code with a unique ticket ID for scanning at entry
- Product labels — Barcode with the SKU, QR code linking to the product page
- Certificates — QR code with a verification URL to confirm authenticity
Next steps
- Data Binding — How to pass dynamic values to your templates
- Components — Overview of all element types
- Styling — Customize the appearance of your elements