# QR Code

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

## Changing the Properties

### Setting a value

The QR Code value can be manually added by entering a field value. QR Code value can be added dynamically by selecting a resource from the Mapped button.

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

## Adding Interactions

No interactions are available.

## Styling the QR Code

From the Styles panel, you can customize styling attributes for the QR Code:&#x20;

* `color`: to customize colors for the QR Code

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

## 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/czmyvj6PkFRaoFj9OuH3) |

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>encoding</code></strong></td><td>String</td><td>The encoding mode used to encode the value.</td></tr><tr><td><strong><code>errorCorrection</code></strong></td><td>String</td><td><p></p><p>The error correction level used to encode the value. The possible values are:</p><ul><li>"L" - approximately 7% of the codewords can be restored.</li><li>"M" - approximately 15% of the codewords can be restored.</li><li>"Q" - approximately 25% of the codewords can be restored.</li><li>"H" - approximately 30% of the codewords can be restored.</li></ul></td></tr><tr><td><strong><code>width</code></strong></td><td>Integer</td><td>Set a maximum width for the QR Code</td></tr><tr><td><strong><code>value</code></strong></td><td>String</td><td>The value of the QRCode.</td></tr></tbody></table>

### Events

No events are available.

### Styling Hooks

| Name             | Description                       |
| ---------------- | --------------------------------- |
| Color            | Define a QR Code color            |
| Background Color | Define a QR Code background color |


---

# Agent Instructions: 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.