QR Codes

It's easy to add QR codes to your documents with TemplateDocs. The QR code tag syntax is the same as a simple text tag:

{{ MyQRCode }}

Provide the QR code details in your JSON data using the QR code object structure shown below:

This preview shows the tag fields as they appear in the TemplateDocs UI.

This will create a QR code that encodes "https://templatedocs.io" with default settings (black on white, 4px margin, auto-sized).

Generated QR code encoding https://templatedocs.io with the default black on white style

Using Image Placeholders

QR codes can also be inserted using image placeholders. This allows you to replace existing images in your template with generated QR codes. To mark an image as a placeholder, insert a tag in its alt text. Then use the same JSON data as you would for a regular QR code tag. For example:

This preview shows the tag fields as they appear in the TemplateDocs UI.

QR Code Properties

PropertyTypeDescription
_typestring
Must be set to "qrcode"
datastring
Required. Text to encode in the QR code
sizenumber
Optional. Width and height of the QR code in pixels (QR codes are always square)
colorstring
Optional. Foreground color in hex format (e.g. "#000000"). Default is black
backgroundstring
Optional. Background color in hex format (e.g. "#ffffff"). Default is white
marginnumber
Optional. Margin around the QR code in pixels. Default is 4

Examples

Simple QR Code

This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a QR code with default settings (black on white, 4px margin, auto-sized).

Generated QR code encoding https://templatedocs.io/docs with default settings

Custom Styled QR Code

This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a blue QR code on a light gray background with custom size and margin.

Generated blue QR code on a light gray background with a wider margin

Common Use Cases

This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a QR code that allows users to send an email when scanned.

Generated QR code that opens a new email to hello@templatedocs.io when scanned

Phone Numbers

This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a QR code that allows users to call the number when scanned.

Generated QR code that dials a phone number when scanned
This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a QR code that allows users to send an SMS message when scanned.

Generated QR code that opens a new SMS to a phone number when scanned

WiFi credentials

This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a QR code that allows users to automatically connect to a WiFi network when scanned.

Generated QR code that connects to the MyNetwork WiFi network when scanned

Google Maps

This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a QR code that allows users to view a Google Maps location when scanned.

Generated QR code that opens the Eiffel Tower in Google Maps when scanned

Contact information

This preview shows the tag fields as they appear in the TemplateDocs UI.

This creates a QR code that allows users to save contact information when scanned.

Generated QR code that adds John Doe as a contact (MECARD) when scanned