For Website Developers

E-Signature Integration

Add document signing

E-Signature Integration

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

Overview

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

  • Template-based — Create reusable document templates in eSignatures.com
  • Embedded signing — Visitors sign without leaving your website 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

Load the SDK styles and script from jsDelivr at an exact version (never @latest — a range lets jsDelivr push surprise updates to live pages):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@r2ware/sdk@0.1.0/dist/r2ware.min.css">
<script src="https://cdn.jsdelivr.net/npm/@r2ware/sdk@0.1.0/dist/r2ware.min.js"></script>

The bundle auto-initializes on load and stays inert until a trigger appears.

2. Add a Sign Button

Add a button with the required data attributes:

<button data-r2-esign
        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 data-r2-esign
        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 data-r2-esign
        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:

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

Style these classes to provide visual feedback:

[data-r2-esign].r2-esign-loading {
  opacity: 0.6;
  cursor: wait;
}

[data-r2-esign].r2-esign-error {
  border-color: #dc3545;
}

.r2-esign-error-msg {
  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" data-r2-esign
          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('[data-r2-esign]').addEventListener('mouseenter', function() {
  this.dataset.signerEmail = document.getElementById('email').value;
  this.dataset.signerName = document.getElementById('name').value;
});
</script>

JavaScript API

For advanced use cases, configure the eSign trigger through the global R2 object. The bundle auto-initializes on DOMContentLoaded with defaults; pass overrides before the script loads via a window.R2_CONFIG global, or call R2.init() again after dynamically injecting markup:

<!-- Override the request timeout before the SDK loads -->
<script>window.R2_CONFIG = { esign: { timeout: 15000 } }</script>
<script src="https://cdn.jsdelivr.net/npm/@r2ware/sdk@0.1.0/dist/r2ware.min.js"></script>

<!-- Re-attach to triggers added dynamically after page load -->
<script>R2.init()</script>

The SDK calls POST /api/esign/create-contract with the data attributes on each [data-r2-esign] element; there is no separate programmatic createContract entry point on the published bundle.

Redirect After Signing

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

<button data-r2-esign
        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 the data-r2-esign attribute
  • 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.