How to Add QR Code Generator to a Page and Create Your First QR Code

Introduction

QR Code Generator is delivered as a single SharePoint Framework package. A SharePoint administrator uploads the package to the app catalog of the tenant once, and after that any page author can add the web part to a page. This article walks through the whole path: from the downloaded ZIP file to the first QR code saved on your computer.

Prerequisites

Before you start, make sure that:

• the tenant has an app catalog. If it does not, a SharePoint administrator creates it in the SharePoint admin center under More features > Apps;
• you are a SharePoint administrator, or a member of the owners group of the app catalog, to upload the package;
• you are an owner of the site, or have edit permission on the page, to add the web part;
• you have the downloaded package. It is a ZIP file named Vitextra.QRCodeGenerator.<year>Q<quarter>.zip, for example Vitextra.QRCodeGenerator.2026Q4.zip, and it contains the solution file vitextra.qr-code-generator.sppkg. Extract the .sppkg file before uploading.

Step 1. Upload the package to the app catalog

1. Open the app catalog site of the tenant and go to Apps for SharePoint.
2. Upload vitextra.qr-code-generator.sppkg or drag it into the list.
3. In the dialog that opens, select Enable this app and add it to all sites and confirm with Enable app. The package is built for tenant-wide deployment, so after this step the web part is available on every site of the tenant and does not need to be added to a site through Add an app.

The generic procedure, with screenshots of the app catalog and the deployment dialog, is described in KB10035. Installing Cloud-based Product.

Step 2. Add the web part to a page

1. Open the modern page that should show the generator and click Edit in the top right corner. If you need a new page, create it from New > Page on the site.
2. Hover over the place in a section where the web part should go and click the + (plus) button.
3. In the toolbox, type QR in the search box and select QR Code Generator. The web part is listed in the Advanced group.

The web part needs no configuration: it appears on the page ready to work, with the URL tab selected and the address of the current site already entered, so the first QR code is shown immediately.

Step 3. Create your first QR code

1. Stay on the URL tab and replace the address in the URL field with the link that the code should open, for example a link to a news post or a document.
2. Look at the QR code preview on the right: it is rebuilt after every change. The Update button redraws the preview on demand.
3. Point the camera of a smartphone at the preview and check that the link opens.

To encode something other than a link, select another tab — Text, vCard, Wi-Fi, Email, SMS, Phone, Location or Event. If the tabs do not fit the width of the web part, the remaining ones are behind the … (more) button at the end of the row. The fields of every tab are described in KB10264. QR Code Data Types: URL, Text, vCard, Wi-Fi, Email, SMS, Phone, Location and Event.

Step 4. Download or copy the code

• Click Download and choose the format — PNG, JPEG, SVG or WebP. The file is saved to the downloads folder of the browser under the name qrcode.
• Click Copy to put the code on the clipboard as a PNG image and paste it into an email, a document or a presentation. The message Copied to clipboard confirms the action.

The choice of the format and the size of the image are explained in KB10267. Downloading and Copying a QR Code: PNG, JPEG, SVG and WebP.

Publish the page

Click Republish (or Publish for a new page). The generator is saved with the data and design it had at that moment, so the visitors of the page see the same QR code that you prepared. They can also enter their own data and download their own codes; their changes are not saved. See KB10268. Publishing a Preconfigured QR Code on a SharePoint Page.

Updating to a new version

A new release of QR Code Generator is installed the same way as the first one: upload the new vitextra.qr-code-generator.sppkg to Apps for SharePoint, confirm that you want to replace the existing file, and select Enable this app and add it to all sites again. Every page with the web part picks up the new version on the next load, and the saved configuration of the existing web parts is preserved. When a newer version is available than the one running on a page, the web part shows the message There is a new version of this app. Get it now. to the page editor. The generic procedure is described in KB10050. Updating an SPFx-Based Vitextra Solution.

Summary

Installing QR Code Generator means uploading one .sppkg file to the app catalog with tenant-wide deployment and adding the QR Code Generator web part to a page. The web part works without configuration: enter the data on one of the tabs, check the preview with a smartphone and take the result with Download or Copy.