Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

EligibleAPI/SignaturePadExample

Open more actions menu

Repository files navigation

Signature Pad Demo

It is a very basic demo app to show how to draw signatures

How to run demo

  1. Clone the the repo git clone git@github.com:EligibleAPI/SignaturePadExample.git

  2. Open require-drawn-signature.html with any browser

Usage

  1. Clone/download the the repo

    git clone git@github.com:EligibleAPI/SignaturePadExample.git

  2. Import Assets

    Drop these files into your assets folder:

     jquery.signaturepad.css
     jquery.signaturepad.js
     json2.min.js
     flashcanvas.js
     pen.cur
    
  3. Include Javascript files

    The following code should appear in your html file header:

    	<link href="jquery.signaturepad.css" rel="stylesheet">
    	<!--[if lt IE 9]><script src="flashcanvas.js"></script><![endif]-->
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    	<script src="jquery.signaturepad.js"></script>
    	<script src="json2.min.js"></script>
    	<script>
    	  $(document).ready(function() {
    	    $('.sigPad').signaturePad({drawOnly:true});
    	    $('#submit').click(function () {
    	      if($('input.output').val()){
    	        alert($('input.output').val());
    	      }
    	      else{
    	        alert('Please sign the document')
    	      }
    	    })
    	  });
    	</script>
  4. Add a form

    This block of code should be added to your html body:

    	<form method="post" action="" class="sigPad">
    	  <ul class="sigNav">
    	    <li class="clearButton"><a href="#clear">Clear</a></li>
    	  </ul>
    	  <div class="sig sigWrapper">
    	    <div class="typed"></div>
    	    <canvas class="pad" width="198" height="55"></canvas>
    	    <input type="hidden" name="output" class="output">
    	  </div>
    	  <button type="submit" id="submit">Submit.</button>
    	</form>

How to use it with Eligible - Enrollments

You need to collect the X, Y coordinates generated by this Signature Pad and post it to Eligible Enrollments endpoint

For more details, please refer to signature section of our documentation page here https://docs.eligible.com/docs/signatures#capturing-electronic-signatures

More Customizations

This demo example is extracted from https://github.com/thomasjbradley/signature-pad

Please refer to https://github.com/thomasjbradley/signature-pad to check more examples and list of available customizations

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Morty Proxy This is a proxified and sanitized view of the page, visit original site.