SA.Automate.QRcode

QR code generation actions for Umbraco Automate, powered by QRCoder. Generate a QR code for any value as part of an automation workflow.

Sample QR code

What's included

Component	What it does
QR Code connection type	Registers the connection the two actions below run under. Nothing to configure.
Generate QR Code action	Encodes a value (URL, text, tel:/mailto:/etc.) as a QR code — SVG markup or base64 PNG.
Save QR Code to Media action	Saves a generated QR code as a real Media item (Image or Vector Graphics (SVG)).
QR Code Viewer property editor	Read-only content property that displays a QR code written to it by a workflow.
<qr-code> Tag Helper	Renders an already-generated QR code string as an <img> or inline <svg> in a Razor view.
QrCodeValue property value converter	Lets Razor views read a QR Code Viewer property as a strongly-typed QrCodeValue instead of a raw string.

What can this be used for?

This package is useful when you want to generate a QR code inside an Umbraco Automate workflow, for example:

• Content workflows: generate a QR code for a page URL whenever content is published, and store it alongside the content.
• Notifications: embed a QR code linking to a page in an email or message sent by another action.
• Print/export flows: produce a scannable code for a URL, reference number, or other value as part of a larger export or document-generation automation.

The value isn't limited to URLs — anything a QR scanner understands works, e.g.:

• A URL, with the domain prefixed since content URLs are relative: https://www.example.com${ steps.getContent.url }
• A phone number: tel:+441234567890
• An email address: mailto:someone@example.com
• An SMS: sms:+441234567890
• Wi-Fi credentials: WIFI:S:MyNetwork;T:WPA;P:MyPassword;;
• A vCard, for a scannable contact card: BEGIN:VCARD;VERSION:3.0;FN:Jane Doe;TEL:+441234567890;EMAIL:jane@example.com;END:VCARD — see the note under Generate QR Code about how vCard line breaks are handled.
• Or just plain text

Installation

dotnet add package SA.Automate.QRcode

No further setup required. The composer registers itself automatically via Umbraco's IComposer discovery.

Connection types

This package registers a single QR Code connection type. There's nothing to configure — no API key or external service, since QR codes are generated locally.

Setup

1. Create the connection in the backoffice

1. Go to Automate → Connections and create a new QR Code connection.
2. Give the connection a name.
3. Click Test connection to verify it's registered correctly.

Usage

Generate QR Code produces a string — SVG markup or base64 PNG — that on its own isn't attached to anything. There are two ways to get it onto a content item, and which one you want depends on what happens to it next:

Option 1: Store the string directly (recommended default)

Generate QR Code → Update Content Property → QR Code Viewer

The generated string is written straight onto a content property that uses the QR Code Viewer editor, which displays it. No Media item is created and no file is written to disk — just a string on the content item. Use this unless you specifically need a Media item, per Option 2.

Bind QrCode for the image on its own, or QrCodeViewerValue if you also want the encoded value displayed as text underneath it.

Option 2: Save it as a Media item

Generate QR Code → Save QR Code to Media → Update Content Property (bind MediaUdi to a Media Picker property)

The string is converted into a real Media item (an Image or a Vector Graphics (SVG), depending on the output format), which then needs to end up somewhere it can be referenced from — typically bound onto a Media Picker property. Reach for this when the QR code needs to behave like any other piece of media: browsable in the Media library, referenced from a Media Picker property, or reused by pointing more than one content item at the same media item.

Generate QR Code

Add the Generate QR Code action to any automation and select the connection to use. Available fields:

Field	Description
Value	The value to encode as a QR code — a URL, tel:/mailto:/sms: link, plain text, or anything else a scanner understands. Supports ${ binding } expressions. Max 2000 characters.
Output Format	Optional. Svg or RawBase64Png. Defaults to Svg if left unset.
Size (pixels per module)	Optional. The size of each QR module in pixels, from 1 to 50. Only applies to PNG output. Defaults to 20.
Error Correction Level	Optional. L, M, Q, or H. Higher levels tolerate more damage/obstruction but produce denser codes. Defaults to Q.
Dark Color	Optional. The color of the dark modules, e.g. #000000. Defaults to black.
Light Color	Optional. The color of the light modules, e.g. #FFFFFF. Defaults to white.
Include Quiet Zone	Draws the standard padding around the QR code, which most cameras need to scan it reliably. Defaults to on — turn off if the code will be embedded somewhere that already provides its own framing.

The action outputs the following, which can be referenced via bindings in later workflow steps:

Output	Description
Value	The value that was encoded in the QR code.
OutputFormat	The output format the QR code was rendered in, e.g. RawBase64Png.
QrCode	The generated QR code content: a raw base64 PNG string, or SVG markup, depending on the output format.
MimeType	The MIME type of the generated QR code, e.g. image/png or image/svg+xml.
QrCodeViewerValue	A JSON payload combining Value and QrCode ({"value":"...","qrCode":"..."}). Bind this instead of QrCode onto a QR Code Viewer property to also display the encoded value as text underneath the code.

vCard line breaks: a vCard needs one property per line (BEGIN:VCARD, VERSION:3.0, FN:..., TEL:..., etc.) to scan as a contact card in most apps, but Value — like Update Content Property and every other Automate field that writes to it — only accepts a plain string, not a text area, so there's no way to type or bind in real line breaks. To work around that, if Value starts with BEGIN:VCARD, this action automatically inserts a line break before each property it recognizes before encoding it into the QR code. This is a best-effort fix, not a full vCard parser — properties separated by a space, comma, or semicolon split correctly, but a property value that runs directly into the next property's name with no separator at all can't be told apart from it, so that boundary is left unsplit.

Save QR Code to Media

Add the Save QR Code to Media action to save a generated QR code as an actual Media item — useful for feeding it into a Media Picker property, or anywhere else that needs a real media reference rather than a raw string. Available fields:

Field	Description
Value	The QR code content to save as media — typically bound from Generate QR Code's QrCode output. Accepts raw base64 PNG or SVG markup.
Media Folder	Optional. The folder to save the media item in. Leave unset to save at the root of the Media library.
File Name	Optional. The name for the media item, without extension — the correct extension is added automatically. Leave unset to auto-generate one. Supports ${ binding } expressions.

PNG content is saved as an Image media item; SVG content is saved as a Vector Graphics (SVG) media item — Umbraco's built-in media type for SVGs.

The action outputs the following, which can be referenced via bindings in later workflow steps:

Output	Description
MediaId	The numeric Id of the created media item.
MediaKey	The Key (GUID) of the created media item.
MediaUdi	The media item's UDI, e.g. umb://media/.... Bind this directly into a Media Picker property — no formatting needed.

Typical chain: Generate QR Code → Save QR Code to Media (bind QrCode to Value) → Update Content Property on a Media Picker property (bind MediaUdi).

Property editors

This package also registers a QR Code Viewer content property editor. It's read-only: it displays a QR code image on a content item and offers a Remove button to clear it, but there's no text box to type or paste a value into — the value has to be written by a workflow.

Setup

1. In Settings → Data Types, create a new Data Type using the QR Code Viewer editor.
2. Add it to a Document Type property.
3. In an Automate workflow, add a Generate QR Code action, then an Update Content Property action bound to its QrCode output, targeting that property.

Once the workflow runs and the content is saved, the property displays the generated QR code. Editors can remove it (and save/publish) to clear it, but can't set a new value directly — that always goes through the workflow.

Bind QrCodeViewerValue instead of QrCode in step 3 to also show the encoded value as text underneath the code — handy when the code alone (e.g. a URL) isn't obviously meaningful at a glance.

Rendering in views

This package also registers a <qr-code> Tag Helper for rendering an already-generated QR code on the front end. It doesn't generate anything itself — no QRCoder call, no Automate involved — it just renders whatever it's given as an <img> or inline <svg>, whichever the code actually is. value accepts any of:

• A raw code string — e.g. Generate QR Code's QrCode output.
• The {"value":"...","qrCode":"..."} JSON payload from QrCodeViewerValue.
• A QrCodeValue instance.

In every case, only the code is rendered — the encoded value (where present) is ignored.

Register it once in _ViewImports.cshtml:

@addTagHelper *, SA.Automate.QRcode

Then use it in any view:

<qr-code value="@Model.Value<string>("qrCode")" class="qr-code" width="200" height="200" alt="Scan to view" />

value and alt are the only special attributes — everything else you write on the tag (class, width, height, data-*, or anything else) passes straight through to the rendered element.

Strongly-typed access in Razor

This package also registers an IPropertyValueConverter for the QR Code Viewer editor, so instead of reading the raw string and having to know whether it's a plain code or the QrCodeViewerValue JSON payload, you can read a strongly-typed QrCodeValue (in SA.Automate.QRcode.PropertyEditors) with QrCode and Value properties — Value is null unless the property was populated from QrCodeViewerValue:

@using SA.Automate.QRcode.PropertyEditors
@{ var qrCode = Model.Value<QrCodeValue>("qrCode"); }

<qr-code value="@qrCode" class="qr-code" width="200" height="200" alt="Scan to view" />
@if (qrCode?.Value is not null)
{
    <p>@qrCode.Value</p>
}

With ModelsBuilder, the generated model exposes the property as a QrCodeValue directly — no Model.Value<T>() call needed:

<qr-code value="@Model.QrCode" class="qr-code" width="200" height="200" alt="Scan to view" />
@if (Model.QrCode?.Value is not null)
{
    <p>@Model.QrCode.Value</p>
}

Inline SVG has no native alt attribute, so when the underlying value is SVG markup, alt is applied as role="img" aria-label="..." on the <svg> instead — same accessibility intent as an <img alt>, just via the SVG-appropriate mechanism.

Compatibility

Package version	Umbraco Automate	Umbraco CMS
1.x	17.x – 18.x	17.x – 18.x

Links

• Source code
• Report an issue
• QRCoder documentation