In a nutshell: when you install the plugin, you will see a new element in the visual elements section of the Bubble editor, named Signature Pad.
✍️ To begin, add the element to your page. The signature pad will appear in the area you define. The canvas automatically adapts to the size of the plugin element.
↔️ The element is fully responsive and will adapt to the size you set.
✨ You can customize the pad's properties in the element inspector:
Crucial Setup
App ID (name): This is crucial for file uploads. Enter your Bubble application's name here (e.g., my-cool-app).
Isn't live version: This is crucial for file uploads. You must insert Bubble's dynamic data expression Isn't live version in this field.
Appearance & Pen Settings
Background Color: Choose a background color or leave it empty for a transparent background.
Pen Color: Set the color of the signature line.
Pen - Max Width: The width of the stroke when drawing slowly.
Pen - Min Width: The width of the stroke when drawing quickly.
Pen - Velocity Weight: A value (usually between 0 and 1) that controls how drawing speed affects stroke thickness.
Resolution Multiplier: Increases the final image quality. A value of 2 is recommended for sharp signatures on high-resolution (Retina) displays. Note that higher values will result in larger file sizes.
Workflow Actions:
You will find two new actions available for this element:
Save signature: This action saves the current drawing. You can set the following parameters:
Format: Choose between PNG and JPEG.
Filename: Set a custom name for the file (without the extension).
Attach to: Provide the Unique ID of a Bubble object to make the file private.
Reset signature pad: This action clears the canvas.
Events and States:
Event: Signature Saved: Triggered after the signature is successfully uploaded.
Event: Signature is Empty: Triggered if you try to save an empty signature.
State: Signature Image URL: Contains the URL of the saved image file.
See how it worksWe encourage you to take a look at the demo and editor page to see how the plugin works:
Built on Bubble
