Web designers are now able to use our signature form to collect signatures from visitors to their websites. Using our signature form, web designers 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 the web designers’ 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 websites that will display our signature form. The developer will not be able to access our signature form if he/she fails to list the domain name of the websites and generate a token.

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. On this element you can also establish settings for, responsiveness by adding the attribute: data-panel-responsive="true", and panel width by setting adding the attribute: data-panel-width="[number for width]".

 <div data-panel-resposive="true" class="signature_panel">
</div>  

After establishing the element container, the developer must asynchronously load and initialize our javascript SDK, and then initialize the plugin. The plugin is initialized by entering the css selector of the container element, and any additional options.

 <script>
window.docEndorseInit = function() { 
    DocEn.init({ appId : 'AC613bdba62d355', version : 'v1.0' }); 
    DocEn.onReady(function(){ 
        DocEn.signaturePanel.open( '.signature_panel',{ 
            responsive: true, 
            initialTab: 'draw', 
            tabs: ['draw','type','upload1','initials'], }).then(function(panel){ 
                /* Call back methods go in here */ 
        }); 
    });
};
</script>
<script async defer crossorigin="anonymous" src="https://docendorse.com/sdk/sdk.js"></script>  

Initialisation Options

When you initialise the plugin, the first argument is the css selector for the element container, and the second is an object containing any initialisation options you want, 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 or on the container element itself via the data-panel-width attribute.

width
Type: Float Default: ""
Sets the width of the signature panel in situations where the resposiveness 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','upload1','initials','view']
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 'upload1' allows the user to upload an image of his/her signature (acceptable formats include jpeg,jpg,bmp,& png) and receive an image data object without any data going to a server. In addition to the panel options mentioned, there is also the 'upload' option which allows the user to upload an image of his/her signature to the server specified in the server_data option. 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 number of signatures.

server_data
Type: Object Default: {}
Set the data that is needed for the 'upload' panel to upload an image to an external server. For this to work the developer must provide the url of the server in the server_data object. The developer can provide any other data they need the server to process.

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.

signatureList
Type: Array Default: {}
Displays a list of signatures in the view panel after the signature panel has been loaded. The variable contains a list of signature objects.

Public Callback Methods

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

 panel.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.

 panel.onRejectDrawn = function() { // update your UI
}  

onBeginDrawing
A callback that is triggered when the user starts drawing a signature. The callback provides the data associated with the signature that has been drawn.

 panel.onBeginDrawing = function(drawData) { // update your UI or send to your server
}  

onEndDrawing
A callback that is triggered when user the stops drawing a signature. The callback provides the data associated with the signature that has been drawn.

 panel.onEndDrawing = function(drawData) { // update your UI or send to your server
}  

isTypingAnInitial
A callback that is triggered as the user types an initial. The callback provides the event associated with the initial that is being typed.

 panel.isTypingAnInitial = function(event) { // update your UI
}  

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

 panel.onSaveInitials = function(signatureObject) { // update your UI or save to database
}  

isTypingASignature
A callback that is triggered as the user types a signature. The callback provides the event associated with the signature that is being typed.

 panel.isTypingASignature = function(event) { // update your UI
}  

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

 panel.onSaveTypedSignature = function(signatureObject) { // update your UI or save to database
}  

onAcceptUploadRemote
Provides the server response 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).

 panel.onAcceptUploadRemote = function(serverResult) { // update your UI or a database
}  

onRejectUploadRemote
Provides the server response after the user rejects the signature that he/she uploaded.

 panel.onRejectUploadRemote = function(serverResult) { // update your UI or a 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).

 panel.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).

 panel.onRejectUpload = function(signatureObject) { // update your UI or a database
}  

signatureSelect
Provides information on the signature that user selects from the view panel.

 panel.signatureSelect = function(selection) { // update your UI or a database
}