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.