QR codes and barcodes can make your subscriber’s life much easier and drive engagement with your platform. Barcodes are typically used for sending tickets, vouchers and discounts to your subscribers. Similarly, QR codes can also be used for sending tickets, etc., and allowing your subscribers to use their smartphones to easily access information or websites or personalized links. This short article will cover how to quickly generate them and include them in Salesforce Marketing Cloud emails and on CloudPages.
Generate Barcodes with AMPScript
AMPscript has a function dedicated solely to generating barcode image URLs – the BarcodeURL function. It can generate 25 kinds of barcodes, although 6 of them do not render correctly in Marketing Cloud (Mat25, OneCode, PlainText, Planet, Postnet and Telepen), hopefully, this will be addressed in the future. Here is a preview of the ones that are currently available for use:
The BarcodeURL function takes 9 arguments, 4 of them are required:
- A value to convert into a barcode
- Type of barcode to generate (as visible in the above screenshot)
- Barcode image width in pixels
- Barcode image height in pixels
Here is an example syntax, assuming that the values for our barcodes are stored in a Data Extension:
Generate QR codes with AMPScript
AMPscript does not have a dedicated function that would allow for quick and easy QR code generation. Still, there are several other solutions that can be easily combined with AMPscript to get the results we need.
The first is using the publicly available, free API, QR Code Generator. All you need to do is send the data along with information about the size of the desired QR code to the qrserver API, and it will automatically generate a QR code on the fly, which can then be embedded inside an email or on a CloudPage:
To be able to use it inside an email or a CloudPage, all you need to do is pass the required data as a URL inside or an HTML <img> tag:
Like any other AMPscript-based solution, you need to preview the email against a subscriber or publish the CloudPage for the QR code to display correctly.
If you are not able to use the above API for any reason, there are several JavaScript libraries that can be implemented in Marketing Cloud’s CloudPages, for example, the QRCode.js library.
In this setup, you should create a separate Code Resource to hold the actual QR code generating JS and a CloudPage where the actual QR code will be generated and displayed:
The qrcode.js file is a copy of the script from the QRCode.js library. I am not embedding the whole script here as it’s too long, but you can access it under this link: https://gist.github.com/zuzannamj/04c799ff169d5424608a606ad560bcf6
On the CloudPage, you need to remember to refer to the link to your qrcode.js file. Then you can use AMPscript or SSJS to pull/define the data that should be passed to the QR code and lastly, call a javascript function to generate and display the QR code. Here’s an example of how this could be set up:
The above works very well on CloudPages. I have not tried using it inside an email, but it should also work there after making adequate changes.
Update
A big thank you to John Paul Dantanus, who created and shared his own approach for a solution that works inside an email. Using a Cloud Page, John was able to generate a QR code as either an HTML table or SVG image. Either of these text files can then be pulled into an email template (or any webpage, for that matter) via HTTP GET or POST. The code has many of the same configurable parameters seen in other libraries, such as colour, background, size, padding, and error correction level.
You can find John’s code here: https://github.com/jp-ed/qrcode-sfmc-ssjs
Questions? Comments?
Leave a comment below or email me at zuzanna@sfmarketing.cloud.
sfmarketing.cloud 
Good information and thank you for sharing
LikeLiked by 1 person