mjml-qr-code

mjml-qr-code

A component for adding QR codes to your email using an open-source QuickChart provider.

Usage

This mjml...

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-qr-code value="hello world" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Will show this QR code:

Customize the color, size, positioning, and other QR parameters using the attributes below.

Setup

Install via npm:

npm install mjml-qr-code --save

Then add the package to your .mjmlconfig:

{
  "packages": [
    "mjml-qr-code/lib/MjQrCode.js"
  ]
}

Attributes

The <mj-qr-code> tag supports all the attributes of the <mj-image> tag. View those attributes here.

In addition to regular image attributes which you can using for sizing and positioning, the component supports the following QR-specific attributes:

Name	Description	Required?	Default
value	The content encoded in your QR code	Yes
color	The color of the QR code	No	000000 (black)
background-color	The background of the QR code	No	ffffff (white)
qr-margin	The number of QR blocks to leave empty around the QR code	No	4
error-correction-level	The QR error correction level	No	M
width	Width of the QR code image	No	200
host	The host of the QR image server	No	quickchart.io
protocol	The protocol of the QR image server	No	https

Hosting

By default, this component uses the public QuickChart web service to render QR codes, but you can use the host attribute to point to your own QR renderer.