Quick Start

Get eSign running in 5 minutes

Installation

npm install @superdoc-dev/esign

Basic implementation

import SuperDocESign from '@superdoc-dev/esign';
import 'superdoc/style.css';

function AgreementForm() {
  const handleSubmit = async (data) => {
    console.log('Signed:', data);
    // Save to your backend
    await api.saveAgreement(data);
  };

  return (
    <SuperDocESign
      eventId="agreement-001"
      document={{ source: "terms.docx" }}
      onSubmit={handleSubmit}
    />
  );
}

That’s it! This displays the document and provides a submit button.

Adding requirements

Make users scroll and provide a signature:

<SuperDocESign
  eventId="agreement-002"
  
  document={{
    source: "contract.docx",
    validation: {
      scroll: { required: true }  // Must scroll to bottom
    }
  }}
  
  fields={{
    signer: [
      {
        id: '1',
        type: 'signature',
        validation: { required: true },
        label: 'Type your full name'
      }
    ]
  }}
  
  onSubmit={handleSubmit}
/>

Populating document fields

Replace placeholders in your document using field IDs:

// Document contains fields with IDs: field_client_name, field_company

<SuperDocESign
  eventId="contract-003"
  document={{ source: contractFile }}
  
  fields={{
    document: [
      { id: '1', value: 'John Doe' },
      { id: '2', value: 'Acme Corp' }
    ]
  }}
  
  onSubmit={handleSubmit}
/>

Adding consent checkboxes

fields={{
  signer: [
    {
      id: '1',
      type: 'checkbox',
      validation: { required: true },
      label: 'I accept the terms and conditions'
    },
    {
      id: '2',
      type: 'checkbox', 
      validation: { required: true },
      label: 'I acknowledge the privacy policy'
    }
  ]
}}

Handling the response

The submit handler receives:

const handleSubmit = async (data) => {
  // data contains:
  // - eventId: Your unique session ID
  // - timestamp: When submitted
  // - duration: Time spent in seconds
  // - auditTrail: Array of timestamped events
  // - signerFields: Values from interactive fields
  // - isFullyCompleted: All requirements met
  
  console.log('Audit trail:', data.auditTrail);
  console.log('Signature:', data.signerFields.find(f => f.id === '1'));
  
  await saveToDatabase(data);
};

TypeScript

Full TypeScript support included:

import SuperDocESign from '@superdoc-dev/esign';
import type { SubmitData } from '@superdoc-dev/esign';

const handleSubmit = async (data: SubmitData) => {
  // Fully typed data structure
};

Next: Configuration

Learn about all configuration options in the Configuration guide →