Signer - Embedded Signature Without Preview

Sample to sign documents with Signer in your own app.

by Lacuna Software

HTML

<script src="https://cdn.lacunasoftware.com/libs/signer/lacuna-signer-widget-0.8.0.min.js"></script>
<div style="text-align: center;">
  <h1>
  Signer embedded signature without Preview
  </h1>
  <button type="button" onclick="startSignature(this)">
  Start Signature for Alan Turing (560.723.861-05)
  </button>
</div>

<div class="container">
  <div id="embed-container" class="frame-container">

  </div>
</div>

CSS

.frame-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.frame-responsive {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
}

.container {
  max-width: 600px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

function sign(embedUrl) {
  var widget = new LacunaSignerWidget({ disableDocumentPreview: true });
  
	widget.on(widget.events.documentSigned, function (e) {
		// ...
		alert('Document ' + e.id + ' signed');
	});
  
	widget.render(embedUrl, 'embed-container');
}

//replace the following function with your own logic to obtain the embed URL
function startSignature(elem) {
	elem.innerHTML = 'Loading ...';
  
	$.post("https://demos.lacunasoftware.com/api/signer/embedded", {}).
		done(function (data) {
			if (data) {
				sign(data);
				elem.style.visibility = "hidden";
			} else {
				elem.innerHTML = 'Error';
			}
	}).fail(function () {
		elem.innerHTML = 'Error';
	});
}