--- title: "How to Add QR Code Generator to a Page and Create Your First QR Code" description: "Step-by-step: upload the Vitextra QR Code Generator package to the SharePoint app catalog, add the QR Code Generator web part to a modern page, create a QR code for a link, download or copy it, publish the page and update the web part to a new version." url: https://vitextra.com/en/support/kb/10263 language: en published: 2026-10-14 modified: 2026-10-14 products: - "QR Code Generator" author: "Lidija Reising" tags: ["install QR Code Generator", "add QR code web part to SharePoint page", "create QR code in SharePoint Online", "sppkg app catalog", "QR code for a link", "download QR code", "Vitextra QR Code Generator setup", "update SPFx web part"] --- # How to Add QR Code Generator to a Page and Create Your First QR Code Step-by-step: upload the Vitextra QR Code Generator package to the SharePoint app catalog, add the QR Code Generator web part to a modern page, create a QR code for a link, download or copy it, publish the page and update the web part to a new version. ## Introduction [QR Code Generator](https://vitextra.com/en/products/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.Q.zip`, for example `Vitextra.QRCodeGenerator.2026Q4.zip`, and it contains the solution file `vitextra.qr-code-generator.sppkg`. Extract the `.sppkg` file before uploading. 📝 **Note** QR Code Generator builds the code in the browser and requests no additional API permissions. There is nothing to approve on the **API access** page of the SharePoint admin center. ## 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](https://vitextra.com/en/support/kb/10035). ![Enabling the QR Code Generator package in the app catalog](https://static.vitextra.com/articles/10263/enable-app-dialog-en.png) *Enabling the QR Code Generator package in the app catalog* ## 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. ![The QR Code Generator web part in the toolbox of the page](https://static.vitextra.com/articles/10263/web-part-toolbox-en.png) *The QR Code Generator web part in the toolbox of the page* 💡 **Tip** While the page is in edit mode, you can type a heading above the generator in the **Web Part Title** placeholder, for example *Scan to open the event page*. ## 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](https://vitextra.com/en/support/kb/10264). ![A QR code for a link on the URL tab](https://static.vitextra.com/articles/10263/first-qr-code-en.png) *A QR code for a link on the URL tab* 📝 **Note** If a required field of the selected tab is empty, the preview shows the message *One or more required fields is empty. Check that all required fields are filled in and try again*, and the **Update**, **Copy** and **Download** buttons are disabled. ## 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](https://vitextra.com/en/support/kb/10267). ## 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](https://vitextra.com/en/support/kb/10268). ## 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](https://vitextra.com/en/support/kb/10050). ## 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**. 💡 **Tip** To give the code the colors and the logo of your company, see [KB10265. Customizing the QR Code Design: Shape, Colors, Gradient and Corners](https://vitextra.com/en/support/kb/10265) and [KB10266. How to Add a Company Logo to a QR Code](https://vitextra.com/en/support/kb/10266).