<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DocuTrust Integration</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 24px; }
.embed-container { max-width: 960px; margin: 0 auto; min-height: 600px; border: 1px solid #e5e7eb; border-radius: 8px; }
#status { padding: 12px; margin-bottom: 16px; border-radius: 6px; font-size: 14px; }
.status-loading { background: #fef3c7; color: #92400e; }
.status-ready { background: #d1fae5; color: #065f46; }
.status-completed { background: #dbeafe; color: #1e40af; }
.status-declined { background: #fee2e2; color: #991b1b; }
.controls { margin-bottom: 16px; }
.controls button { padding: 8px 16px; margin-right: 8px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; }
.controls button:hover { background: #f9fafb; }
</style>
</head>
<body>
<div id="status" class="status-loading">Loading DocuTrust SDK...</div>
<div class="controls">
<button id="btn-mount-form">Mount Signing Form</button>
<button id="btn-mount-builder">Mount Builder</button>
</div>
<div id="signing-container" class="embed-container"></div>
<div id="builder-container" class="embed-container" style="display: none;"></div>
<script>
var DOCUTRUST_HOST = 'https://your-app.com';
var SUBMITTER_SLUG = 'aB3kL9mNpQ';
var BUILDER_TOKEN = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNSJ9.abc123';
function updateStatus(message, className) {
var el = document.getElementById('status');
el.textContent = message;
el.className = className;
}
// Load SDK dynamically
var script = document.createElement('script');
script.src = DOCUTRUST_HOST + '/js/docutrust-embed.js';
script.onload = function () {
DocuTrust.configure({ host: DOCUTRUST_HOST });
updateStatus('SDK loaded. Click a button to mount.', 'status-ready');
// Register global event handlers with chaining
DocuTrust
.on('loaded', function (detail) {
updateStatus('Form loaded for submitter ' + detail.submitter_id, 'status-ready');
})
.on('completed', function (detail) {
updateStatus(
'Submission ' + detail.submission_id + ' completed at ' + detail.completed_at,
'status-completed'
);
console.log('Completed submission:', detail);
console.log('Documents:', detail.documents);
console.log('Values:', detail.values);
console.log('Metadata:', detail.metadata);
console.log('Audit log:', detail.audit_log_url);
})
.on('declined', function (detail) {
updateStatus('Signer declined: ' + detail.reason, 'status-declined');
console.log('Declined:', detail);
})
.on('field-value', function (detail) {
console.log(
'Field "' + detail.field_name + '" (' + detail.field_type + ') = ' + detail.value +
' [' + detail.completed_fields + '/' + detail.total_fields + ']'
);
})
.on('template-saved', function (detail) {
updateStatus('Template ' + detail.template_id + ' saved at ' + detail.updated_at, 'status-ready');
console.log('Saved template:', detail);
})
.on('send', function (detail) {
console.log('Send clicked for template:', detail.template_id);
console.log('Roles:', detail.submitters.map(function (s) { return s.name; }));
});
};
document.head.appendChild(script);
// Mount signing form on button click
document.getElementById('btn-mount-form').addEventListener('click', function () {
// Clear previous content safely
var signingContainer = document.getElementById('signing-container');
while (signingContainer.firstChild) {
signingContainer.removeChild(signingContainer.firstChild);
}
signingContainer.style.display = 'block';
document.getElementById('builder-container').style.display = 'none';
DocuTrust.mount({
element: '#signing-container',
submitterSlug: SUBMITTER_SLUG,
email: 'jane.doe@example.com',
name: 'Jane Doe',
role: 'Recipient',
externalId: 'usr_9f84b2a1',
logo: 'https://your-app.com/assets/logo.png',
language: 'en',
withTitle: true,
withDownloadButton: true,
withSendCopyButton: true,
withDecline: true,
withFieldNames: true,
withFieldPlaceholder: 'Enter value here',
withCompleteButton: true,
onlyRequiredFields: false,
allowToResubmit: false,
allowTypedSignature: true,
goToLast: true,
expand: true,
autoscroll: true,
minimizeFirstStep: true,
orderAsOnPage: false,
sendCopyEmail: true,
backgroundColor: '#ffffff',
values: {
'Full Name': 'Jane Doe',
'Email': 'jane.doe@example.com',
'Company': 'Acme Inc',
'Title': 'VP of Operations',
'Date': '2026-04-08'
},
metadata: {
customer_id: 'cust_8472',
deal_id: 'deal_291',
plan: 'enterprise',
source: 'sdk_integration'
},
i18n: {
submit: 'Confirm & Sign',
next: 'Continue'
},
completedRedirectUrl: 'https://your-app.com/signing-complete'
});
updateStatus('Mounting signing form...', 'status-loading');
});
// Mount builder on button click
document.getElementById('btn-mount-builder').addEventListener('click', function () {
// Clear previous content safely
var builderContainer = document.getElementById('builder-container');
while (builderContainer.firstChild) {
builderContainer.removeChild(builderContainer.firstChild);
}
builderContainer.style.display = 'block';
document.getElementById('signing-container').style.display = 'none';
DocuTrust.mountBuilder({
element: '#builder-container',
token: BUILDER_TOKEN,
language: 'en',
autosave: true,
preview: true,
withTitle: true,
withTitleInput: true,
withSendButton: true,
withRecipients: true,
withUploadButton: true,
withAddPageButton: false,
withSignYourselfButton: true,
withDocumentsList: true,
withFieldsList: true,
withFieldsDetection: true,
withSendMyselfEmail: false,
drawFieldType: 'text',
fieldTypes: 'text,signature,date,checkbox',
customButtonTitle: 'Publish Template',
emailSubject: 'Please sign: {{template.name}}',
emailBody: 'Hi, please review and sign: {{submitter.link}}',
backgroundColor: '#f9fafb',
roles: ['Sender', 'Recipient'],
submitters: [
{ name: 'Recipient', email: 'jane@example.com' }
],
requiredFields: ['Signature', 'Sender Signature'],
fields: [
{ name: 'Full Name', type: 'text', role: 'Recipient', required: true },
{ name: 'Email', type: 'text', role: 'Recipient', required: true },
{ name: 'Signature', type: 'signature', role: 'Recipient', required: true },
{ name: 'Date', type: 'date', role: 'Recipient', required: true },
{ name: 'Sender Signature', type: 'signature', role: 'Sender', required: true }
]
});
updateStatus('Mounting template builder...', 'status-loading');
});
</script>
</body>
</html>
