SMART E-SIGNATURE MOBILE PRO
Setup and Usage Instructions
1. ADD THE ELEMENT
Install the plugin and add the Smart E-Signature Mobile Pro element to your page or mobile view.
Configure the element size according to your application layout.
2. CONFIGURE THE SIGNER
Use the following fields to identify the signer:
Signer Name
Full name of the person signing the document.
Signer Email
Email address associated with the signer.
Signer Identifier
Optional identifier such as CPF, national ID, customer ID, employee ID, account ID, or another application-specific identifier.
3. CONFIGURE THE DOCUMENT
Document URL
Provide the URL of the document associated with the signature.
Document ID
Optional identifier used to associate the signature with a specific document or database record.
Generate Document Hash
Enable this option to generate a SHA-256 fingerprint of the document.
The generated hash is available through the document_hash state.
For the hash to be generated, the document URL must be accessible by the application.
4. CONFIGURE AUTOMATIC SIGNATURE IMAGE UPLOAD
App Base URL
Provide the base URL of your Bubble application.
Development example:
https://yourapp.bubbleapps.io/version-testLive example:
https://yourapp.bubbleapps.ioThis URL is required for automatic signature image upload, especially in native mobile environments.
After a successful signature, the plugin uploads the generated PNG signature image to Bubble storage.
The uploaded image URL is available through:
signature_image_url
5. CONFIGURE CONSENT
Require Consent
Enable this option when the signer must explicitly accept the electronic signature consent before confirming the signature.
Consent Text
Optional custom consent text displayed next to the consent checkbox.
IMPORTANT LANGUAGE BEHAVIOR:
If Consent Text is left empty, the plugin automatically displays the translated consent text for the currently selected language.
If Consent Text contains a custom value, the custom text overrides the automatic translated consent text.
This allows developers to use either the built-in multilingual consent messages or their own legal/contractual wording.
6. CONFIGURE LANGUAGE
Language
Defines the initial interface language.
Supported languages:
English
Português
Español
Français
Deutsch
Italiano
Nederlands
Allow User Language Selection
When enabled, the language selector is displayed inside the signature component.
The signer can change the interface language directly from the component.
Built-in translations include the signature instructions, consent message, validation messages, and default button labels.
7. CUSTOM BUTTON TEXT
Clear Button Text
Optional custom label for the Clear button.
If left empty, the plugin automatically uses the translated Clear label for the selected language.
If a custom value is provided, it overrides the automatic translation.
Confirm Button Text
Optional custom label for the Sign button.
If left empty, the plugin automatically uses the translated Sign label for the selected language.
If a custom value is provided, it overrides the automatic translation.
8. CUSTOMIZE THE SIGNATURE
Pen Color
Defines the signature stroke color.
Pen Width
Defines the signature stroke thickness.
Signature Height
Defines the height of the signature drawing area.
9. SIGNATURE PROCESS
The standard signature flow is:
1. Load the signer and document information.
2. The signer draws a signature.
3. The signer accepts the consent checkbox when required.
4. The signer presses Sign, or the Confirm Signature action is executed.
5. The plugin validates the signature and consent.
6. A unique signature ID is generated.
7. The document SHA-256 hash is generated when enabled.
8. The signature is converted to PNG/Base64.
9. The PNG signature is uploaded to Bubble storage.
10. Signature states and audit information are published.
11. The Signature Completed event is triggered.
10. AVAILABLE ACTIONS
Clear Signature
Clears the current handwritten signature.
Reset Signature
Resets the signature component and its current signature state.
Confirm Signature
Programmatically performs the same signature confirmation process as the Sign button.
This is useful when signature confirmation must be controlled by a Bubble workflow.
11. SIGNATURE COMPLETED WORKFLOW
Use the Signature Completed event to save the signature information to your database.
Example:
When Smart E-Signature Mobile Pro's Signature Completed
→ Create a new Document
or
→ Make changes to a Document
Recommended values to save:
Signature Image
= signature_image_url
Signature ID
= signature_id
Document Hash
= document_hash
Document URL
= document_url
Signed At
= signed_at
Consent Accepted
= consent_accepted
Audit JSON
= audit_json
Signed
= yes
12. SIGNATURE IMAGE
The plugin automatically uploads the signature as a PNG image when the App Base URL is correctly configured.
Use:
signature_image_url
to store or display the uploaded signature.
The signature_base64 and signature_data_uri states are also available when direct signature data is required.
13. DOCUMENT HASH
When Generate Document Hash is enabled, the plugin calculates a SHA-256 fingerprint of the document.
The result is published through:
document_hash
The hash can be stored with the signature record to provide evidence of which document was associated with the signature.
Changing the document content results in a different SHA-256 hash.
14. AUDIT DATA
The audit_json state contains structured information about the signature transaction.
Depending on the configured fields, this can include:
• Signature ID
• Signer information
• Document information
• Document hash
• Signature image URL
• Signing timestamp
• Consent status
• Signature method
• Signature format
• Signature dimensions
Store audit_json together with the signature record when an audit trail is required.
15. ERROR HANDLING
Use the plugin error and validation states/events to handle incomplete signatures or failed operations.
Examples include:
• Empty signature
• Required consent not accepted
• Signature image upload failure
• Document hash generation issues
signature_upload_error provides information when the automatic signature image upload cannot be completed.
is_uploading_signature indicates when an upload is currently in progress.
16. RECOMMENDED DATABASE STRUCTURE
A typical Document data type can include:
Title - text
Document URL - text
File - file (optional)
Status - option set
Signer Name - text
Signer Email - text
Signer Identifier - text
Signature Image - image
Signature ID - text
Document Hash - text
Signed At - date
Consent Accepted - yes/no
Consent Text - text (optional when using automatic translated consent)
Audit JSON - text
Signed - yes/no
Bubble's built-in Creator field can be used to associate the record with the logged-in user.
17. SECURITY AND LEGAL NOTICE
Protect signature records, signer identifiers, document URLs, audit information, and uploaded files using appropriate Bubble Privacy Rules.
Do not expose signature or document records publicly unless your application specifically requires it.
Smart E-Signature Mobile Pro provides technical tools for capturing electronic signatures and generating supporting evidence. It does not independently guarantee legal validity, identity verification, regulatory compliance, or enforceability.
Developers should determine the authentication, authorization, privacy, retention, and legal requirements applicable to their application and jurisdiction.
Built on Bubble
