# QR Code Generator

> Generate and display a QR code from text or a URL in your PandaSuite app. Customize colors, margin, and error correction, then update the code dynamically with actions or data binding.

https://docs.pandasuite.com/essentials/components/qr-code-generator/

**Generate a QR code from text, a URL, or any value you can bind in PandaSuite, and display it in your interface.**

> **Info: QR Code Generator vs Code Reader**
>
> The QR Code component generates and displays a QR code. If you want to scan a QR code with
> the camera, use [Code Reader](https://docs.pandasuite.com/essentials/components/code-reader/).

## Use cases

- **Sharing links**: display a project link, a private hub channel, or any URL as a QR code.
- **On-site experiences**: let users continue on another device by scanning a QR code you generate.
- **Dynamic content**: generate QR codes from a variable, a data source, or user input.
- **Support and troubleshooting**: display a QR code that encodes a debug token or session identifier.
- **Multiplayer onboarding**: generate a join link with a room code so other players can quickly join a shared session.

## Setting up the component

1. Open the **Components** panel.
2. Drag and drop **QR Code** into your screen (visual component).
3. Resize the component area (it defines the visible QR code zone).
4. In **Properties**, set **Text** (or add a data binding).

## Component features

### Properties

| Property             | Description                                                                                                                                                                    |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Text**             | The text to encode (URL, plain text, etc.). If empty, the QR code area is cleared. Supports data binding.                                                                      |
| **Error Correction** | Controls resilience to damaged/partially hidden codes: **Basic**, **Standard** (default), **High**, **Maximum**. Higher correction increases reliability but reduces capacity. |
| **Foreground Color** | Color of the QR code modules (dark pixels).                                                                                                                                    |
| **Background Color** | Background color (light pixels).                                                                                                                                               |
| **Margin**           | Quiet zone margin around the QR code (in modules).                                                                                                                             |

### Trigger events

Use these triggers from the component **Actions** tab:

- **QR Code Generated**: fires after a QR code is successfully rendered. Exposes **Encoded text**.
- **Generation Error**: fires when generation fails. Exposes **Error message**.

### Associated actions

You can act **on** the component via the **Interact with a component** action:

- **Set Text**: updates the QR code content.

### Exposed properties

The QR Code component exposes data you can use in data binding:

- **Encoded text**: the last successfully generated text.

## Practical examples

### Generate a QR code from a Text Input

1. Add a **Text input** for the user to enter a URL or text.
2. Add **QR Code** to your screen.
3. On the **Text input**, create an action on **Validated**:
   **Interact with a component** → **QR Code** → **Set Text**
4. In the **Text** parameter, add a data binding: **From Event** → **Input Value**.

### Display an error message when generation fails

1. Select **QR Code** and open **Actions**.
2. Choose the trigger **Generation Error**.
3. Add an action such as **Open a pop-up** (or **Set variable**) using the **Error message** from **From Event**.

### Multiplayer game: invite players via QR code

Combine the QR Code Generator with [App-to-App](https://docs.pandasuite.com/essentials/components/app-to-app/) to let players join a shared session by scanning a QR code.

1. Use [App-to-App](https://docs.pandasuite.com/essentials/components/app-to-app/) to generate or retrieve a unique room code (stored in a variable).
2. Build the join URL dynamically using a [function](https://docs.pandasuite.com/essentials/data/functions/):
   - Get the current page URL via data binding: **Project** → **Context** → **Launch** → **URL**
   - Append the room code as a [URL parameter](https://docs.pandasuite.com/essentials/project-properties/url-parameters/), e.g. `?room=ABC123`
3. Bind the **QR Code** component's **Text** property to the result of this function.
4. Display the QR code on the host's screen. Other players scan it to open the app with the room code pre-filled, and automatically join the shared session.

This pattern simplifies multiplayer onboarding: no need to type or share codes manually.

## Additional resources

- [Code Reader](https://docs.pandasuite.com/essentials/components/code-reader/)
- [App-to-App](https://docs.pandasuite.com/essentials/components/app-to-app/)
- [URL Parameters](https://docs.pandasuite.com/essentials/project-properties/url-parameters/)
- [Text input](https://docs.pandasuite.com/essentials/components/text-input/)