Configure barcodes in HTML templates
The HTML Templates feature is generally available for invoices as of Zuora Release 2022.02.R2, and for credit and debit memos as of Zuora Release 2022.05.R1.
In HTML templates, you can configure barcodes by using the Wp_Barcode
merge field. You can use the merge field to specify the barcode types, code text, image size, and code text position.
The Wp_Barcode
merge field accepts at least two lines of contents. The first line specifies barcode options, and the other lines are barcode contents.
The Wp_Barcode
merge field is in the following format:
{{#Wp_Barcode}}
<code_type>[,optionName=optionValue]*
codeContent
{{/Wp_Barcode}}
Supported barcode types and options
The option line used in the Wp_Barcode
merge field is in the following format:
<code_type>[,optionName=optionValue]*
The Wp_Barcode
merge field supports the following barcode types:
- QR_CODE
- CODE_128
- CODE_39
- CODE_39_EXT
- AUSTRALIA_POST_CUSTOMER
- AUSTRALIA_POST_REPLY
- AUSTRALIA_POST_ROUTING
- AUSTRALIA_POST_REDIRECT
- ITF_14
- USPS_ONE_CODE
The Wp_Barcode
merge field supports the following options:
Option name | Default value | Description |
---|---|---|
imageWidth | 300 | Integer, the width of the generated barcode image. |
imageHeight | 300 | Integer, the height of generated barcode image. |
codeTextPosition | BOTTOM |
The position of the text along with the barcode image. The supported option values are |
Usage
You can use the following merge field example to generate a QR code:
{{#Wp_Barcode}}
QR_CODE,imageWidth=100
Hello Sukha.
{{/Wp_Barcode}}
This merge field example generates an HTML img
tag as follows:
<imgwidth="100" src="data:png;base64,...." />
Configure barcodes with merge fields
When configuring barcodes in HTML templates, you can use merge fields or expressions as the content of a barcode.
You can use merge fields as the content of a barcode. For example, you can use the following merge fields to include invoice numbers as the content of a barcode:
{{#Invoice}}
{{#Wp_Barcode}}
CODE_128
*3517{{InvoiceNumber}}80*
{{/Wp_Barcode}}
{{/Invoice}}
You can also use expressions in the content of a barcode. For example, you can use the following merge field example including expressions as the content of a barcode:
{{#Invoice}}
{{#Wp_Barcode}}
CODE_128,codeTextPosition=NONE
*1234{{#Wp_Eval}}
{{Amount}} * 10|Round(0)
{{/Wp_Eval}}5678
{{/Wp_Barcode}}
{{/Invoice}}
Restrictions and limitations
When configuring barcodes in HTML templates, keep the following restrictions and limitations in mind:
-
You cannot use the
Wp_Barcode
function in the Text box. Instead, you can use an HTML box.The
Wp_Barcode
function accepts multiple lines of text as its input, internally,\n
is used to separate lines. If you use the function in a Text box, the new line is interpreted as an HTML tag,<br/>
, so that theWp_Barcode
function will receive a text argument with HTML tags, which is not what you expect. -
Image size and resolution
Currently, you cannot specify the image resolution, DPI (dots per inch). If you need a higher resolution, one workaround is to generate a bigger image and show it with smaller
width
andheight
attributes, for example:<style> .barcode>img { width: 200px!important; # use !important to override the inline style of the generated img tag. } </style> <div class="barcode"> {{#Wp_Barcode}} CODE_128,imageWidth=400 1234567890 {{/Wp_Barcode}} </div>