> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

Get eSign running in 5 minutes

## Installation

```bash theme={null}
npm install @superdoc-dev/esign
```

## Basic implementation

```jsx theme={null}
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:

```jsx theme={null}
<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:

```jsx theme={null}
// 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

```jsx theme={null}
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:

```jsx theme={null}
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:

```typescript theme={null}
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 →](/solutions/esign/configuration)