SDK Electronic Signature Component

Description

The Electronic Signature component enables users to view legal documents and capture digital signatures directly within your application. It provides a seamless document viewing and signing experience with support for both drawing signatures with a stylus/finger or typing signatures. The component integrates geo-location tracking, IP capture, and comprehensive audit trails for legal compliance.

Features

Document Display: Renders HTML documents in a scrollable, secure container
Dual Signature Modes: Support for drawn signatures (canvas-based) and typed signatures
Mobile Optimized: Touch-friendly signature capture optimized for mobile and tablet devices
Security & Compliance: Captures user IP, geo-location, timestamps, and user agent for audit trails
Comprehensive Theming: Extensive CSS custom properties system for brand customization
Accessibility: Full keyboard navigation and screen reader support

Configuration Options

Name	Type	Description
reservationId	String	The Autohost ID of the reservation.
emailSignedCopy	Boolean	Send an email copy of the executed document (default: true)
signatureModes (optional)	SignatureMode[]	Available signature capture modes are `type` and `draw`. Defaults to `['type']`.
callbacks (optional)	ElectronicSignatureCallbacks	An object defining callbacks to be fired when certain events occur.
primaryColor (optional)	String	The color to use as the primary color for all UI components.
showTermsCheckbox (optional)	Boolean	Whether to show a checkbox for double opt-in to the usage terms.
customTerms (optional)	String	Custom terms to display below the signature.
defaultName (optional)	String	Default name to pre-populate the signature.
locale (optional)	Locales	The language to display the component in.

SignatureMode

Mode	Description
draw	Canvas-based signature drawing with stylus, finger, or mouse
type	Text-based signature input with customizable fonts

ElectronicSignatureCallbacks

Name	Parameters	Event
onScrollToBottom		User has scrolled to the signature area at the bottom of the document.
onError	error: string	An error has occurred during the signature process.
onSubmit	data: SignatureSubmissionData	User has successfully completed the signature. Document is ready to be processed.

SignatureSubmissionData

Name	Type	Description
signatureMethod	SignatureMode	The signature method used
signature	string	UTF8 string when using `type` or base64-encoded image data URI for `draw`
signedDate	string	ISO timestamp when the document was signed
copyRequested	boolean	Whether user requested a copy of the signed document
userIP	string	IP address of the signing user
userAgent	string	Browser user agent string
geoip	GeoIP\|null	Geo-location data of the signing user (if available)

GeoIP

Name	Type	Description
ip	string	User's IP address
country	string	Country name
country_code	string	ISO country code
region_code	string	Region/state code
region_name	string	Region/state name
city	string	City name
zip_code	string	Postal/ZIP code
time_zone	string	Timezone identifier
latitude	number	Latitude coordinate
longitude	number	Longitude coordinate

Usage Examples

Basic Implementation

import {ElectronicSignature} from "@autohost/web-sdk";

// Simple document signing
const MySigningComponent = () => {
    const handleSignatureComplete = (data) => {
        console.log("Document signed:", data);
        // Process the signed document
        advanceToNextStep();
    };

    return (
        <ElectronicSignature
            reservationId="your-reservation-id"
            document="<h1>Rental Agreement</h1><p>Terms and conditions...</p>"
            callbacks={{
                onSubmit: handleSignatureComplete,
                onError: (error) => console.error("Signature error:", error),
            }}
        />
    );
};

Advanced Configuration

import {ElectronicSignature} from "@autohost/web-sdk";

const AdvancedSigningComponent = () => {
    const [documentReady, setDocumentReady] = useState(false);

    const signatureCallbacks = {
        onScrollToBottom: () => {
            // User has reached the signature area
            console.log("User ready to sign");
            setDocumentReady(true);
        },
        onSubmit: (signatureData) => {
            // Complete signature data with audit trail
            console.log("Signature completed:", {
                timestamp: signatureData.signedDate,
                userLocation: signatureData.geoip,
                ipAddress: signatureData.userIP,
            });

            // Submit to your backend
            submitSignedDocument(signatureData);
        },
        onError: (error) => {
            // Handle signature errors
            showErrorMessage(`Signature failed: ${error}`);
        },
    };

    return (
        <div className="signature-container">
            <ElectronicSignature
                reservationId="res-123456"
                document={yourHtmlDocument}
                title="Property Rental Agreement"
                signatureModes={["draw", "type"]}
                sandbox={true}
                primaryColor="#007bff"
                locale="en"
                callbacks={signatureCallbacks}
            />

            {documentReady && (
                <div className="signature-ready-indicator">Ready to sign ✓</div>
            )}
        </div>
    );
};

Custom Styling

/* Override component theme variables */
:root {
    --ah-es-primary: #your-brand-color;
    --ah-es-border-radius: 12px;
    --ah-es-spacing: 20px;
    --ah-es-signature-area-height: 250px;
}

/* Dark theme example */
.dark-theme {
    --ah-es-background: #1a1a1a;
    --ah-es-surface: #2d2d2d;
    --ah-es-text-primary: #ffffff;
    --ah-es-border: #404040;
}

/* Mobile-optimized styling */
@media (max-width: 768px) {
    :root {
        --ah-es-signature-area-height: 200px;
        --ah-es-spacing: 16px;
    }
}

Signature Workflow

Document Display: User views the HTML document in a scrollable container
Scroll Detection: Component detects when user reaches the signature area (onScrollToBottom)
Signature Mode: User can toggle between drawing and typing signature modes
Signature Capture: User provides their signature using the selected method
Validation: Component validates signature meets minimum requirements
Submission: On completion, onSubmit fires with comprehensive signature data
Audit Trail: Complete audit data including IP, geo-location, and timestamp is captured

Mobile Experience

The component is fully optimized for mobile devices with:

Touch Drawing: Smooth signature capture on touch screens
Responsive Design: Adapts to different screen sizes and orientations
Accessibility: Screen reader support and keyboard navigation
Performance: Optimized canvas rendering for mobile browsers

Theming System

The component uses CSS custom properties with the --ah-es-* prefix for comprehensive theming. Override these variables to match your application's design system.

Key Theming Variables

/* Brand colors */
--ah-es-primary: #0767db

;
--ah-es-success: #28a745

;
--ah-es-error: #dc3545

;

/* Layout */
--ah-es-container-max-width:

800
px

;
--ah-es-signature-area-height:

200
px

;
--ah-es-border-radius:

8
px

;

/* Typography */
--ah-es-font-size-base:

1
rem

;
--ah-es-font-weight-normal:

400
;

Autohost

Talk to Sales

Description​

Features​

Configuration Options​

Usage Examples​

Basic Implementation​

Advanced Configuration​

Custom Styling​

Signature Workflow​

Mobile Experience​

Theming System​

Key Theming Variables​