ᴺᴱᵂ ᴾᴸᵁᴳᴵᴺ 🐝 Signature Pad input


Signature pad



Highly customisable and reliable signature input box.

Hi there!
We just release this new plugin to the Bubble marketplace :honeybee: !

→ The most advanced and reliable plugin for desktop and mobile that lets you add signature input on your app.
Highly customisable with a bunch of features such as background images or pencil color and width, as well as optimised with auto-export (no workflow to export!) and even auto-binding.
The plugin supports exporting in different file formats and lets you upload the file to S3 for sharing.

:arrow_right: Support draw, erase, undo and clear
:arrow_right: Auto-export (no-workflow)
:arrow_right: Support auto-binding
:arrow_right: Export as PNG, JPEG, or SVG
:arrow_right: Support transparency
:arrow_right: Crop empty space in signature
:arrow_right: Custom background color
:arrow_right: Custom background image
:arrow_right: Export and import signatures
:arrow_right: Fully responsive - work on mobile
:arrow_right: Based on a reliable JS library
:arrow_right: Complete documentation






An aside, this has to be the prettiest plugin presentation I have ever seen!
And the interactive installation, superb!


Looks really nice, is there any option to auto save to S3 when the user lets go of the mouse? So when they finish signing there’s no extra buttons to press? Also I’m assuming this doesn’t use any external APIs or anything?

1 Like

Thanks, really appreciated it :upside_down_face:
I’ve put quite some effort into it so it’s nice to see it was worth it!

This is a feature that we initially wanted to integrate, but we noticed it can be quite dangerous if a user keeps playing around with the input, as it will constantly send data to S3 without overriding/erasing the previous versions.

This remains is a feature we could integrate if there is some demand though :honeybee:

@vnihoul77 Great stuff.

Bookmarked! :smiley:

:clap: Happy to hear!

Yea maybe just a option to enable “instant uploads” or something and have it write over a field every time. I know It sounds like a lot of database writing but for a customer that just wants to sign and be done it’s very useful.

Alright, let me check on this

Yea or maybe it waits 2 seconds or something to see if there’s any extra things scribbled before writing to the database. Just incase someone does a smiley face or something it doesn’t write 6 times :grinning_face_with_smiling_eyes:

Yes but that’s also the issue because if it’s too long you might redirect the user, change the page or whatever before it’s even saved.
I’ll introduce it as an experimental feature with some “:warning::warning:” next to it :slight_smile:

Can i use it for KYC as verification for user signature?

Hey @arumizan, yes indeed you can use it! :upside_down_face:

But keep in mind that depending on the usage and the country you are operating in, you might be required by law to collect signatures using certified third parties.

Can you give a simple workflow for matching 2 signature for verification process

Oh, I misunderstood your initial request. :no_mouth:
Well, I’m afraid there won’t be any simple workflow to achieve it.
But here are two ways among others that come to my mind and that should allow you to do it:

  1. Compare the difference between the two images using a third-party service (like this)

  2. As the plugin also export the path of the signature, you could also iterate through each point in the signature’s path and calculate the distance between them to finally compare it to the distance of each point of the second signature.

Found a bug: If the signature pad is hidden like on a pop-up and the page is rescaled via the print dialogue or any other. If you show the pop-up with the signature pad on, it won’t capture the drawing until the page is rescaled with the signature pad visible. Here is a video showing what I mean: Screen Recording 2022-10-18...

Hey @christo1 , thanks for the feedback.
Let me investigate this bug further, I’ll get back to you within the next days!

Any update on this? As my signatures are captured on iPad and the iPad’s orientation may change as it is passed to the client, while the signature pad is hidden, we’ve had several users complain that signing does not work.

Hi @vnihoul77,

Could you please incorporate a new feature? I’d like to enable users to enter their first and last names in a form and then generate a handwritten signature automatically.

That doesn’t really related to this signature pad plugin, you need a plugin to render text in a “signature-like” font.

I am interested though if you find something like that. Like when you sign online with DocuSign they show your name in cursive, etc.

Or maybe that would just be a text element w/ a certain font and you use a plugin to capture the element as a jpg/png.