How to use it in email

[AlexZero-0]

Hello John,

I'm trying to use your approach on this QR Code in an email (to display the QR code in the email) but I can't figure out how to do it. Whatever I'm doing is not working. Can you please provide some assistance? Where should I save the code from 'qrcode.sfmc.ssjs.js'? In an Script Activity (Automation Studio), as a Code Resource (in a Cloud Page Collection) or as a Code Snippet (in the Email/Email Template)?

Thank you!

[jp-ed]

Hi Alex,

One approach is to create a landing page with the full script embedded inline. For example:

CloudPages

<script runat="server">
    // Paste qrcode.sfmc.ssjs.js below

    HTTPHeader.SetValue("Content-Type", "text/plain;");
    var data = Request.GetQueryStringParameter("data");
    var qrt = new QRCode({
        "content": data
    }).table();
    Variable.SetValue("@QRCodeTable", qrt);
</script>

%%=v(@QRCodeTable)=%%

Once this page has been published, you can create a reusable code snippet to pull in the QR code.

Email Studio

%%[
    var @pageUrl, @data, @requestUrl, @qrcode
    set @pageUrl = "YOUR_LANDING_PAGE_LINK_HERE"
    set @data = "YOUR_TEXT_TO_ENCODE_HERE"
    set @requestUrl = Concat(@pageUrl, "?data=", UrlEncode(@data, 1, 1))
    set @qrcode = TreatAsContent(HTTPGet(@requestUrl))
]%%

%%=v(@qrcode)=%%

You can personalize the data parameter to include attributes such as the subscriber key.

Let me know if you still need assistance.

[AlexZero-0]

Yes but this will force the full HTML code on the Email Template and exceed the limit of most email clients (100kB) and it loads very slow.

It's there any other way?

[jp-ed]

Good point. By removing much of the repetitive styling from the code, I was able to shrink a 168kb QR code down to 20kb (!). The main culprit appears to be a verbose style attribute in the table data cell element.

<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:10px;height:10px;background-color:#000000;"></td>

I presume that the original developer used inline styling for a reason, but the benefits of an internal or external CSS style sheet are very clear in the case of email. I can work on a new pull request.

Similarly, on the landing page, you can set pretty to false to remove line breaks. I have not tested the performance improvements of minifying the JavaScript code.

[jp-ed]

I have added the following header to the code sample above. It removes the unnecessary HTML tags.

HTTPHeader.SetValue("Content-Type", "text/plain;");

[jp-ed]

On the question of speed, unfortunately the initial load time is a function of the data string length. HTTPGet adds another delay, similar to when you retrieve an object from Salesforce.

A more optimal solution would be to generate the QR codes via automation and store them in a data extension. But in either case, there are no delays for the email recipient because the QR code has already been generated.

[jp-ed]

@AlexZero-0 My latest commit shrinks the average file size by ~90% when you disable inlineStyle and pretty. Now developers have the flexibility to add external CSS to customize the width, height, color, and background of the QR code.

Here's an example:

table {
    border: 0;
    border-collapse: collapse;
    height: 300px;
    width: 300px;
}
table tr td {
    padding:0;
    margin:0;
    background-color: white;
}
table tr .d {
    background-color: black;
}

By default, d is the name of the class added to each black square, but you are free to tweak and optimize as needed. Thanks!

[AlexZero-0]

Thanks @jp-ed ! I didn't had the time to reply to your previous messages, but I'm amazed at how much you managed to reduce the size and the option to personalize the CSS it's fantastic.

Have a nice day!