> 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/nfc-scanner.md). # NFC Scanner
The Avonni NFC Tag Scanner enables bidirectional communication with NFC tags from within Salesforce mobile flows. Use it to read data from NFC tags (e.g., asset tags, product labels, access badges) or write data to them — directly from a Flow screen. *** ## Overview ### Example Use Case: Retail Product Interaction In a retail environment where NFC tags are affixed to products: 1. **NFC Tags on Products:** Each tag holds information about the product — descriptions, reviews, pricing, etc. 2. **Customer Interaction:** Customers tap their phones to the tags. 3. **Seamless Experience:** The Salesforce app instantly displays the relevant product details, enriching the shopping experience. *** ## Configuration To configure it, click the component on the Flow screen. The Edit NFC Tag Scanner Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab. ### Properties * **Type** — determines the scanner mode. **Required.** * **Read**: retrieve data stored on an NFC tag. * **Write**: encode data onto an NFC tag. {% hint style="warning" %} The Write functionality is currently limited to specific generic fields like name and email. {% endhint %} * **Open On Load** — when enabled, the NFC scanner activates automatically when the Flow screen loads. Ideal for flows centered around NFC tag interaction. * **Instruction Text** — guidance text displayed in the scanning interface. Example: "Hold your phone near the NFC tag to read its contents." * **Success Text** — message displayed to confirm a successful scan. Example: "NFC tag read successfully!" ### Payload The **Payload** group appears when **Type** is set to **Write**. Configure the list of data items to write to the NFC tag. Each payload item has: * **Type** — the data format to write: **Text**, **URL**, or **Email**. * **Value** — the actual content to write to the tag. ### Button Customize the trigger button that opens the NFC scanner: * **Button Label** — text displayed on the button. * **Button Variant** — visual style of the button (Neutral, Brand, Destructive, etc.). * **Button Icon Name** — optional icon displayed on the button. * **Button Icon Position** — where the icon appears: Left or Right. * **Button Type** — HTML button type: button, reset, or submit. * **Button Stretch** — when enabled, the button takes the full available width. * **Button Disabled** — greys out the button and prevents interaction. *** ### Step-by-Step Guide 1. **Drag and Drop**: Add the Avonni NFC Tag Scanner component to your mobile screen flow. 2. **Configure Settings**: Choose the type of operation (Read or Write) and customize the instruction and success text. 3. **Design Flow Logic**: * **Read Mode:** Use the extracted data to populate fields, display information, or trigger actions within your flow. * **Write Mode:** Prepare the data you want to write to the tag and handle the successful write event. *** ## Interactions [Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the NFC Tag Scanner. Configure them from the **Interactions** tab of the Edit NFC Tag Scanner panel. ### Successful Scan Fires when the NFC scanner successfully reads or writes a tag. Use this to store the scanned value in a flow variable, navigate to the next screen, or trigger an Apex action. *** ## Styling The **Style** tab gives you fine-grained control over the NFC Scanner's appearance. Configure it from the **Style** tab of the Edit NFC Scanner panel. {% tabs %} {% tab title="Margin" %} Controls outer spacing. * **Top:** Space above the component. * **Right:** Space to the right of the component. * **Bottom:** Space below the component. * **Left:** Space to the left of the component. {% endtab %} {% tab title="Padding" %} Controls inner spacing. * **Top:** Inner space at the top. * **Right:** Inner space on the right. * **Bottom:** Inner space at the bottom. * **Left:** Inner space on the left. {% endtab %} {% tab title="Border" %} Customizes the border. * **Color:** Border color. * **Size:** Border thickness. * **Style:** Border style (solid, dashed, etc.). * **Radius:** Corner rounding. {% endtab %} {% tab title="Flow Dialog" %} Adjusts display when opened as a modal dialog inside a Flow screen. * **Width:** Dialog width. * **Height:** Dialog height. * **Background Color:** Dialog background color. {% endtab %} {% tab title="Button Border" %} Customizes the trigger button's border. * **Size:** Border thickness of the button. * **Style:** Border style of the button. * **Radius:** Corner rounding of the button. {% endtab %} {% tab title="Button Text" %} Controls the typography of the trigger button label. * **Font Size:** Size of the button label text. * **Font Style:** Style of the button label text (normal, italic). * **Font Weight:** Weight of the button label text. * **Font Family:** Font family used for the button label. * **Line Height:** Line height of the button label text. {% endtab %} {% tab title="Button Shadow" %} Applies shadow effects to the trigger button. * **Shadow:** Default shadow of the button. * **Shadow Focus:** Shadow displayed when the button is focused. {% endtab %} {% endtabs %} ## Output Variables The NFC Tag Scanner exposes output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the NFC Tag Scanner component, and pick the output variable you need. ### Scanned Values When users scan one or more NFC tags, these variables capture the scanned data. | Output variable | Type | What it returns | | ------------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | **Value** | Text (String) | The first value read from the NFC tag. Use this when scanning a single tag per screen. | | **Value Collection** | Text Collection (String\[]) | All scanned NFC tag values as a collection. Use this when multiple scans are expected. | | **Value Collection Serialized** | Text (String) | All scanned NFC tag values as a JSON string. Useful for passing to an Apex action that processes multiple tags at once. | > **Example:** A warehouse inventory flow uses the NFC Tag Scanner to read asset tags. After the screen, use **Value** to look up the scanned asset's record in Salesforce and display its details on the next screen. *** ## Key Considerations * Ensure that your mobile device and Salesforce app have NFC capabilities enabled. * For write operations, be mindful of the data format and size supported by the NFC tag. * The Avonni NFC Tag Scanner prioritizes security and privacy in handling NFC interactions. *** --- # 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/nfc-scanner.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.