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 | String | 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. |
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
;