The Corvid API Documentation of $w.SignatureInput should be your next stop. We recommend you read the Introduction section to get an overview of this new element.
To learn how to store an image of the signature in a Data Collection, look at the documentation of .value and the “Get a signature input and insert it in a collection” code example next to it.
Please note that Signature Input does not have a Connect to Data panel just yet. We plan to introduce this feature soon. In the meantime, working with Signature Input requires code.
As always, we’re here for questions, and of course, feedback is much appreciated!
Well done Eyal Michael Cohen
But wait a minute, still can not see the new element under “Input-Elements”, even when Dev-Mode is ON.
Something gone wrong?
Sometimes they unlock features / elements on some accounts and slowly roll out the updates to other accounts later on.
If you do not see it in your account yet you can try:
Open the Wix example
Right-click the signature element
Save to My Designs
This will allow you to ‘paste it’ into any of your sites now.
Hopefully you have the ‘My Designs’ function on your account already, otherwise, you will simply have to wait until the update gets to your account later on.
Thank you Nayeli, that is no problem for me, i also could it just copy and paste before, just wanted to know why i can not see the new menu.
But allright now, thank you for the information.
And by saving it into my own designs, it is really a good idea.
Hey @russian-dima , thanks for letting me know. @code-queen is right, but in this case I did not open the feature gradually but rather at one go, so you should be able to see it.
When I test it with my personal account it shows up. Switched my account language to German to make sure it is not a translation-related issue. As you can see, it’s there:
Perhaps your Editor was opened before I turned on the switch for this feature. This could explain it. Would you mind refreshing the Editor (make sure to save your work first please) and let me know if this sorts it out? If it doesn’t, could you please try removing the editorSessionId parameter from your URL and refresh again?
Neat idea @code-queen ! Will add it to my cheat sheet
In fact, I think that in this case you can simply copy the Signature Input from the example and paste it into your Editor, because the switch we pull to release new Editor Elements to users only determines whether they appear in the Add panel or not. The Editor is capable of handling the new element whether the switch is on or off.
But saving to ‘My Designs’ certainly adds another level of convenience. Very nice indeed!
The ‘My Designs’ section is by far the most genius feature that allows me to be the most productive from website to website.
My favorite part:
I can design and add custom element ID
So when I paste it on another site ---- the element ID stays the same. This saves me a lot of time when coding the same functions / elements over and over.
Hi Eyal Michael Cohen , this signature input is really helpful. awesome work by the team!
but i have an issue, can i keep a signature in a dataset and display it in another page? (i can’t find the ‘connect to data’ for the signature input element)
For example, I have an invoice signed by my customer in 1 page and i would like to get them to reconfirm their details and signature in my ‘summary checkout’ page.
I’m not a coder and have limited knowledge in coding. would you able to enlighten me on this?
Hi @arthurvalatin , thanks for the reply. yea, you’re right. guess i have to read more about the coding and do some trials to get the signature into my custom form.
and the link you shared is just what i needed! (waiting a file to be uploaded after clicking the submit button is a pain, now it’s much better to do it immediately after i choose the file.) Thanks!
Hey @masterjameslow , thank you very much for the compliments
As @arthurvalatin has already mentioned, Signature Input doesn’t have a Connect to Data panel yet. The Data team have it in their quarterly roadmap, so if everything goes according to plan (cannot promise that, of course), it should be made available in the foreseeable future.
Behind the scenes the connection to data will do the same thing as the Corvid code does in the Signature Input example - store an image of the signature “in-place” inside an Image field using a Data URL.
Could you be more specific as to how you wish to show your customers the signature for reconfirmation?
You can already connect an Image element to an Image field in a data collection and it should be able to present an image of the signature that is stored in this field.
Would you rather show the signature in a disabled Signature Input instead?
For this to work, we indeed need to extend SignatureInput.value to support setting a value rather than just getting it.
Hi @eyalc , thanks for the reply.
Yes, i’m able to store the signature into the data collection and i’d figured out to link the image of the signature to the ‘next page’.
Thanks!
Love this, and everything is working well for me, except when I try to use the signature png in an automated email. I’m having my clients sign a waiver online, then send an email copy of the waiver to them through email automations. It sends, but when I see if from my email it doesn’t have a copy of the signature. I’m guessing its something to do with the email host having difficulty embedding a .png? Is there a way to change the format to a .jpg? See picture below for example of what it shows me. Since I can’t seem to save these as a document easily (like the whole form saves as a picture file) I figured this was an ok work around. Any help would be appreciated!!
I have a rather large custom user input form (32 user input boxes), so I would rather not use code to input them all into the dataset. Is there a way to use the submit button to input everything using the connectors, and then use code to input the signature into an image field?
Also, trying to add the signature to an email I receive when the user submits the form.
\rSignature: ${$w( “#signatureInput1” ).value}`;
This code just returns " Signature: data:image/png" and doesn’t attach or show the image.
You can connect the signature value to an Image field .
Upon Submit an image of the signature would then be stored “in-place” inside this Image field using a Data URL. The signature image would not be uploaded to the Media Manager.
Mind that if you connect a Signature Input to a dataset with Read permissions (either “Read-only” or “Read&Write”) the stored signature image would not be loaded and the signature pad would stay empty.
If you are interested in loading stored signature images into Signature Input, please let us know. For now, you can present such images by connecting them to Image elements.
The majority of clients usually collect signatures as part of waivers or contracts. There are not many scenarios where a person needs to “override existing signature” so I think displaying signature in an image format does the job.
Although, it would be more amazing if we could use this in a triggered email. A lot of times the law requires that the signer receive a copy of what they signed. Since it is not possible to use a dynamic image in a triggered email we are having to create dynamic pages with special permissions, etc. It gets pretty complex when there are multiple forms that need to be signed. Perhaps you could talk to the team about this?
