Docufast Sign Button

A customizable button component for integrating Docufast's document signing functionality into your web applications.

Installation

npm install docufast-sign
# or
yarn add docufast-sign

Usage

import DocufastSignButton from 'docufast-sign';

// Basic usage
<DocufastSignButton 
  apiKey="your-api-key"
/>

// With custom styling
<DocufastSignButton 
  apiKey="your-api-key"
  className="your-custom-class"
  style={{ backgroundColor: 'blue', color: 'white' }}
  children="Sign Now"
/>

// With error handling
<DocufastSignButton 
  apiKey="your-api-key"
  onError={(error) => console.error('Signing error:', error)}
/>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | Your Docufast API key (also used as template ID) | | className | string | No | Custom CSS class for styling | | style | object | No | Inline styles for the button | | children | ReactNode | No | Custom button content (default: "Sign Document") | | onError | function | No | Error handler callback |

Features

• Click Tracking: Automatically logs button clicks to Firebase Firestore
• Customizable: Supports custom styling through className and style props
• Error Handling: Provides error callback for handling signing errors
• Analytics: Tracks user agent and timestamp for each click

Analytics

The button automatically tracks clicks in the signingClicks collection in Firebase Firestore with the following data:

{
  apiKey: string,        // Your API key
  templateId: string,    // Same as apiKey
  clickedAt: string,     // ISO timestamp
  userAgent: string,     // User's browser info
  timestamp: number      // Unix timestamp
}

Dashboard Integration

View your button's performance in the Docufast dashboard:

1. Navigate to the Developer Tools section
2. Select your template (using your API key)
3. View click statistics and completed forms
4. Filter data by time period (day, week, month, 6 months, year, 3 years)

Example

import React from 'react';
import DocufastSignButton from 'docufast-sign';

function SigningPage() {
  return (
    <div>
      <h1>Sign Your Document</h1>
      <DocufastSignButton 
        apiKey="your-api-key"
        className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
        onError={(error) => alert(`Signing error: ${error.message}`)}
      >
        Click to Sign
      </DocufastSignButton>
    </div>
  );
}

Requirements

• React 16.8 or higher
• Firebase Firestore for analytics tracking

License

MIT