Adding a Signature to an Embedded Contract

Overview

While a checkbox or click is often enough to constitute a legally binding acceptance in most jurisdictions, there are occasions when a stylized signature or initials block on the document itself is the preferred method of acceptance. Keep reading to find out how to configure your HTML contracts to include this acceptance method.

Requirements

To get started, you'll need to ensure that you have the following:

Ironclad Clickwrap Site Access ID. More info in the Authentication page.

Configuring a Contract

Using the New Experience

Login to the app at clickwrap.pactsafe.com.
On the templates tab, create a new HTML template or edit an existing one. In either case, you should be redirected to <https://clickwrap.pactsafe.com/templates/:id/edit>
Using the WYSIWYG editor, enter in the following example text:

Hello {{name}},
Thank you for your business with {{company}}. We are very excited to work with you.
Please sign below for our records.
Signature: {{name}}

Next from the ... overflow menu, select the "Toggle Code View" option.
Where previously we had the second {{name}} block, replace that line with

<div>Signature: <span style="font-family:cursive">{{name}}<span></div>

Set the contract to public if it is not already (so that it can be loaded into an Embedded Contract Group) and publish the Template.
Note the Template Key from the sidebar, as we will use it in the next step. For demo purposes, ours is named signature-example.

Example Advanced styles:

<span style="font-family: 'Lucida Handwriting', cursive;padding: 0 2px; background-color: #c4f4c4;outline: #00ca88 solid 2px;">

Example Template Preview (in Ironclad Clickwrap)

Add Template to a Clickwrap Group

Configure a scroll style Clickwrap Group (Create a Clickwrap Group).
Add the Template from above (signature-example) to this group.
Give the Embedded Group a useful Key. For demo purposes, ours is named signature-group.
For this demo, on the "Embed" tab, set the "HTML Element ID" to agreements and click "Publish".

Testing the signature block

For the ease of testing here, go ahead and use this example to setup your page.

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

<script>
  // Note: this points to production! If you are testing on a demo Site, update this url to vault.demo.pactsafe.io
  (function(w,d,s,c,n,a,b){w['PactSafeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)}, w[n].on=function(){(w[n].e=w[n].e||[]).push(arguments)},w[n].once=function(){(w[n].eo=w[n].eo||[]).push(arguments)},w[n].off=function(){(w[n].o=w[n].o||[]).push(arguments)},w[n].t=1*new Date(); a=d.createElement(s),b=d.getElementsByTagName(s)[0];a.async=1;a.src=c;b.parentNode.insertBefore(a,b) })(window,document,'script','//vault.pactsafe.io/ps.min.js','_ps');

  _ps('create', '<Your Clickwrap Site Access ID>');
  _ps('set', 'signer_id', '<Your Signer ID>');

  var renderData = {
    company: '<Your Company Name>',
    name: ''
  };
  _ps('set', 'dynamic', true);
  _ps('set', 'render_data', renderData);

  var groupKey = 'signature-group';
  _ps('load', groupKey);
  _ps.on('rendered', function(){
    document.getElementById('name-input').addEventListener('change', function(evt) {
      renderData.name = evt.target.value;
      _ps(groupKey + ":retrieveHTML", renderData);
    });
  });
</script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <h1>Signature Example</h1>
        <div>
          <label for="name">Name</label>
          <input type="text" name="name" id="name-input" />
        </div>
        <div id="agreements"></div>
      </div>
    </div>
  </div>
</body>
</html>

Save the file as signature.html.

Testing the signature block

On your browser, render signature.html.
You should now see something like the following: