Use our signature form to collect signatures from visitors to your website or app. With our signature form, you can collect signatures that have been typed, drawn, or uploaded through an image file. Our signature form is also able to collect typed initials, and display a list of the signatures stored on your’ systems.

To install and use our signature form, the developer must first sign up for an account. After signing up, the developer must go to our Admin page, click generate a token and enter the domain name of the website or app that will display our signature form.

The developer must then head over to the content management system of his/her website and add the container element that will hold our signature panel.

 <div class="signature_panel">
</div>  

After establishing the element container, the developer must asynchronously load and initialize our javascript SDK, and then mount the form. The signature panel is mounted by entering the css selector of the container element (or the container element itself), and any additional options.

 <script>
const docendorse = new Docendorse(USER_KEY);
const signatures = docendorse.signatures;
signatures.mount('.signature_panel');
signatures.present({
    responsive: true,
    initialTab: 'draw', 
    tabs: ['draw','type','upload','initials']
});
signatures.on('onReady',function(panel){

});


</script>
<script async defer src="https://js.docendorse.com/sdk/v3/docendorse.js"></script>  

Initialisation Options

When you present the signature panel you also provide the initialisation options which are detailed below.

responsive
Type: Boolean Default: true
Whether or not to allow the signature panel to take the width of the container and maintain its aspect ratio as the size of the container changes. If disabled, the signature panel will take the initial width of the container unless a width is specified in the options of the intialiser.

width
Type: Float Default: ""
Sets the width of the signature panel in situations where the responsiveness is set to false.

logoURL
Type: String Default: ""
Changes the url of the logo displayed on the panel from DocEndorse's logo to a custom one defined by the user.

initialTab
Type: String Default: "draw"
Sets the tab that is displayed when the signature panel is first loaded.

tabs
Type: Array Default: ['draw','type','upload','initials']
Set the list of tabs that are displayed on the signature panel. The 'draw' panel allows users to draw their signature with a stylus pen or their finger tip. The 'type' option allows the user to type his/her signature using one of several fonts, and 'upload' allows the user to upload an image of his/her signature (acceptable formats include jpeg,jpg,bmp,& png) and receive an image data object. The 'initials' panel allows the user to type in an intial using one of several fonts, and the 'view' panel allows the user to view a selected signature.

initials
Type: Object Default: {}
Set the initials that is displayed after the signature panel has been loaded. This requires a Signature Object which is internally generated when the user saves an initial. Developers can save the Signature Object to a database which can be assigned this object later.

signature
Type: Object Default: {}
Set the signature that is displayed after the signature panel has been loaded. This also requires a Signature Object which is internally generated when the user saves a signature.

Callback Methods

onAcceptDrawn
Provides a Signature Object after the user accepts the signature that he/she drew.

 signatures.on('onAcceptDrawn',function(signatureObject) { // save signature on database, display it, or add to a document
});  

onRejectDrawn
A callback that is triggered when the user rejects the signature that he/she drew.

 signatures.on('onRejectDrawn',function() { // update your UI
});  

onSaveInitials
Provides a Signature Object after the user accepts the initials that he/she typed.

 signatures.on('onSaveInitials',function(signatureObject) { // update your UI or save to database
});  

onSaveTypedSignature
Provides a Signature Object after the user accepts the signature that he/she typed.

 signatures.on('onSaveTypedSignature',function(signatureObject) { // update your UI or save to database
});  

onAcceptUpload
Provides a Signature Object after the user accepts the signature that he/she uploaded. The signature must be in the form of an image file (jpeg,jpg,png,bmp).

 signatures.on('onAcceptUpload',function(signatureObject) { // update your UI or a database
});  

onRejectUpload
Indicates if user rejects the signature that he/she uploaded. The signature must be in the form of an image file (jpeg,jpg,png,bmp).

 signatures.on('onRejectUpload',function(signatureObject) { // update your UI or a database
});  

onError
Indicates that an error occured.

 signatures.on('onError',function(signatureObject) { // update your UI or a database
});