> 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/input-pen.md). # Input Pen ## Overview
The Input Pen provides a digital drawing and signature canvas with customizable pen modes, colors, and toolbar controls. Drawings can be captured as a base64-encoded image or saved directly as Salesforce Files attached to a record. *** ## Tutorials | Name | Description | Image | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | -------------------------------- | | [**Add the custom toolbar**](/flow/tutorials/components/input-pen/add-the-custom-toolbar.md) | This guide will show you how to add a custom toolbar to the signature pad screen. | ![](/files/Aw4gVVgPSiNjKwBLxzDh) | | [**How to Store Input Pen Drawings as Attachments in Salesforce**](/flow/tutorials/components/input-pen/how-to-store-input-pen-drawings-as-attachments-in-salesforce.md) | This tutorial will guide you through saving the signature as a file. | ![](/files/Aw4gVVgPSiNjKwBLxzDh) | *** ## Configuration To configure it, click the component on the Flow screen. The Edit Pen Input Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab. ### Properties * **Label** — text label displayed above the canvas. * **Mode** — the default drawing tool loaded when the component opens:
ModeDescription
DrawFine-tipped pen style, ideal for detailed sketches or handwriting.
PaintBroad brush stroke, simulating painting on a canvas.
InkSmooth and flowing writing experience, suitable for regular handwriting or calligraphic styles.
EraseRemoves specific parts of the drawing or text.
* **Toolbar Position** — whether the drawing toolbar appears at the **Bottom** or **Top** of the canvas. * **Color** — the default pen color when the component loads. * **Background Color** — the background color of the drawing canvas. * **Show Signature Pad** — when enabled, a signature line is added at the bottom of the drawing area, transforming the canvas into a signature pad.
* **Hide Controls** — hides the toolbar, giving the user more drawing space. The toolbar contains tools like pen styles, colors, and erasers. * **Required** — marks the field as mandatory. * **Read Only** — the canvas is visible but not interactive. * **Disabled** — greys out the component and prevents interaction. * **Field Level Help** — optional tooltip text shown next to the label. ### Save As Content Document Control whether and how the drawing is saved as a Salesforce File (ContentDocument).

How to access the Save as content settings

SettingFunction
Save as Content DocumentIf enabled, saves the drawing as a ContentDocument in Salesforce when the user clicks the Save As button (or automatically if Auto Save is on).
Auto Save Content DocumentAutomatically saves the drawing as a ContentDocument without requiring the user to click a button.
Content Document IdExisting Content Document ID to load. Use this to edit a previously saved drawing.
Content Document TitleSets a title for the ContentDocument.
Content Document Linked Entity IDLinks the ContentDocument to a specific Salesforce record ID (by using a variable).
Save as Button LabelCustomizes the text on the Save As button.
{% hint style="warning" %} **Permissions required** Save as Content Document performs the file insert as the running user. The user must have **Create** access to both `ContentVersion` and `ContentDocumentLink`. Authenticated Salesforce users typically have these permissions; **guest users on Experience Sites do not**. See [Using the Input Pen with guest users below](#using-the-input-pen-with-guest-users). {% endhint %} ### Advanced Options * **Hidden Buttons** — select which toolbar buttons to hide from the canvas UI (Pen, Paintbrush, Ink, Eraser, Size, Color, Background, Download, Undo, Redo, Clear). Simplifies the toolbar for focused use cases. * **Size** — the default pen size (in pixels) when the component loads: 1px through 36px. *** ## Using the Input Pen with guest users When the Input Pen is used within an Experience Site for unauthenticated (guest) users, the built-in Save as Content Document feature fails. Salesforce's default security posture prevents guest users from creating `ContentVersion` and `ContentDocumentLink` records, and the component's user-mode insert is blocked before the file is created. To capture signatures from guest users, handle the file creation yourself in system context: 1. On the Input Pen, **turn off** *Save as Content Document* and *Auto-save Content Document*. 2. In your flow, read the component's **Value** output — the base64 PNG of the signature. It's populated regardless of the Save As settings. 3. Pass **Value** into a custom Apex-invocable action declared as `without sharing`. That action inserts the `ContentVersion` (and, optionally, a `ContentDocumentLink` if you want to attach it to a record) on behalf of the guest. Running in system context bypasses the guest profile restrictions. {% hint style="info" %} Granting guest users Create on `ContentVersion` / `ContentDocumentLink` directly on the profile is technically possible but not recommended. Salesforce's Secure Guest User hardening rules push against it, widening your site's attack surface. A `without sharing` invocable is the cleaner path. {% endhint %} *** ## Interactions [Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Pen Input. Configure them from the **Interactions** tab of the Edit Pen Input panel. ### Save As Button Click Fires when the user clicks the Save As button. Use this to save the drawing as an image, attach it to a record, or trigger any downstream flow logic. This interaction is only available when **Auto Save Content Document** is disabled — enabling auto-save hides the button. *** ## Styling The **Style** tab gives you fine-grained control over the Input Pen's appearance. Configure it from the **Style** tab of the Edit Input Pen 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:** Space between the top edge and inner content. * **Right:** Space between the right edge and inner content. * **Bottom:** Space between the bottom edge and inner content. * **Left:** Space between the left edge and inner content. {% endtab %} {% tab title="Size" %} Controls dimensions. * **Height:** Sets the height of the drawing canvas body. {% endtab %} {% tab title="Label" %} Styles the label displayed above the canvas. * **Color:** Text color of the label. * **Font Size:** Size of the label text. * **Font Style:** Style of the label text (e.g., normal, italic). * **Font Weight:** Weight of the label text (e.g., normal, bold). {% endtab %} {% tab title="Flow Dialog" %} Adjusts display when opened as a modal dialog inside a Flow screen. * **Width:** Width of the dialog. * **Height:** Height of the dialog. * **Background Color:** Background color of the dialog. {% endtab %} {% endtabs %} ## Output Variables The Avonni Input Pen exposes two output variables you can use downstream in your flow. | Output | Type | Description | | ----------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Value** | String | The base64-encoded PNG of the drawing. Always populated as soon as the user draws, regardless of the Save As Content Document settings. Use it when you want to handle persistence yourself. | | **Content Document Id** | String | The Id of the `ContentDocument` created by the component when *Save as Content Document* is enabled. Empty otherwise. | --- # 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/input-pen.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.