Overview

The barcode generator provides an easy way to generate high-quality horizontal barcode images in your messages based on a code you provide. The code may be rendered from a variety of sources such as a supplement using the reserveOne method, a contact attribute using a contact variable, a hard-coded value, a remote JSON file, etc.

Using a single line of Smarty, you can generate a black and white image in PNG format.  Just provide the code and the symbology type and we do the rest. There are also additional options for padding, scale and height.   

The resulting image is rendered as an absolute image path. You will need to write the necessary HTML for the image to render properly in a message. See the examples below for more information.

Barcode syntax

The following Smarty utility will generate a barcode image path within a message:

{$utils->getBarcodeURL($code, $symbology, $options)}

Parameters

*Required

Example barcodes 

For the examples below, the rendered output is a URL, so you must wrap the Smarty code in an IMG tag in order to render the image in a message.

Example with default option values

The following code will generate an image path from the code "283739420484" using a symbology type of "code39". The options parameters are set to their defaults.

Note that "code39" symbology supports numbers only. If letters are required, consider using "code128".

Smarty syntax

{$barcode.code = '28373984'}
{$barcode.symbology = code39}
{$barcode.options.padding = 0}
{$barcode.options.scale = 2}
{$barcode.options.height = 100}
<img src={$utils->getBarcodeURL($barcode.code, $barcode.symbology, $barcode.options)}>

Rendered output

Example with specified option values

The following code will generate an image path from the code "AZ283739WD" using a symbology type of "code128". Note that "code128" symbology can contain both numbers and letters.

The options parameters set the padding to "20px", the scale to "3" and the height to "200px".

Smarty syntax

{$barcode.code = AZ283739WD}
{$barcode.symbology = code128}
{$barcode.options.padding = 20}
{$barcode.options.scale = 3}
{$barcode.options.height = 200}
<img src={$utils->getBarcodeURL($barcode.code, $barcode.symbology, $barcode.options)}>

Rendered output

Example using a contact attribute as the code

The following code will generate a barcode using the contact's attribute value for "membership_number". Note that there must be a value available for "membership_number" or the barcode will not render.

Smarty syntax

{$barcode.code = $contact.membership_number}
{$barcode.symbology = code128}
{$barcode.options.padding = 0}
{$barcode.options.scale = 2}
{$barcode.options.height = 100}
<img src={$utils->getBarcodeURL($barcode.code, $barcode.symbology, $barcode.options)}>

Example using a supplement record as the code (reserveOne method)

You can upload a supplement of coupon codes and using the reserveOne method, provide unique codes to each of your contacts. The reserveOne method will prevent codes from being used more than once.

• Learn more about using the reserveOne method to generate coupon codes.

The following example assumes that you have a supplement called "couponBank1" with codes in your account stored in the proper format.

Smarty syntax

{$coupon=$supplements->reserveOne("couponBank1")}

{$barcode.code = $coupon.code}
{$barcode.symbology = code39}
{$barcode.options.padding = 0}
{$barcode.options.scale = 2}
{$barcode.options.height = 100}
<img src={$utils->getBarcodeURL($barcode.code, $barcode.symbology, $barcode.options)}>

Best practices

Render the code in text format in addition to the barcode image

It's recommended to also render the code in text format near the barcode (above or below). This will allow the code to be displayed in the message if the barcode image is blocked, not rendering properly or if the scanner is unable to scan the barcode properly.

If the code can be redeemed online, including the code in text format allows recipients to copy and paste the code for online redemption.

Below is an example of rendering the code below the barcode image.

Smarty syntax

{$barcode.code = '28373984'}
{$barcode.symbology = code39}
{$barcode.options.padding = 0}
{$barcode.options.scale = 2}
{$barcode.options.height = 100}
<img src={$utils->getBarcodeURL($barcode.code, $barcode.symbology, $barcode.options)}>
 <div>
    {$barcode.code}
  </div>

Maintain a static barcode width

Some responsive HTML techniques will resize images using CSS when a message is displayed in a mobile device.  It is recommended to avoid this technique with barcode images, as the image may render too small to be scanned.