Overview

The Barcode Generator provides an easy way to generate high-quality barcode images or QR codes 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, choose a symbology, and optionally set padding or sizing options.

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

Accepted barcode symbology values

Each symbology type accepts specific values:

• code39 - Accepts alphanumeric barcodes: uppercase letters, numeric digits, special characters (-, ., $, /, +, %, and space). Example: 1234ABCD
• code93 - Accepts alphanumeric barcodes: uppercase letters, numeric digits, special characters (-, ., $, /, +, %, and space). Example: 1234ABCD
• code128 - Accepts alphanumeric and numeric-only barcodes. Example: 12A34B56C
• upca - Numeric only. Example: 0123456789
• ean-8, ean-13 - Numeric only. Example: 0123456789
• qr - Accepts alphanumeric characters, special characters, and UTF-8 encoded text (including emojis and non-Latin scripts). Example: https://example.com/orders/lookup?order_id=ABC123

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 AZ283739420484WD using a symbology type of code39. The options parameters are set to their defaults.

Smarty syntax

{$barcode.code = 'AZ28373984WD'}
{$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.

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 with QR code symbology

The following code generates an <img> tag that displays a QR code for the URL https://example.com/orders/lookup?order_id=ABC123
Default settings are used for all options.

Smarty syntax

{$barcode.code = 'https://example.com/orders/lookup?order_id=ABC123'}
{$barcode.symbology = 'qr'}
{$barcode.options.padding = 0}
{$barcode.options.size = 150}
<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)}>

Barcodes in MMS messages

The Barcode Generator is available in MMS messages using the setMmsMedia Smarty utility.

{$barcode.code = 'AZ283739WD'}
{$barcode.symbology = 'code128'}
{$barcode.options.padding = 40}
{$barcode.options.scale = 0}
{$barcode.options.height = 100}
{$imageURL = $utils->getBarcodeURL($barcode.code, $barcode.symbology, $barcode.options)}
Here is a barcode
{$utils->setMmsMedia($imageURL, 'image')}

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 = 'AZ28373984WD'}
{$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.