# How to integrate a signature / drawing tool in weweb?

**URL:** https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136
**Category:** Ask us anything
**Created:** [August 31, 2023, 6:41pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136 "2023-08-31T18:41:16Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)
#### Post date: [August 31, 2023, 6:41pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/1 "2023-08-31T18:41:16Z")

</div>

Hi there,

is there a way to integrate a signature / drawing tool into a weweb app?

Thank you and best regards,

Jörg

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [August 31, 2023, 7:44pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/2 "2023-08-31T19:44:40Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)
#### Post date: [August 31, 2023, 9:13pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/3 "2023-08-31T21:13:13Z")

</div>

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

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [August 31, 2023, 9:27pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/4 "2023-08-31T21:27:54Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)
#### Post date: [August 31, 2023, 9:29pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/5 "2023-08-31T21:29:29Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)
#### Post date: [August 31, 2023, 11:58pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/6 "2023-08-31T23:58:58Z")

</div>

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.

Anyone game? @Quentin or @Slavo or anyone else?

---

<div class="post-metadata">

### Author: ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)
#### Post date: [September 3, 2023, 1:48pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/7 "2023-09-03T13:48:02Z")

</div>

Oo, this is such a good feature. How did you all achieve this in the end?

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 3, 2023, 3:28pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/8 "2023-09-03T15:28:41Z")

</div>

js library integrated with a custom component.

---

<div class="post-metadata">

### Author: ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)
#### Post date: [September 6, 2023, 4:29pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/9 "2023-09-06T16:29:41Z")

</div>

@dorilama

which js library did you use? And could please show how you integrated it.

Thank you and best regards

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 6, 2023, 5:52pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/10 "2023-09-06T17:52:46Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)
#### Post date: [September 7, 2023, 5:40pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/11 "2023-09-07T17:40:36Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)
#### Post date: [September 7, 2023, 5:45pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/12 "2023-09-07T17:45:57Z")

</div>

Hi jaredgibb,

I am game to watch you doing it. Couldn’t contribute much, though.

---

<div class="post-metadata">

### Author: ![georgy](https://avatars.discourse-cdn.com/v4/letter/g/8edcca/32.png) [@georgy](https://community.weweb.io/u/georgy)
#### Post date: [May 26, 2024, 5:40pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/13 "2024-05-26T17:40:47Z")

</div>

Did someone got it working with JS?

---

<div class="post-metadata">

### Author: ![Luke](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luke/32/7031_2.png) [@Luke](https://community.weweb.io/u/Luke)
#### Post date: [May 28, 2024, 6:55pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/14 "2024-05-28T18:55:19Z")

</div>

Looking for the same! 🙂

---

<div class="post-metadata">

### Author: ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)
#### Post date: [May 31, 2024, 12:09pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/15 "2024-05-31T12:09:47Z")

</div>

Made a tutorial on how to implement a Signature pad using the signature\_pad library!  
Let me know if you have any questions 🙂

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/84fba2e79e7f6b1c70a3aa94edef989a98c82443.jpeg "How to implement a signature pad in WeWeb") ](https://www.youtube.com/watch?v=tz_JNqqbPqI)

---

<div class="post-metadata">

### Author: ![benjtlv](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/benjtlv/32/10423_2.png) [@benjtlv](https://community.weweb.io/u/benjtlv)
#### Post date: [August 5, 2024, 9:14am UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/16 "2024-08-05T09:14:16Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)
#### Post date: [August 5, 2024, 10:25am UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/17 "2024-08-05T10:25:41Z")

</div>

Glad it helped you!  
There might be something a bit off on your workflows 🤔 Can you share some screenshot/screen recording of your setup?

---

<div class="post-metadata">

### Author: ![benjtlv](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/benjtlv/32/10423_2.png) [@benjtlv](https://community.weweb.io/u/benjtlv)
#### Post date: [August 17, 2024, 1:31pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/18 "2024-08-17T13:31:32Z")

</div>

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](https://www.loom.com/share/3a253d2ab4874ffcbd065fbdfe309a1b)  
Let me know if you need to see anything else in my setup.

---

<div class="post-metadata">

### Author: ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)
#### Post date: [August 18, 2024, 8:46am UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/19 "2024-08-18T08:46:59Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once))  
I think that should solve your issue!

---

<div class="post-metadata">

### Author: ![benjtlv](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/benjtlv/32/10423_2.png) [@benjtlv](https://community.weweb.io/u/benjtlv)
#### Post date: [August 18, 2024, 9:50pm UTC](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136/20 "2024-08-18T21:50:53Z")

</div>

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 🙂

[Next page](https://community.weweb.io/t/how-to-integrate-a-signature-drawing-tool-in-weweb/4136.md?page=2)
