Ask AI
Skip to main content

Add QR Code

Function: Add QR Code​

This action allows you to easily embed a QR code directly onto an existing image UI element within your application. You can use it to display various types of information, such as website links, contact details, or product identifiers, in a scannable format.

Input​

  • Element (UI element, required): The specific image UI element on your page where you want the QR code to appear.
  • QR content (Text, required): The information you want to encode into the QR code. This could be a URL, a piece of text, an email address, or any other data.
  • Advanced (True/False): Toggle this setting to True if you wish to customize the appearance and technical specifications of your QR code. When set to True, additional options will become visible.
    • Border (Number): (Visible when 'Advanced' is True) Adjusts the width of the clear border around the QR code. A larger number means a wider border.
    • Light color (Text): (Visible when 'Advanced' is True) Sets the color for the "light" or background parts of the QR code. You can use color names (e.g., "white") or hexadecimal codes (e.g., "#FFFFFF").
    • Dark color (Text): (Visible when 'Advanced' is True) Sets the color for the "dark" or foreground parts of the QR code. You can use color names (e.g., "black") or hexadecimal codes (e.g., "#000000").
    • Version range (min) (Number): (Visible when 'Advanced' is True) Defines the minimum complexity (version) of the QR code. Higher versions can store more data but are larger.
    • Version range (max) (Number): (Visible when 'Advanced' is True) Defines the maximum complexity (version) of the QR code. The system will try to use the smallest possible version within the specified range.

Output​

This action does not produce a separate output. Instead, it directly modifies the specified "Element" (Image UI element) by embedding the generated QR code onto it.

Execution Flow​

Real-Life Examples​

Imagine you have an online store and want to add a QR code to each product image that links directly to the product's page.

  • Inputs:
    • Element: Product_Image_123 (The image UI element displaying your product)
    • QR content: https://yourstore.com/products/product123
    • Advanced: False
  • Result: The Product_Image_123 UI element will now display a standard black and white QR code that, when scanned, directs users to https://yourstore.com/products/product123.

Example 2: Creating a Custom-Branded Contact QR Code on a Business Card Template​

You're designing a digital business card and want to include a QR code with your contact information, styled to match your brand colors.

  • Inputs:
    • Element: Business_Card_Image (The image UI element on your digital business card template)
    • QR content: BEGIN:VCARD\nVERSION:3.0\nN:Doe;John\nORG:My Company\nTEL:+1234567890\nEMAIL:[email protected]\nEND:VCARD
    • Advanced: True
    • Border: 2
    • Light color: #F0F8FF (AliceBlue)
    • Dark color: #4682B4 (SteelBlue)
  • Result: The Business_Card_Image UI element will display a QR code containing John Doe's contact information. The QR code will have a light blue background and dark blue foreground, with a slightly reduced border, matching the brand's aesthetic.

Example 3: Generating a QR Code for Event Check-in with Specific Version Control​

For an event, you need to generate QR codes for attendee check-in. You want to ensure the QR codes are compact but can still hold the attendee ID, and you have specific color requirements.

  • Inputs:
    • Element: Attendee_Badge_Image (The image UI element on the digital attendee badge)
    • QR content: ATTENDEE_ID_789012345
    • Advanced: True
    • Border: 5
    • Light color: White
    • Dark color: Green
    • Version range (min): 5
    • Version range (max): 7
  • Result: The Attendee_Badge_Image UI element will show a green and white QR code for ATTENDEE_ID_789012345. The system will generate the smallest possible QR code version between 5 and 7 that can hold the content, ensuring it's compact yet readable, with a standard white border.