|
| 1 | +--- |
| 2 | +title: QR Code |
| 3 | +slug: template-editor/blocks/qr-code |
| 4 | +description: Encode URLs or text as QR codes, with variable content, colors, and error correction settings. |
| 5 | +--- |
| 6 | +import CommonBlockOptions from '../../../../components/CommonBlockOptions.astro'; |
| 7 | + |
| 8 | +<a id="qr-code-block" /> |
| 9 | + |
| 10 | +Use QR Code blocks to add scannable links or text to product cards, event graphics, certificates, and other templates. Choose **QR Code** in the left sidebar, then edit **Content** in the right sidebar. |
| 11 | + |
| 12 | +## How it works |
| 13 | + |
| 14 | +The block encodes its Content as a QR code and renders it as SVG in the template. Enter a URL such as `https://example.com/event`, or any non-empty text. The encoded content can come from a variable, so each generated image can have a different QR code. |
| 15 | + |
| 16 | +New blocks start at 240 × 240 pixels with a locked square aspect ratio, black modules, and a white background. The default Content is `https://htmlcsstoimage.com`. |
| 17 | + |
| 18 | +<CommonBlockOptions /> |
| 19 | + |
| 20 | +## Block-specific properties |
| 21 | + |
| 22 | +| Property | Details | Variables | |
| 23 | +| --- | --- | --- | |
| 24 | +| Content | URL or text to encode. Must not be empty or contain only whitespace. | Yes | |
| 25 | +| Color | Foreground color of the QR modules. Defaults to black (`#000000`). | Yes | |
| 26 | +| Error correction | Low (L), Medium (M), Quartile (Q), or High (H). Defaults to Medium (M). | — | |
| 27 | +| Quiet zone (modules) | Clear margin around all four sides of the code, measured in module widths. Integer from 4 to 32; defaults to 4. | — | |
| 28 | +| Padding | Additional space inside the block edge. Simple mode sets all sides; Advanced mode sets each side. | — | |
| 29 | +| Opacity | Transparency of the whole block, including content and styling. | Yes | |
| 30 | + |
| 31 | +Use the common **Background** controls to change the white background separately from the QR foreground color. |
| 32 | + |
| 33 | +## Error correction and content limits |
| 34 | + |
| 35 | +Higher error correction levels provide more redundancy, but leave less capacity for content and can make the code denser. Medium (M) is the default; choose another level in the right sidebar when needed. |
| 36 | + |
| 37 | +The amount of content that fits depends on the text and selected error correction level. If the editor reports that the content is too long, shorten it or choose a lower error correction level. Fixed content and saved fallback content are validated before saving; variable content is checked when previewing or rendering. |
| 38 | + |
| 39 | +## Quiet zone and sizing |
| 40 | + |
| 41 | +A module is one small square in the QR pattern. The quiet zone reserves a clear margin around the pattern so scanners can distinguish the code from surrounding content. Keep at least the default four modules on every side; padding adds space beyond this margin. |
| 42 | + |
| 43 | +Keep the foreground dark and the background light, leave the quiet zone clear, and use a size that keeps individual modules visible in the final image. Scan the generated image at its intended display or print size to check the result. |
| 44 | + |
| 45 | +## Example usage |
| 46 | + |
| 47 | +To generate a different destination for each image: |
| 48 | + |
| 49 | +1. Add a QR Code block and click the hard-hat icon beside **Content**. |
| 50 | +2. Set its template key to `qr_url` and its variable mode to **Required**. |
| 51 | +3. In the Variables tab, provide a test URL and turn **Preview** on to check the code. |
| 52 | +4. Save the template, then pass the URL in `template_values` when [creating an image with a template](/getting-started/templates/#creating-an-image-with-a-template). |
| 53 | + |
| 54 | +```json |
| 55 | +{ |
| 56 | + "template_id": "YOUR_TEMPLATE_ID", |
| 57 | + "template_values": { |
| 58 | + "qr_url": "https://example.com/events/launch-day" |
| 59 | + } |
| 60 | +} |
| 61 | +``` |
| 62 | + |
| 63 | +Connect Content directly to a property variable rather than putting Handlebars syntax in the field. See [Variables](/template-editor/variables/) for template keys and preview controls. |
| 64 | + |
| 65 | +Use **Fallback** to encode the saved Content when a value is missing or empty. Use **Ignore** to omit the QR block from the generated output when its content is missing or empty. Required content must resolve to a non-empty value that fits at the selected error correction level. |
0 commit comments