# Signature Pad

**Signature Pad** is a **mobile‑specific UI component** in ONEWEB Page Designer that allows users to **draw, capture, and save handwritten signatures** directly on the screen.\
Captured signatures can be stored as **Base64‑encoded images** and later persisted to a database or passed to backend systems.

This component is commonly used for:

* Contract signing
* Consent or approval confirmation
* Acknowledgement forms
* Field service and on‑site workflows

***

### Using Signature Pad in Page Designer

The Signature Pad component is designed to be **simple to configure** and integrates seamlessly with **Page State Parameters**.

***

#### Step 1: Add Signature Pad to the Page

1. Open the page in **Page Designer** (mobile application)
2. Drag and drop the **Signature Pad** component onto the design canvas

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FFeXrzDJzhQy7kWA8aMOV%2FSignaturePad1.jpg?alt=media&#x26;token=19160d8a-03ba-4fcd-b9ef-31ad71a06844" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Signature Pad component on page</em></p>

***

#### Step 2: Bind Signature Pad to Page State Parameter

To store the captured signature temporarily, bind the Signature Pad to a **Page State Parameter**.

1. Select the **Signature Pad** component
2. Configure its **data binding**
3. Map it to a **Page State Parameter** (String type recommended)

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FZSfzrgY2Zvf5XeKus3U6%2Fimage.png?alt=media&#x26;token=339d4944-0cee-4933-b387-738960deaf12" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Bind Signature Pad to Page State Parameter</em></p>

This parameter will temporarily hold the signature data.

***

#### Step 3: Save the Signature

When the user draws a signature and clicks the **Save** button within the Signature Pad:

* The signature is captured automatically
* The image is stored as a **Base64‑encoded string**
* The value is assigned to the mapped Page State Parameter

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FFB0nRgEqqVXWKm0xDnq5%2Fimage.png?alt=media&#x26;token=ede0e52c-65f8-4bf5-8a2c-71c025528a13" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Signature saved as Base64‑encoded image</em></p>

***

### Persisting the Signature

After the signature is saved to the Page State Parameter:

* It can be sent to a backend system using **Microflows**
* It can be persisted into a database
* It can be included in generated documents or reports

The signature remains available as long as the page state is active.

***

### Design Perspective

As part of **Page Designer best practices**:

* Use Signature Pad only on **mobile‑optimized pages**
* Always bind to a Page State Parameter of type **String**
* Persist the signature promptly if it must be retained
* Inform users clearly when the signature has been saved

Signature Pad enhances mobile UX by enabling **paperless, on‑device signing** within applications.


---

# 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.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/pages/page-features/signature-pad.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.