Hi there,
is there a way to integrate a signature / drawing tool into a weweb app?
Thank you and best regards,
Jörg
1 Like
It’s 100% doable using some javascript library. It can be handled by js actions with some limitations or in a custom component for weweb to have it available as a native block to drag and drop in the editor.
There should be also third party services with embeddable widgets.
Do you have a particular example/service in mind? Have you used a drawing tool in other apps before?
Thanks for your answer, dorilama,
unfortunately, I am not familiar with Javascript. So that is not an option for me.
Will go on the hunt for a third party service. Any suggestions? It must be European since I am working under strict GDPR constraints.
Thank you and best regards,
Jörg
I used custom solutiom with js.
Never tried external services, but if your main use is for signatures you can start looking into saas to handle documents/forms.
As Mariano said, you either can go with a SaaS specialized in this kind of things, which would also I think be good as you might get some sort of a security or QA layer, or try to implement it yourself/contract someone to make a component for you. How are you planning to store the signatures?
I would love to do a livestream with someone tomorrow evening on setting this up.
I did a bubble plugin signature pad, won’t be a heavy lift to port it over.
3 Likes
Oo, this is such a good feature. How did you all achieve this in the end?
js library integrated with a custom component.
which js library did you use? And could please show how you integrated it.
Thank you and best regards
the most used library is signature_pad.
To implement it have a look at the developers docs of weweb plus the video tutorial the team made on youtube. It’s very useful to read the open source code of official weweb components to see how they do their stuff. A quick search on github will show you how other project integrated it in vue.
Of course an external service embeddable in the page will be much quicker.
Hi dorilama
thanks for your feedback. If it would only be so simple. I have checked out the developer docs and github. It is way beyond my capabilities.
I have suggested it for one of the weweb office hours. Hopefully it gets picked up there.
In the meantime I will attempt to implement it with Aidaforms.
Thank you and best regards
1 Like
Hi jaredgibb,
I am game to watch you doing it. Couldn’t contribute much, though.
Did someone got it working with JS?
Looking for the same! 
Made a tutorial on how to implement a Signature pad using the signature_pad library!
Let me know if you have any questions
4 Likes
You a life saver man! You probably saved me dozens of hours trying to figure this out.
There is just one thing that still doesn’t work on my side: it’s when I updated the signature. It works the first time and updates the image variable (var: signature), but the second time I update the signature, it sets it to null.
Glad it helped you!
There might be something a bit off on your workflows 
Can you share some screenshot/screen recording of your setup?
Hi @jptrinh
Apologies for the late reply.
Thank you for taking the time to review this.
Here is a loom video of my setup and the bug: Signature Pad Issue | Loom
Let me know if you need to see anything else in my setup.
Hey @benjtlv
On the Mount Signature Pad workflow, on the Add Event listener, you added a parameter once: true to the endstroke event. So the event listener is removed after being called once (see doc)
I think that should solve your issue!
Hi @jptrinh
Indeed it seem to have solved the issue.
Actually it’s quite odd because it was set to false at the beginning and it wasn’t working, then I set it to true just to see what it does. It didn’t help so I let it to true until I come back on it.
And now it works. Pretty strange but problem solved
1 Like