# QR Code

QR code component allows you to dynamically display any value as a QR code.

## How to add a static QR Code

Drag and drop QR Code component onto page and fill it with any value, such as URL.

{% @arcade/embed flowId="qHf6RxaHTCjtsHpkwGwg" url="<https://app.arcade.software/share/qHf6RxaHTCjtsHpkwGwg>" %}

## How to pass values to QR Code component

You can [pass any value](https://docs.jetadmin.io/user-guide/design-and-structure/components/layouts/overlays/overlay-parameters) to the component and it will output it as QR Code.

Let's make an example of QR codes for sending emails with subject and body, referencing the email from selected row on a table, and getting subject and body from text inputs.

You will need:

1. [A table with emails](#a-table-with-emails)
2. [Two text inputs for subject and body of an email](#text-inputs)
3. [QR code component with formula as a value](#qr-code-and-value-formula)

### A table with emails

Any [table](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/table) that has emails as one of the columns will do.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FaerroR8XK6Yx0koCp1rj%2Fimage.png?alt=media&#x26;token=e9a7293d-93f5-4c6a-9809-545c295baf52" alt=""><figcaption><p>Table with customers as an example</p></figcaption></figure>

### Text inputs

Drag and drop two text inputs. You can optionally rename them to "Subject" and "Body" and make the second one to have multiple lines.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FY0PDqfLPjGnRHJ5ScQ0c%2Fimage.png?alt=media&#x26;token=a0187bfb-fea1-42ac-a626-76c4b4476485" alt=""><figcaption><p>Two text inputs</p></figcaption></figure>

### QR Code and value formula

Add the QR Component anywhere on the page and click on *"Fx"* button to start typing in your formula. It should have this syntax:

<pre><code><strong>FORMAT(
</strong>"mailto: {0} ?subject= {1} &#x26;body= {2}",
%email_value_here%,
%subject_value_here%,
%body_value_here% 
)
</code></pre>

{% hint style="info" %}
Make sure to change the placeholders to values that reference your page
{% endhint %}

### Interactive guide with example

{% @arcade/embed flowId="UBzkyLluSqFqvOFHccxz" url="<https://app.arcade.software/share/UBzkyLluSqFqvOFHccxz>" %}