Skip to main content

Configure barcodes in HTML templates

Zuora

Configure barcodes in HTML templates

  1. Last updated
  2. Save as PDF

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 TOP, BOTTOM,  andNONE.

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 the Wp_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 and height 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>