SignAndSaveJS
 | |
| Developer(s) | Scriptel Corporation |
|---|---|
| Lastest release | 1.0 |
| Operating system | Windows 7 - 10 using most browsers, macOS 10.7+ using most browsers, Ubuntu Linux 14.04+ using most browsers, CentOS 7+ using most browsers |
| Website | Corporate Web page |
Scriptel SignAndSaveJS is a small web component that can be injected into your web application that will let you easily capture signature and transfer them to your web application to be stored. The output is both json and png. The developer / designer picks which they want to use in the implementation.
SignAndSaveJS supports signature pad, touchscreen, mouse, and stylus input for the signature. With SignAndSaveJS, a developer can capture through an HTML form, without needing to know JavaScript. SignAndSaveJS also provide a robust API for programmatic usage.
If you are interested in this product for your independent software solution, please contact our Sales Department at +1 (877) 848‑6824 or by email at sales@scriptel.com.
Getting Started
There are essentially two different ways you can integrate SignAndSaveJS into your application: as a form element or as a part of your application.
Using the control as a form element is simpler and if you're already working with HTML forms will slip right into your workflow. Check out the "Using SignAndSaveJS with a Form Element" tutorial to use this approach.
If you want more control or if you have more complicated needs than simply submitting the signature as part of a form check out the [Scripting - Getting Started](tutorial-script-gettingstarted.html)
Browser Support
| Browser | Minimum Version | Release Date |
| Google Chrome | 18.0 | 2012-03-28 |
| Microsoft Internet Explorer | 11.0 | 2013-10-17 |
| Microsoft Edge | 12.0 | 2015-03-30 |
| 14.0 | 2012-06-26 | |
| Apple Safari (Desktop) | 6.0 | 2012-07-25 |
| Apple Safari (Mobile) | 6.1 | 2012-09-19 |
Using SignAndSaveJS with a Form Element
In this approach to integration SignAndSaveJS is simply a form component like any other HTML form element. This method doesn't require any JavaScript to integrate and if you're already using forms to manage your submissions to your web application this approach will seamlessly fit into your application.
Start with the following HTML document representing a typical HTML form:
<!DOCTYPE html>
<html>
<head>
<title>Scriptel SignAndSaveJS Example</title>
</head>
<body>
<form action="example.php" method="post">
Name: <input name="name" type="text" /><br />
<input type="submit" value="Submit">
</form>
</body>
</html>
With this script on the server side (example.php) that simply prints anything posted as text:
>?php
header("Content-type: text/plain");
print_r($_POST);
?<
To add SignAndSaveJS to your form you insert a script and style tag into the <head> to include SignAndSaveJS in your application like so:
<link type="text/css" href="scriptel-websign.css" rel="stylesheet" />
<script type="application/javascript" src="scriptel-websign.js"></script>
Then simply add a div to your form with the "scriptel_websign" class:
<div class="scriptel_websign"></div>
That's it! If you load the page after adding the tags you'll see the SignAndSaveJS control sitting between the name field and the submit button.
If you sign the form and press the accept button and then hit submit you'll see that you have two new POST attributes: "scriptel_websign_raster" and "scriptel_websign_json". The former contains a data url encoded PNG that contains the image of the captured signature. The latter is the raw data that was captured by SignAndSaveJS.
Using SignAndSaveJS with your Application
Scriptel SignAndSaveJS supports a wide range of customization options that let you control how signatures get captured and what your users are allowed to do with the control. These controls are exposed through data-* attributes that can be assigned to the anchor node you insert into your form. For example:
<div class="scriptel_websign"
data-background-color="white"
data-foreground-color="black">
</div>
In this example the form control would initialize with the background color as white and the background color as black.
List of Customization Attributes
This is a complete list of data attributes you can add to your control to customize how it looks and operates.
| data-lock-to-aspect | Boolean | true | Whether or not to enforce a particular aspect ratio with this form control. |
| data-aspect-ratio-width | Number | 108 | The horizontal component of the aspect ratio to enforce if data-lock-to-aspect is true. |
| data-aspect-ratio-height | Number | 29 | The vertical component of the aspect ratio to enforce if data-lock-to-aspect is true. |
| data-allow-custom-colors | Boolean | true | Whether or not to let the user pick any color or force them to use the predefined list of colors. |
| data-allow-color-change | Boolean | true | Whether or not to let the user change colors at all. |
| data-background-color | CSS Color | rgba(0, 0, 0, 0) | The starting background color of the control. |
| data-foreground-color | CSS Color | black | The starting foreground color of the control. |
| data-allow-line-thickness | Boolean | true | Whether or not to allow users to change the line thickness. |
| data-line-thickness-range-min | Number | 1 | The minimum line thickness to allow. |
| data-line-thickness-range-max | Number | 20 | The maximum line thickness to allow. |
| data-line-thickness-range-step | Number | 1 | The amount of granularity allowed between the minimum and maximum thicknesses. |
| data-line-thickness | Number | 2 | The starting line thickness. |
| data-allow-pen-styles | Boolean | true | Whether or not to allow users to change pen styles. |
| data-pen-style | String | plain | The starting pen style. Can choose between: plain, inkwell, chisel. |
| data-click-to-sign-message | String | Click to Activate | The message that will be displayed when the control isn't activated. |
| data-click-to-sign-font | String | 40px Helvetica | The font and size the click to sign message will be displayed in. |
| data-click-to-sign-background-color | CSS Color | rgba(0, 0, 0, 0.3) | The foreground color of the click to sign message. |
| data-click-to-sign-foreground-color | CSS Color | rgba(0, 0, 0, 0.5) | The background color of the click to sign message. |
| data-show-signature-line | Boolean | true | Whether or not to show the signature line at the bottom of the signature control. |
| data-signature-line-color | CSS Color | black | The color the signature line should be drawn with. |
| data-allow-touch-signing | Boolean | true | Whether or not to allow touch or stylus signing. |
| data-allow-mouse-signing | Boolean | true | Whether or not to allow mouse signing. |
| data-allow-omniscript-signing | Boolean | true | Whether or not to allow OmniScript signing. |
| data-allow-easyscript-signing | Boolean | true | Whether or not to allow EasyScript signing. |
| data-form-output-raster | Boolean | true | Whether or not to include the raster in the POST data. By default called 'scriptel_websign_raster'. See data-form-output-prefix to change the prefix. |
| data-form-output-raster-type | Mime Type | image/png | The mime type of the raster format. Safe options include: image/png, image/jpeg, image/bmp. Others may work but will be browser dependant. |
| data-form-output-raster-width | Number | 600 | The width of the output raster to produce. |
| data-form-output-raster-height | Number | 160 | The height of the output raster to produce. |
| data-form-output-json | Boolean | true | Whether or not to include JSON data in the POST data. By default called 'scriptel_websign_json'. See data-form-output-prefix to change the prefix. |
| data-form-output-crop | Boolean | false | Whether or not to crop the signature such that the signature stays in aspect, but fills all available space in the output raster. |
| data-form-output-prefix | String | scriptel_websign_ | The prefix to use for form controls. Useful if you want to include multiple signatures in one form. |
| data-form-auto-accept | Boolean | true | Whether or not we should accept partial signatures when the parent form is submitted. |
Here's a template element you can use to customize your control:
<div class="scriptel_websign"
data-aspect-ratio-width="108"
data-aspect-ratio-height="29"
data-lock-to-aspect="true"
data-allow-custom-colors="true"
data-allow-color-change="true"
data-background-color="rgba(0, 0, 0, 0)"
data-foreground-color="black"
data-allow-line-thickness="true"
data-line-thickness-range-min="2"
data-line-thickness-range-max="20"
data-line-thickness-range-step="1"
data-line-thickness="2"
data-allow-pen-styles="true"
data-pen-style="plain"
data-click-to-sign-message="Click to Activate"
data-click-to-sign-font="40px Helvetica"
data-click-to-sign-background-color="rgba(0, 0, 0, 0.3)"
data-click-to-sign-foreground-color="rgba(0, 0, 0, 0.5)"
data-show-signature-line="true"
data-signature-line-color="black"
data-allow-touch-signing="true"
data-allow-mouse-signing="true"
data-allow-omniscript-signing="true"
data-allow-easyscript-signing="true"
data-form-output-raster="true"
data-form-output-raster-type="image/png"
data-form-output-raster-width="600"
data-form-output-raster-height="160"
data-form-output-json="true"
data-form-output-prefix="scriptel_websign_"
data-form-output-crop="false"
data-form-auto-accept="true">
</div>