@mishav - This is really great - Thank you for posting.
I tried to use this in a popup (HTML element within pop up) - It displayed fine…works on mobile with finger - but does not work on desktop with mouse.
Any insight as to why? No big deal - I can work around this very easily, as the desktop sig’s work no problem outside the popup
Hi @chrisschrade, good you got it working.
I hadn’t thought of testing it in a popup, so I gave it a try.
Desktop tests:
Small size pad on popup: grey area accepts drawing, not showing most of drawing area or footer with buttons.
Large size pad on popup: works the same as on page.
So the deficiency is sizing to a smaller pad on a large screen. I’ll have a look and see if this can be improved.
Is this similar to what you have found?
I also found it doesn’t work well with more than one signature pad on the same page, including popups.
Thank you so much for sharing this wonderful tool. We have implemented it into our invoicing app for customer signatures on work authorizations. I think I’ll build a little sketchbook app for my kids using it, too. 
Pardon my ignorance but is it possible to change the background image to something else, like music manuscript paper?
How about the ability to change the color and width of the “ink”?
Very cool and thanks again for sharing!
@mishav - sorry just getting back. I experimented a little further based off what I think you were saying in your last post. Seems as if the size of the pad that you created within your CSS is 700 x 400 - I made sure to make both the popup and the HTML elements larger than this size…this did not solve the problem. Still cannot sign the pad with the mouse on a desktop setting.
Again, I am good, I worked around this without a popup and it works just fine for my purposes. But wanted to respond back to you if you were looking to improve in the future.
Yes, these can all be changed:
The background image is in the style on the page HTML header.
The ink colours and styles can be altered by adding method calls into the javascript in the HTML element … i.e. coding required.
I’m making this into an element plugin, it will make things cleaner to alter these settings.
Happy you’re finding it useful!
@chrisschrade thanks for sharing your results. Since we get different results, would you be able to share a page that has the problem?
I’m also experimenting to see if I can make it less dependant on the 700 x 400 size.
find this line in the code:
signaturePad = new SignaturePad(canvas,);
then add:
{penColor: “rgb(66, 133, 244)”} (color whatever color you want)
Pretty frustrating to get everything to work in notepad++ but then it fails in Bubble. 
I have my signaturepad at 1024px and got it to work in a popup for multiple pads on the same page. I created an html document with a separate css file that i link to and put the js in the header of the html file too. Then the trick is to tick the ‘iFrame’ box on the html element.
It adds extra margin for some reason so I had to enlarage the element and the popup to 1040 to fit the pad. I get a very small border around the pad (from the popup) like that, but it works at least.
Ok well scratch that… I guess the savedURI is not accesible through the iframe…
Nice!
What is the reason you wanted it running in an iframe?
If its to avoid the css conflicting with Bubble’s responsive settings, try making these changes:
[details=css changes]alter section:
.m-signature-pad {
…
/*********** remove …
width: 700px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -200px;
and replace with: ***************/
width: 100%;
height: 100%;
remove sections:
.m-signature-pad:before, .m-signature-pad:after { … }
.m-signature-pad:after { … }
alter section:
@media screen and (max-width: 1024px) {
.m-signature-pad {
…
/******** remove …
margin: 5%;
*********/
alter section:
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.m-signature-pad {
/************* remove …
margin: 10%;
********/[/details]
Hello,
When I copy paste your html code, it doesn’t work on my app. No signature. What are the steps to replicate this esignature.
Hey @ryanrami, the pieces are listed in the first post:
Page HTML Header
HTML element
Save button
Text Input
Workflow
Database thing
Thanks for the response, however yes I did exactly as you did but my signature doesn’t work. The pad doesn’t even show up in preview. Then If I play with it and put it as Iframe the signature pad shows up but I cannot save anything to my database.
Hi @ryanrami, if you send me a link to your editor, I’ll check it for you.
Sure, thank you! I created a new page just to test it out. https://bubble.io/page?type=page&name=test&id=planafund&tab=tabs-1
Hi @ryanrami,
The Page HTML Header is empty.
Copy in the stuff in my example:
You also have two copies of “Input Saved URI”, there should just be one. Make sure the workflow event belongs to the one you don’t delete.
Good luck!
Thank you, I made it work!
Hello,
Is there a way to have the signature saved as a png or jpeg so I can simply click on the link and it will open up ? I see you use the uri to display the signature on bubble what if I want to view it outside bubble. I would like to save the image and put it on microsoft word.
Not this particular method. But I am making it into a plugin, which will have that ability. See if you can encourage me to bump it up the priority queue 
Hey @mishav, did I understand u correctly? You´re creating a plugin for bubble to do this signature thingy? That would be so awesome!
I´ve tried implementing your jscript example and managed to get it to update but I want to store the image on the bubble server. Any idea if there´s a way to upload the saved image?
Thanks so much, here´s the link to my page if you could help out, would be awesome.
