E-Signature Integration

This guide explains how to add e-signature functionality to your site using the eSignatures.com integration.

Overview

The e-signature integration allows visitors to sign documents directly from your site:

  • Template-based — Create reusable document templates in eSignatures.com
  • Embedded signing — Visitors sign without leaving your site flow
  • Automatic tracking — Signed documents are stored and viewable in the dashboard
  • Webhook updates — Document status updates automatically

Prerequisites

  1. An eSignatures.com account with API access
  2. Document templates created in eSignatures.com
  3. Platform e-sign integration enabled (contact administrator)

Quick Start

1. Include the SDK

Add the e-sign SDK to your pages:

<script src="https://cdn.r2ware.dev/dash/static/v0.0.1/esign.min.js"></script>

2. Add a Sign Button

Add a button with the required data attributes:

<button class="esign-trigger"
        data-template-id="tmpl_abc123"
        data-document-name="Service Agreement"
        data-signer-email="customer@example.com">
  Sign Agreement
</button>

When clicked, the visitor is redirected to sign the document.

Button Data Attributes

The SDK reads configuration from data attributes on trigger elements.

Required Attributes

  • data-template-id — eSignatures.com template ID
  • data-document-name — Human-readable name for the document
  • data-signer-email — Email address of the person signing

Optional Attributes

  • data-signer-name — Full name of the signer
  • data-redirect-url — URL to redirect after signing (relative or absolute)
  • data-metadata-* — Custom metadata (see below)

Full Example

<button class="esign-trigger"
        data-template-id="tmpl_abc123"
        data-document-name="Membership Agreement"
        data-signer-email="john@example.com"
        data-signer-name="John Doe"
        data-redirect-url="/thank-you"
        data-metadata-order-id="12345"
        data-metadata-plan="premium">
  Sign Membership Agreement
</button>

Custom Metadata

Add custom data to track with the document using data-metadata-* attributes:

<button class="esign-trigger"
        data-template-id="tmpl_abc123"
        data-document-name="Contract"
        data-signer-email="client@example.com"
        data-metadata-client-id="C-12345"
        data-metadata-project="Website Redesign">
  Sign Contract
</button>

Metadata is stored with the document and visible in the dashboard.

Styling

The SDK adds CSS classes during the signing flow:

  • .esign-loading — Added while the request is in progress
  • .esign-error — Added when an error occurs

Style these classes to provide visual feedback:

.esign-trigger.esign-loading {
  opacity: 0.6;
  cursor: wait;
}

.esign-trigger.esign-error {
  border-color: #dc3545;
}

.esign-error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

Dynamic Signer Information

For forms where the signer enters their information, read values dynamically:

<form id="signup-form">
  <input type="text" id="name" placeholder="Your Name" required>
  <input type="email" id="email" placeholder="Your Email" required>
  
  <button type="button" class="esign-trigger"
          data-template-id="tmpl_abc123"
          data-document-name="Terms of Service">
    Sign Terms
  </button>
</form>

<script>
document.getElementById('signup-form').addEventListener('submit', function(e) {
  e.preventDefault();
});

// Update button attributes before click
document.querySelector('.esign-trigger').addEventListener('mouseenter', function() {
  this.dataset.signerEmail = document.getElementById('email').value;
  this.dataset.signerName = document.getElementById('name').value;
});
</script>

JavaScript API

For advanced use cases, use the SDK programmatically:

// Initialize with custom options
ESignSDK.init({
  apiEndpoint: '/api/esign/create-contract',
  triggerSelector: '.esign-trigger',
  timeout: 15000
});

// Create contract programmatically
const button = document.querySelector('.esign-trigger');
ESignSDK.createContract(button)
  .then(signingUrl => {
    window.location.href = signingUrl;
  })
  .catch(error => {
    console.error('Signing failed:', error.message);
  });

// Re-attach listeners after dynamic content
ESignSDK.attachListeners();

Redirect After Signing

Use data-redirect-url to send signers to a confirmation page:

<button class="esign-trigger"
        data-template-id="tmpl_abc123"
        data-document-name="Agreement"
        data-signer-email="user@example.com"
        data-redirect-url="/signing-complete">
  Sign Agreement
</button>

Create a thank-you page at that URL:

<h1>Thank You!</h1>
<p>Your agreement has been signed successfully.</p>

API Reference

The SDK calls POST /api/esign/create-contract with:

{
  "template_id": "tmpl_abc123",
  "document_name": "Service Agreement",
  "signer_email": "customer@example.com",
  "signer_name": "John Doe",
  "redirect_url": "/thank-you",
  "metadata": {
    "order_id": "12345"
  }
}

Response (success):

{
  "signing_url": "https://esignatures.com/sign/..."
}

Response (error):

{
  "error": "invalid_request",
  "message": "signer_email is required"
}

Troubleshooting

Button doesn't respond to clicks

  • Ensure the SDK script is loaded
  • Check that the button has class="esign-trigger"
  • Look for JavaScript errors in the browser console

"Template not found" error

  • Verify the data-template-id matches your eSignatures.com template
  • Ensure the template is published and active

"eSignatures.com integration is not configured"

Contact your platform administrator — the eSign API token needs to be configured.

Signer doesn't receive the document

  • Verify the email address is correct
  • Check spam/junk folders
  • The signing happens via redirect, not email — the signer is taken directly to the signing page

Document stuck on "Pending"

The signer started but didn't complete signing. They need to use the same signing link to continue, or a new agreement needs to be created.