Signature Drawing Pad

1. Introduction

TheSignatureDrawingPadcomponent allows users to capture handwritten signatures directly within a web application. It provides a responsive and intuitive interface for signing documents, making it ideal for applications such as contracts, forms, and agreements where digital signatures are required.

2. Features

• Capture signatures with touch or mouse input.
• Undo and clear functionalities for easy corrections.
• Customizable appearance including colors, button styles, and header text.
• Supports submission of signature images via a webhook.
• Displays success and error messages after submission.

3. Installation & Setup

To add theSignatureDrawingPadcomponent to your Framer project

• Open your Framer project.
• Navigate to the Marketplace.
• Search for "SignatureDrawingPad" and click on it.
• Click the "Add to Project" button.
• Drag and drop the component from the elements panel into your design canvas.

4. How to Use

• Configure Properties: Select the SignatureDrawingPad component in your canvas to access the property controls panel.
• Set Dimensions: Adjust the width and height to fit your design requirements.
• Customize Appearance: Modify the stroke, colors, and border properties for aesthetic adjustments.
• Button Settings: Enable or disable the undoButton, clearButton, and submitButton. Customize their appearance and text as needed.
• Submission Settings: Set the webhookUrl for signature submissions and customize success/error messages.
• Integrate Submission Logic: Optionally, define an onSubmit callback function to handle the signature data after submission.

5. Property Controls Reference

Sets the width of the drawing pad in pixels.

• width (type: Number, default: 480)
• height (type: Number, default: 320)

Sets the height of the drawing pad in pixels.

• stroke (type: Object, default: { color: "#1E293B", width: 2.5 })
• Configures the stroke properties for drawing.-color(type:Color, default:#1E293B)Specifies the color of the signature stroke.-width(type:Number, default:2.5)Sets the width of the stroke in pixels.
• colors (type: Object, default: { header: "#D1E8FF", canvas: "#FFFFFF", headerText: "#1E293B", placeholder: "#94A3B8" })
• Defines the color scheme for the component.-header(type:Color, default:#D1E8FF)Background color of the header.-canvas(type:Color, default:#FFFFFF)Background color of the drawing canvas.-headerText(type:Color, default:#1E293B)Color of the header text.-placeholder(type:Color, default:#94A3B8)Color of the placeholder text.
• border (type: Object, default: { width: 1, color: "#D1E8FF", radius: 16 })
• Configures the border appearance.-width(type:Number, default:1)Width of the border in pixels.-color(type:Color, default:#D1E8FF)Color of the border.-radius(type:Number, default:16)Corner radius of the border in pixels.
• text (type: Object, default: { headerText: "Signature Line", placeholder: "sign here" })Configures text properties.-headerText(type:String, default:"Signature Line")Text displayed in the header.-placeholder(type:String, default:"sign here")Placeholder text shown in the drawing area.
• buttonSize (type: Enum, default: medium)Specifies the size of the buttons. Options:small,medium.
• undoButton
• - enabled: Toggles whether the Undo button is displayed and usable.
• - text: Label text shown on the Undo button.
• - color: Background color of the Undo button.
• - textColor: Text color of the Undo button label.
• - borderStyle: Border style for the button (e.g., none, solid).
• - borderWidth: Border thickness of the button.
• - borderColor: Border color of the button.
• clearButton
• - enabled: Toggles whether the Clear button is displayed and usable.
• - text: Label text shown on the Clear button.
• - color: Background color of the Clear button.
• - textColor: Text color of the Clear button label.
• - borderStyle: Border style for the button (e.g., none, solid).
• - borderWidth: Border thickness of the button.
• - borderColor: Border color of the button.
• submitButton
• - enabled: Toggles whether the Submit button is displayed and usable.
• - text: Label text shown on the Submit button.
• - color: Background color of the Submit button.
• - textColor: Text color of the Submit button label.
• - borderStyle: Border style for the button (e.g., none, solid).
• - borderWidth: Border thickness of the button.
• - borderColor: Border color of the button.