The signature capture allows users to input their signature by signing on the screen. The signature is captured and saved in the backend with a watermark. 

Usage

Signature Capture is intended for users to authorize workflows when they sign while using this feature. Some use cases include signing forms or documents, approving an order, confirming a task, indicating reception of an article, signing off for another person, etc. 

After users generate an autograph, they have the option to save the signature as a bitmap or SVG watermark which can be saved with the final signature, or it will be stored in the backend.

Structure

A. Stacked Modal 

The stacked modal title includes the title of what is being signed, a “Cancel” button for user to abandon the interaction, and the “Done” button enabled after your user signs.

B. Done Button

The “Done” button is disabled on the initial signature screen. It enables once your user signs and allows your user to finish the signing process by saving the signature.

C. Signature Line

The signature line prompts your user to sign in the space provided.

D. Tab Bar

The tab bar marks the bottom of the signature capture and contains the “Clear” button.

E. Clear Button

The “Clear” button can be used if your user wants to erase what they have currently signed.

F. Optional Watermark

The SDK supports an optional watermark which includes 2 lines of text and can be saved as a Bitmap or SVG with the final signature. The text can include a timestamp, unique ID, job title, etc.

Variations

Light and Dark Mode

Signature Capture feature is offered in both light and dark mode.

Behavior & Interaction

Signature Activation Cell

Users can activate signature capture by selecting the signing icon to the far right of the cell.

Signature Activation Inside Form

This is an example of what the signature capture activation button will look like inside a form, task, job order, etc.

Adaptivity

Compact and Regular

Signature Capture is supported in both regular and compact width.  The signature capture fills the full screen and is responsive across different devices.

Specifications

Regular Signature Cell

The padding for the left and right of the screen is 40pt.

The padding between the signature line and ‘clear’ button is 40pt.

The signature line has a maximum width of 380pt and maximum height of 22pt.

The top padding for the text in ‘clear’ button is 10pt.

The ‘clear’ button has a maximum height of 83pt while the width is dependent on a specific iOS screen width.

There are no fixed dimensions for the screen size because they are dependent on the different iOS screens.

Compact Signature Cell

The padding for the left and right of the screen is 40pt.

The padding between the signature line and ‘clear’ button is 80pt.

The signature line has a maximum width of 295pt and maximum height of 22pt.

The top padding for the text in ‘clear’ button is 10pt.

The ‘clear’ button has a maximum height of 83pt while the width is dependent on a specific iOS screen width.

There are no fixed dimensions for the screen size because they are dependent on the different iOS screens.