QR Code Generator
A basic QR Code Generator with optional logo overlay using the external QRCode.js library.
Type: Component
Available in: App Page · Home Page · Record Page · Flow Screen
Read on Medium
How to Generate QR Codes with Lightning Web Components
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| color-dark | string | '#000000' | The initial color of the dark modules of the code, as any CSS color. Users can change it. |
| color-light | string | '#ffffff' | The initial color of the light modules of the code, as any CSS color. Users can change it. |
| logo-url | string | The logo to show in the code. An image from another domain needs to allow this with CORS. | |
| record-id | string | The record to save the code to. Set automatically on record pages. | |
| save-to-record | boolean | false | If present, a button saves the code as a file on the record given by record-id. |
| size | number | 256 | The displayed size of the code in pixels. The image has at least a resolution of 1024 pixels. |
| qr-code-data-url | string | Read-only. The code as a PNG data URL, empty without a code. Also available as a Flow output. | |
| content-document-id | string | Read-only. The id of the saved file. Empties with a new code. Also available as a Flow output. |
Events
| Name | Detail | Description |
|---|---|---|
| qrcodegenerate | { dataUrl, value } | Fired when a code was generated. |
| qrcodesave | { contentDocumentId } | Fired after the code was saved as a file on the record. |
Usage
<c-qr-code-generator size="300" onqrcodegenerate={handleGenerate}></c-qr-code-generator>Users enter a target URL, optionally upload a logo and generate the code. The URL has to be complete, including https://.
Users can also change both colors. A hint appears if the contrast is low or the code is inverted, because such a code may be hard to scan. It doesn't block generating.
The image includes the empty border that scanners need, in the light color, so a saved code can be printed or placed anywhere.
Saving creates the file directly through Lightning Data Service, so no Apex is involved and the permissions of the user apply.
Custom Labels
The texts users see are Custom Labels, so they can be translated in Setup with the Translation Workbench. Copy them together with the component.
| Name | Value |
|---|---|
| ErrorAlert_Error | Error |
| ErrorUtils_UnknownError | Unknown error |
| QrCodeGenerator_DarkColor | Dark Color |
| QrCodeGenerator_EnterUrl | Please enter a URL. |
| QrCodeGenerator_ErrorSaving | Error saving the QR code |
| QrCodeGenerator_FileNotRead | Failed to read the selected file. |
| QrCodeGenerator_FileTitle | QR Code |
| QrCodeGenerator_Generate | Generate QR Code |
| QrCodeGenerator_GeneratedCode | Generated QR Code |
| QrCodeGenerator_Generating | Generating... |
| QrCodeGenerator_GenerationFailed | Failed to generate QR code: |
| QrCodeGenerator_HardToScan | These colors may be hard to scan. |
| QrCodeGenerator_LibraryMissing | QR code library not loaded. Please try again. |
| QrCodeGenerator_LibraryNotLoaded | Failed to load QR code library: |
| QrCodeGenerator_LightColor | Light Color |
| QrCodeGenerator_Logo | Logo (optional) |
| QrCodeGenerator_LogoPreview | Logo preview |
| QrCodeGenerator_RemoveLogo | Remove logo |
| QrCodeGenerator_Save | Save |
| QrCodeGenerator_Saved | The QR code has been saved. |
| QrCodeGenerator_Success | Success |
| QrCodeGenerator_TargetUrl | Target URL |
| QrCodeGenerator_Title | QR Code Generator |
| QrCodeGenerator_UrlPlaceholder | https://example.com |
Component Dependencies
| Name | Type | Description |
|---|---|---|
| labelUtils | LWC | Shared function to fill the placeholders of Custom Labels. |
| qrcodejs | Static Resource | QRCode.js - JavaScript Library for generating QRCodes with Logo Support. |
| errorAlert | LWC | Inline alert that shows error messages to the user. |
| errorUtils | LWC | Shared functions to read error messages and show error toasts. |