Signature

The Signature widget provides a drawing pad where users can sign with a finger, stylus, or mouse. You can clear the drawing, upload it as an image, and save the uploaded image URL in your database.

caution

A captured signature is sensitive user data. The drawing alone does not verify a user's identity or establish legally valid consent. Design your consent flow for the requirements that apply to your app, and clearly explain how the signature will be used, stored, and deleted.

Using the Signature Widget

1. Adding a Signature Widget

To add and size the widget:

1. Add the Signature widget from the Form Elements section of the Widget Palette, or add it from the Widget Tree.
2. Select the widget and open the Properties Panel.
3. In the Signature properties, set its Width and Height.

Give the pad enough space for users to sign comfortably on the smallest supported screen.

2. Uploading a Signature

The Upload Signature action uploads the drawing from a selected Signature widget to Firebase Storage. After the upload succeeds, you can use the uploaded image URL in other widgets or actions.

info

Currently, the Upload Signature action supports uploads only to Firebase Storage.

Before starting the upload, make sure the user has drawn a signature. Also disable repeated submission while the upload is running, show progress, and provide a clear error message if it fails.

To upload a signature:

1. Select the widget that submits the signature, such as a Button.
2. Open the Actions tab and select + Add Action.
3. Select Upload Signature.
4. Set Signature to Upload to the Signature widget containing the drawing.
5. Optionally, enable Crop Exported Image to crop the uploaded image to the area containing the drawing instead of exporting the full Signature widget canvas.

If the canvas width or height is unset or infinite, the exported image crops to the minimum size along that axis. The signature is centered in the exported canvas.

3. Accessing the Signature

After the Upload Signature action succeeds, access the uploaded image URL from Widget State > Uploaded Signature URL. Select this value when setting an Image widget's source or passing the URL to another action. You can also save the URL in a database field so the signature remains available after the page closes.

Clearing a Signature

The Clear Signatures action erases the current drawing from one or more Signature widgets.

warning

This action does not delete an image that has already been uploaded, and it does not clear a URL already stored in your database.

To clear a drawing:

1. Select the widget that will clear the pad, such as an IconButton.
2. Open the Actions tab and select + Add Action.
3. Select Clear Signatures.
4. Under Signature Fields, select the Signature widget or widgets to clear.

If the signature has already been submitted, separately delete the stored file and clear its database URL. See Clearing or Deleting Media for the difference between clearing a local value and deleting uploaded media.

Customizing the Signature

Select the Signature widget and use its properties to configure:

• Width and Height: Set the size of the drawing pad.
• Pen Color: Set the color of the signature stroke.
• Pen Stroke Width: Set the thickness of the signature stroke.
• Background Color: Set the background color shown in the Signature widget.
• Export Background Color: Set the background color of the saved signature PNG.

info

Signature widget colors are set when the widget initializes and do not update afterward. Use a pen color that contrasts clearly with the pad and avoid making the stroke so thin that it becomes difficult to see.

Best Practices

• Explain why the signature is required before asking the user to draw it.
• Apply database and storage rules that restrict access to authorized users.
• Define how long signatures are retained and provide a deletion process when required.
• Pair the signature with relevant consent details, such as the agreement version, user identity, and submission time, when appropriate for your use case.
• Provide a clearly labeled way to clear and redraw the signature before submission.
• Do not rely on color alone for instructions or error feedback.
• Provide an accessible alternative when a user cannot draw a signature with a pointer or touch input.