Quick Start Guide
Get up and running with SignSure in minutes. This guide will walk you through the installation process and show you how to create your first PDF signature form.
Installation
SignSure can be installed via CDN, npm, or by downloading the library files directly.
Include SignSure in your HTML
Add the SignSure library to your HTML file using our CDN:
<!-- SignSure CSS -->
<link rel="stylesheet" href="https://cdn.signsure.xyz/v1/signsure.css">
<!-- SignSure JavaScript -->
<script src="https://cdn.signsure.xyz/v1/signsure.min.js"></script>Create a container
Add a container element where SignSure will render the PDF:
<div id="pdf-container" style="height: 600px;"></div>Initialize SignSure
Create a new SignSure instance and load your PDF:
// Initialize SignSure
const signSure = new SignSure({
container: '#pdf-container',
licenseKey: 'your-license-key'
});
// Load a PDF document
await signSure.loadPDF('path/to/document.pdf');Basic Usage
Once initialized, you can start adding signature fields to your PDF:
Add a signature field
Use the addField method to add signature fields:
// Add a signature field
await signSure.addField({
type: 'signature',
page: 1,
x: 100,
y: 200,
width: 200,
height: 80,
required: true,
label: 'Customer Signature'
});Export configuration
Export the field configuration for use in your application:
// Export field configuration
const config = signSure.exportConfiguration();
console.log(config);
// Save configuration as JSON
const blob = new Blob([JSON.stringify(config, null, 2)], {
type: 'application/json'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'form-config.json';
a.click();Configuration Options
SignSure provides many configuration options to customize the behavior and appearance:
const signSure = new SignSure({
// Required
container: '#pdf-container', // Container element selector
licenseKey: 'your-license-key', // Your license key
// Optional
theme: 'default', // 'default', 'dark', 'minimal'
initialScale: 1.0, // Initial zoom level
enableNavigation: true, // Show page navigation
enableZoom: true, // Enable zoom controls
maxFields: 50, // Maximum fields per document
allowResize: true, // Allow field resizing
allowDelete: true, // Allow field deletion
debug: false // Enable debug logging
});Complete Example
Here's a complete working example:
<!DOCTYPE html>
<html>
<head>
<title>SignSure Quick Start</title>
<link rel="stylesheet" href="https://cdn.signsure.xyz/v1/signsure.css">
</head>
<body>
<div id="pdf-container" style="height: 600px;"></div>
<button onclick="addSignature()">Add Signature</button>
<button onclick="exportConfig()">Export</button>
<script src="https://cdn.signsure.xyz/v1/signsure.min.js"></script>
<script>
let signSure;
async function init() {
signSure = new SignSure({
container: '#pdf-container',
licenseKey: 'DEMO-1234-5678-9ABC-DEF123456789',
theme: 'default'
});
// Load sample PDF
await signSure.loadPDF('sample.pdf');
}
async function addSignature() {
await signSure.addField({
type: 'signature',
page: 1,
x: 100,
y: 200,
width: 200,
height: 80,
required: true,
label: 'Signature'
});
}
function exportConfig() {
const config = signSure.exportConfiguration();
console.log('Configuration:', config);
}
// Initialize when page loads
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>🎉 You're all set!
Congratulations! You've successfully set up SignSure. Here's what you can explore next: