> 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/document-scanner.md).

# Document Scanner

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

{% hint style="warning" %}
The Avonni Document Scanner component leverages your device's security features. It's available **exclusively on the Salesforce Mobile App**.
{% endhint %}

## Overview

The Document Scanner lets users photograph a physical document — a form, contract, label, or ID — and automatically extracts its text using OCR. The extracted text is available as an output variable you can use to populate Salesforce fields or drive subsequent flow logic.

**Tips for best results:**

* Ensure images have good lighting and clear, legible text.
* Test on the Salesforce Mobile App; the component does not function in a desktop browser.

## Configuration

To configure it, click the component on the Flow screen. The Edit Document Scanner Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Properties

**Open On Load** — when enabled, the scanner launches automatically as soon as the screen loads. Ideal for flows where scanning is the primary action on the screen.

**Image Source** — determines where the image to scan comes from:

| Option            | When to Use                                                           |
| ----------------- | --------------------------------------------------------------------- |
| **Input Image**   | An image has already been captured or uploaded earlier in the flow    |
| **Photo Library** | Let the user pick an existing image from their device's photo library |
| **Device Camera** | Let the user take a new photo directly with the device camera         |

**Base64 Image Data** — only visible when **Image Source** is set to **Input Image**. Connect this to a flow variable containing the base64-encoded image bytes to scan.

**Show Preview** — when enabled, a preview of the scanned document is displayed after capture so the user can review the result before the flow continues.

### Button

Customize the trigger button that opens the scanner:

| Setting                  | What It Controls                                             |
| ------------------------ | ------------------------------------------------------------ |
| **Button Label**         | Text displayed on the button                                 |
| **Button Variant**       | Visual style — Brand, Neutral, Destructive, etc.             |
| **Button Icon Name**     | Lightning icon shown on the button                           |
| **Button Icon Position** | Whether the icon appears to the Left or Right of the label   |
| **Button Stretch**       | When enabled, the button expands to fill the available width |
| **Button Disabled**      | Grays out the button so it is visible but cannot be clicked  |
| **Button Type**          | HTML type attribute — Button, Reset, or Submit               |

## Use Cases

Imagine you're a healthcare provider at a medical conference. With the Avonni Document Scanner, you can:

1. Photograph a flyer detailing a new medical device directly within your Salesforce app.
2. Extract the text from the flyer, including product name, features, and contact information.
3. Instantly save this information to a new Salesforce note or a custom "Conference Materials" object for later review.

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Document Scanner. Configure them from the **Interactions** tab of the Edit Document Scanner panel.

### Successful Scan

Fires when OCR completes and text is successfully extracted from the scanned document. Use this to save the extracted text to a Salesforce field, navigate to the next screen, or trigger any downstream flow logic.

## Styling

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

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing around the component.

* **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 between the component's border and its content.

* **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 drawn around the component.

* **Color:** Border color.
* **Size:** Border thickness.
* **Style:** Border style (solid, dashed, dotted, etc.).
* **Radius:** Corner rounding of the border.
  {% endtab %}

{% tab title="Flow Dialog" %}
Adjusts display when the component is 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 border of the scanner trigger button.

* **Size:** Button border thickness.
* **Style:** Button border style.
* **Radius:** Button border corner radius.
  {% endtab %}

{% tab title="Button Text" %}
Controls the typography of the button label.

* **Font Size:** Label font size.
* **Font Style:** Label font style (normal, italic, etc.).
* **Font Weight:** Label font weight.
* **Font Family:** Label font family.
* **Line Height:** Label line height.
  {% endtab %}

{% tab title="Button Shadow" %}
Applies shadow effects to the trigger button.

* **Shadow:** Default shadow of the button.
* **Shadow Focus:** Shadow applied when the button is focused.
  {% endtab %}
  {% endtabs %}

## Output Variables

The Document Scanner exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Document Scanner component, and pick the output variable you need.

### Scanning Results

Populated when OCR completes successfully (requires the **Successful Scan** interaction to have fired).

| Output variable      | Type                                         | What it returns                                                                                               |
| -------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| **Value**            | Apex (DocumentScannerDocument)               | The most recently scanned document, including the extracted text and any metadata returned by the OCR engine. |
| **Value Collection** | Collection of Apex (DocumentScannerDocument) | All scanned documents captured during the current screen session, in scan order.                              |

> **Example:** After scanning an intake form, store **Value** in a flow variable, then use its extracted text field to pre-populate a case description field on the next screen.

### Flow Interaction Output Variables

Like all interactive Flow components, the Document Scanner exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# 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/document-scanner.md?ask=<question>&goal=<endgoal>
```

`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.