QR Code Syntax

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:

{
  "MyQRCode": {
    "_type": "qrcode",
    "data": "https://templatedocs.io"
  }
}

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

QR Code Example

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:

{
  "MyPlaceholder": {
    "_type": "qrcode",
    "data": "https://templatedocs.io"
  }
}

QR Code Properties

PropertyTypeDescription
_typestringMust be set to "qrcode"
datastringRequired. Text to encode in the QR code
sizenumberOptional. Width and height of the QR code in pixels (QR codes are always square)
colorstringOptional. Foreground color in hex format (e.g. "#000000"). Default is black
backgroundstringOptional. Background color in hex format (e.g. "#ffffff"). Default is white
marginnumberOptional. Margin around the QR code in pixels. Default is 4

Examples

Simple QR Code

{
  "WebsiteQR": {
    "_type": "qrcode",
    "data": "https://templatedocs.io/docs/intro"
  }
}

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

Simple QR Code Example

Custom Styled QR Code

{
  "ContactQR": {
    "_type": "qrcode",
    "data": "https://templatedocs.io/docs/syntax/qrcodes",
    "size": 200,
    "color": "#2563eb",
    "background": "#e2e8f0",
    "margin": 8
  }
}

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

Styled QR Code Example

Common Use Cases

{
  "EmailQR": {
    "_type": "qrcode",
    "data": "mailto:hello@templatedocs.io"
  }
}

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

Email QR Code Example

Phone Numbers

{
  "PhoneQR": {
    "_type": "qrcode",
    "data": "tel:+1234567890"
  }
}

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

Phone QR Code Example
{
  "SMSQR": {
    "_type": "qrcode",
    "data": "sms:+1234567890"
  }
}

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

SMS QR Code Example

WiFi credentials

{
  "WiFiQR": {
    "_type": "qrcode",
    "data": "WIFI:T:WPA;S:MyNetwork;P:password123;H:false;;"
  }
}

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

WiFi QR Code Example

Google Maps

{
  "GoogleMapsQR": {
    "_type": "qrcode",
    "data": "https://maps.google.com/?q=Eiffel+Tower"
  }
}

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

Google Maps QR Code Example

Contact information

{
  "ContactQR": {
    "_type": "qrcode",
    "data": "MECARD:N:John Doe;EMAIL:john.doe@example.com;TEL:+1234567890;URL:https://example.com;;",
  }
}

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

Contact QR Code Example