QR Code Generator Introduction
A QR code is the shortest way from a screen or a printed sheet to a smartphone: a link to a document, the contact details of an employee, access to the guest Wi-Fi, an invitation to an event. Usually such codes are made on public websites, which means that an internal link, a phone number or a network password is typed into a service that nobody in the company controls. QR Code Generator brings this task into SharePoint: the code is built in the browser of the user, on a page of your own intranet.
QR Code Generator is a SharePoint Framework web part for modern SharePoint Online pages and Microsoft Teams. This article introduces the solution: where it works, what the user sees, which data can be encoded, how the code can be styled and how the result is taken out of the page.
Where QR Code Generator works
QR Code Generator is deployed to a Microsoft 365 tenant from the app catalog as a single package and becomes available on every site of the tenant. The web part can be placed:
- on any modern page — a site page, a news post or a home page, in a regular section or in a full-width section;
- on a single-part app page, where the generator is the only content of the page;
- as a tab in a Microsoft Teams channel or as a personal app in Teams.
The web part follows the theme of the site, including dark themes and the color variants of a page section. Its interface is available in 50 languages and is selected automatically from the language of the user.
📝 Note
QR Code Generator supports modern pages only. It cannot be added to classic pages.
What the user sees
The web part has two areas. On the left are the data tabs — one tab for each type of data — and, below them, seven collapsible design sections: Shape, Logo, Colors, Corner Square, Corner Dots, Error Correction and Size. On the right is the QR code preview with three buttons: Update, Copy and Download.
The preview is rebuilt after every change, so the user sees the result while typing. If a required field of the selected tab is empty, the preview is replaced by a message that one or more required fields is empty, and the buttons are disabled until the field is filled in.
All settings of the generator are in the web part itself. The property pane contains only the About group with the license information.
Data types
The web part encodes nine types of data. The type is chosen by the tab, and the smartphone decides what to do with the scanned code by its content.
| Tab | What is encoded | What happens after scanning |
|---|---|---|
| URL | The address of a web page | The page opens in the browser |
| Text | Any plain text | The text is shown on the screen |
| vCard | A business card: name, phones, email, company, department, job title, website and postal address | A new contact is offered for the address book |
| Wi-Fi | Network name, password, encryption type and the hidden network flag | The phone connects to the network |
| Recipient, subject and message | The mail app opens with a prepared message | |
| SMS | Phone number and message | The messaging app opens with a prepared message |
| Phone | Phone number | The phone offers to call the number |
| Location | Latitude and longitude | The point opens in the maps app |
| Event | Title, location, start and end | The event is offered for the calendar |
The fields of each tab are described in KB10264. QR Code Data Types: URL, Text, vCard, Wi-Fi, Email, SMS, Phone, Location and Event.
Design
A code generated by the web part does not have to be black and white. The design sections bring it in line with the corporate style:
- Shape — six styles of the dots that form the code, each shown as a picture;
- Colors — the color of the dots and of the background, both with transparency, and an optional linear or radial two-color gradient;
- Corner Square and Corner Dots — the shape and color of the three position markers in the corners of the code;
- Logo — a company logo in the center of the code, with adjustable size and margin;
- Error Correction — how much of the code may be damaged or covered and still be read;
- Size — the size of the downloaded image, from 300 to 4000 pixels.
See KB10265. Customizing the QR Code Design: Shape, Colors, Gradient and Corners and KB10266. How to Add a Company Logo to a QR Code.
Getting the result
The Download button saves the code as a file in one of four formats: PNG, JPEG, SVG or WebP. SVG is a vector format and can be printed at any size without loss of quality. The Copy button puts the code on the clipboard as a PNG image, ready to be pasted into an email, a document or a presentation. Details are in KB10267. Downloading and Copying a QR Code: PNG, JPEG, SVG and WebP.
A configuration saved with the page
Everything that is set up in the web part while the page is being edited — the selected tab, the entered data, the colors, the shape, the logo and the size — is saved together with the page. A page author prepares a code once, for example the guest Wi-Fi of a meeting room, and every visitor of the page sees this code at once. See KB10268. Publishing a Preconfigured QR Code on a SharePoint Page.
Privacy
The QR code is generated entirely in the browser. The data that the user enters — passwords, contacts, coordinates — is not sent to an external service for generation. The package requests no additional API permissions, so there is nothing to approve on the API access page of the SharePoint admin center.
❗ Important
A configuration saved with the page is stored in the properties of the web part as plain text. Anyone who can open the page can read the saved data, including a Wi-Fi password. Publish codes with sensitive data only on pages with a suitable audience.
Licensing
QR Code Generator is installed with a trial period. The About group of the property pane shows the Status of the license, the Version of the web part, the Start Date of the subscription and the Tenant it is assigned to. When the trial ends, the web part shows a notice in place of the generator until a subscription is activated.
Next steps
💡 Tip
To deploy the package, place the web part on a page and build the first code, see KB10263. How to Add QR Code Generator to a Page and Create Your First QR Code.