> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/qr-code.md).

# QR Code

## Overview

<figure><img src="/files/HcXwzn6sAf1twjaycF9d" alt="" width="375"><figcaption></figcaption></figure>

The QR Code component generates a scannable QR code from any text value — a URL, a record ID, a product code, or any string from your flow. Users can scan it with a mobile device to open a link or retrieve information instantly.

***

## Tutorials

| Name                                                                                                                       | Description                                                                  | Illustration                     |
| -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------------- |
| [**Generate a QR Code from a record field**](/flow/tutorials/components/qr-code/generate-a-qr-code-from-a-record-field.md) | Explore how to convert any Salesforce record field into a scannable QR Code. | ![](/files/15GUfbmZ92z1EANwkFKz) |

***

## Configuration

To configure it, click the component on the Flow screen. The Edit QR Code Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

### Properties

| Setting   | What It Does                                                                                                                        |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Value** | The text encoded into the QR code. Enter a URL, record field value, or any text directly, or map it to a flow variable or resource. |
| **Width** | Maximum width of the QR code image in pixels.                                                                                       |

<figure><img src="/files/o1GNk7q8y4u0bu9aCC7F" alt="" width="316"><figcaption></figcaption></figure>

### Advanced Options

| Setting              | What It Does                                                                                                                                                              |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Encoding**         | The character encoding mode: **ISO 8859-1** (default, supports Latin characters) or **UTF-8** (supports all Unicode characters, including accented and non-Latin text).   |
| **Error Correction** | How much of the code can be damaged and still scan correctly: **L** (default, \~7%), **M** (\~15%), **Q** (\~25%), or **H** (\~30%). Higher levels produce a denser code. |

***

## Styling

The **Style** tab gives you fine-grained control over the QR Code's appearance. Configure it from the **Style** tab of the Edit QR Code panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the QR code, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the QR code and its edges.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the QR code.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Color" %}
Sets the QR code colors.

* **Color:** Set the foreground (module) color of the QR code.
* **Background Color:** Set the background color behind the QR code modules.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/qr-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.