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 works

We encourage you to take a look at the demo and editor page to see how the plugin works: