Skip to main content

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

NameTypeDescription
reservationIdStringThe Autohost ID of the reservation.
emailSignedCopyStringSend 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)ElectronicSignatureCallbacksAn object defining callbacks to be fired when certain events occur.
primaryColor (optional)StringThe color to use as the primary color for all UI components.
locale (optional)LocalesThe language to display the component in.

SignatureMode

ModeDescription
drawCanvas-based signature drawing with stylus, finger, or mouse
typeText-based signature input with customizable fonts

ElectronicSignatureCallbacks

NameParametersEvent
onScrollToBottomUser has scrolled to the signature area at the bottom of the document.
onErrorerror: stringAn error has occurred during the signature process.
onSubmitdata: SignatureSubmissionDataUser has successfully completed the signature. Document is ready to be processed.

SignatureSubmissionData

NameTypeDescription
signatureMethodSignatureModeThe signature method used
signaturestringUTF8 string when using type or base64-encoded image data URI for draw
signedDatestringISO timestamp when the document was signed
copyRequestedbooleanWhether user requested a copy of the signed document
userIPstringIP address of the signing user
userAgentstringBrowser user agent string
geoipGeoIP|nullGeo-location data of the signing user (if available)

GeoIP

NameTypeDescription
ipstringUser's IP address
countrystringCountry name
country_codestringISO country code
region_codestringRegion/state code
region_namestringRegion/state name
citystringCity name
zip_codestringPostal/ZIP code
time_zonestringTimezone identifier
latitudenumberLatitude coordinate
longitudenumberLongitude 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

  1. Document Display: User views the HTML document in a scrollable container
  2. Scroll Detection: Component detects when user reaches the signature area (onScrollToBottom)
  3. Signature Mode: User can toggle between drawing and typing signature modes
  4. Signature Capture: User provides their signature using the selected method
  5. Validation: Component validates signature meets minimum requirements
  6. Submission: On completion, onSubmit fires with comprehensive signature data
  7. 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
;