# QR & Barcode Generator

*Skill Level: Beginner*

## Before You Begin <a href="#before-you-begin" id="before-you-begin"></a>

* Know about [MagicText](https://help.adalo.com/component-basics/inserting-dynamic-text) and [Actions](https://help.adalo.com/action-basics/action-basics).
* Choose the Correct Code Type. Different barcode formats support different types of values.

## Overview

The **QR & Barcode Generator** component creates scannable QR codes and barcodes directly inside your app. It generates the code from a value you provide, such as text, a URL, or a product number.

The component supports five code types:

* QR Code, Code 128, Code 39, EAN-13, and UPC-A

QR codes can be customized with different dot styles and an optional logo overlay. Barcodes can optionally display the encoded value as text below the bars.

{% hint style="warning" %}
It does not modify your data. It simply reads the value you provide and renders a scannable code.
{% endhint %}

***

## Some Common Use Cases

The **QR & Barcode Generator** component can be used in many types of apps. Some common examples include:&#x20;

* **Product packaging and inventory:** Generate **EAN-13** or **UPC-A** barcodes for product labels, shelf tags, or inventory management screens.
* **Shareable links:** Encode a website URL, deep link, or social profile as a **QR code** that users can scan with their phone camera.
* **Branded QR codes:** Add your company logo to the center of a QR code for marketing materials, business cards, or event check-ins.
* **Wi-Fi sharing:** Encode Wi-Fi credentials in a QR code so users can connect to a network by scanning instead of entering the password manually.
* **Receipts and tickets:** Display **Code 128** or **Code 39** barcodes on digital receipts, tickets, or passes for quick scanning at entry points.

***

## How to Use

### Add & Configure the Component

* Drag **QR & Barcode Generator** onto your screen.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fuxi9x0bKRFUsiTqOoYYw%2Fimage.png?alt=media&#x26;token=0c84c021-d50e-40e1-a1f4-3313bf19834e" alt="" width="375"><figcaption></figcaption></figure>

* Enter or bind the **Value** you want to encode. You can also use **Magic Text** to bind it to a database field, such as:
  * Product barcode, user profile link, ticket ID, website URL

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fh7QKekIJoQlk5Ueyz9wR%2Fimage.png?alt=media&#x26;token=21bd284d-09b9-4f60-9501-3bc5fb909cbe" alt="" width="318"><figcaption></figcaption></figure>

* Choose the **Code Type:** The component will automatically generate the code.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FwQjFjidq3VkeCbIchBTU%2Fimage.png?alt=media&#x26;token=f429fb2e-bfc5-4e85-8d4c-3f16e59d1599" alt="" width="311"><figcaption></figcaption></figure>

&#x20;Refer to the table below to help choose the appropriate code type for your use case.

| Code Type | Accepts                                         | Example             |
| --------- | ----------------------------------------------- | ------------------- |
| QR Code   | Text, URLs, or other data                       | `https://adalo.com` |
| Code 128  | Letters, numbers, and symbols                   | `ORD-102938`        |
| Code 39   | Uppercase letters, numbers, and limited symbols | `ORDER123`          |
| EAN-13    | 13-digit product numbers                        | `5901234123457`     |
| UPC-A     | 12-digit retail numbers                         | `036000291452`      |

***

### Appearance

**QR Code Settings** Controls the shape of the QR modules from one of the 3 options:

* Square
* Rounded
* Dots

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FGndYQ2IF6cfCyDbGVFH8%2Fimage.png?alt=media&#x26;token=b61efd25-5dea-4e44-9a87-f37717000700" alt="" width="317"><figcaption></figcaption></figure>

**Show Logo:** Adds a logo image in the center of the QR code.

When enabled, you can configure:

* Logo Image, logo Size, logo Background, logo Padding, and logo Border Radius

The logo size is automatically limited to keep the QR code scannable.

**Barcode Settings** (Visible for **Code 128, Code 39, EAN-13, UPC-A**)

**Show Text Below:** Displays the encoded value as text beneath the barcode.

{% hint style="info" %}
Large logos may prevent some scanners from reading the QR code. Always test after adding a logo.
{% endhint %}

***

### Choosing Your Colors

**Padding:** Adds space around the code.

**Foreground Color:** Color of the QR modules or barcode bars. Default: `#000000`

**Background Color:** Color behind the code. Default: `#FFFFFF`

For best results, use a strong contrast between these colors.&#x20;

{% hint style="info" %}
QR codes and barcodes require a strong contrast to scan reliably. The component limits logo size automatically, but complex logos or low-contrast colors may still cause issues. Always test your code with a real scanner.
{% endhint %}

***

### Set Up Your Action

**Click Action:** Add an action that runs when a user taps the QR code or barcode.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F7omQOuK23yU82smxbYwf%2Fimage.png?alt=media&#x26;token=1b0bfa93-a346-41cf-bdf0-946c07823bd5" alt="" width="324"><figcaption></figcaption></figure>

***

## Learn More

* **EAN-13 and UPC-A accept digits only:** These formats only support numeric values. Non-numeric characters are removed automatically. If the value is shorter than required, zeros are added to the end, and the final check digit is calculated automatically.
* **Code 39 supports a limited character set:** Supported characters include uppercase letters **A–Z**, numbers **0–9**, and the symbols `- . $ / + %` and space. Lowercase letters are automatically converted to uppercase, and unsupported characters are removed.
* **Long values create dense QR codes:** Very long text produces QR codes with many small modules. If the component is displayed at a small size, scanners may struggle to read it. Shortening the value or increasing the component size can improve reliability.

***

### Still Need Help?

If needed, contact [**Adalo Support**](https://info.adalo.com/submit-a-support-ticket) and include A screenshot of your component settings, the value you are encoding, and the code type you selected.