2.0.1 • Published 3 years ago
mjml-qr-code v2.0.1
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 --saveThen 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.