E-Signature Demo

Test the eSignatures.com integration with these example buttons.

Basic Example

Click the button below to sign a test contract. You'll be redirected to the signing page, and after signing, you'll return to this site.

HTML Code:
<button class="esign-trigger btn btn-primary"
        data-template-id="YOUR_TEMPLATE_ID"
        data-document-name="Test Agreement"
        data-signer-email="test@example.com"
        data-signer-name="Test User"
        data-redirect-url="/thank-you/">
  Sign Test Agreement
</button>

With Custom Metadata

You can attach custom metadata to contracts using data-metadata-* attributes. This data is stored with the contract for tracking purposes.

HTML Code:
<button class="esign-trigger btn btn-secondary"
        data-template-id="YOUR_TEMPLATE_ID"
        data-document-name="Service Agreement"
        data-signer-email="client@example.com"
        data-signer-name="Client Name"
        data-redirect-url="/thank-you/"
        data-metadata-order-id="ORD-12345"
        data-metadata-plan="premium">
  Sign Service Agreement
</button>

With Dynamic Values

In a real application, you'd populate the signer details dynamically from form inputs or template variables. Here's an example with a form:

JavaScript to update button:
// Update button data attributes from form inputs
document.getElementById('dynamic-sign-btn').addEventListener('click', function(e) {
  const name = document.getElementById('signer-name').value;
  const email = document.getElementById('signer-email').value;

  if (name && email) {
    this.dataset.signerName = name;
    this.dataset.signerEmail = email;
  }
}, true); // Use capture phase to run before SDK handler

Data Attributes Reference

Attribute Required Description
data-template-id Yes eSignatures.com template ID from the dashboard
data-document-name Yes Human-readable name for the contract
data-signer-email Yes Email address of the person signing
data-signer-name No Full name of the signer
data-redirect-url No URL to redirect after signing (relative or absolute)
data-metadata-* No Custom metadata fields (e.g., data-metadata-order-id)