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.

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:
   1 Interact with a component

   →

   2 QR Code

   →

   3 Set Text
4. In the Text parameter, add a data binding:
   1 From Event

   →

   2 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 to let players join a shared session by scanning a QR code.

1. Use App-to-App to generate or retrieve a unique room code (stored in a variable).
2. Build the join URL dynamically using a function:
   • Get the current page URL via data binding:
     1 Project

     →

     2 Context

     →

     3 Launch

     →

     4 URL
   • Append the room code as a URL parameter, 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

• QR Code Scanner
• App-to-App
• URL Parameters
• Text input