Back to Docusign.com
Hey Developers,
I am trying to implement the DocuSign Embedded Focused View in a demo project (Just plain HTML and JS, with NodeJS backend), but I've run into an issue where the top header doesn’t go away.
Screenshot below :
I am trying load the signing url in an i-frame.
When looking at the official the Focused View example (here : https://docusign.github.io/app-examples/embedded-signing/) it looks incredibly clean and has no header at all. However, my implementation still looks like the standard embedded signing experience.
Here is what I've done so far:
-
I am using the
docusign.jslibrary. (<script src="https://js.docusign.com/bundle.js"></script>) -
I've set up the configuration object to target my container
div. -
The token and return URLs are generating correctly without throwing backend errors.
Here’s my code snippet :
<body>
<div class="signing-wrapper">
<h1>Internal App Checkout</h1>
<p>Click the button below to sign your agreement natively without leaving this webpage.</p>
<button class="btn" id="loadAgreementBtn">Review & Sign Contract</button>
<div id="signing-box"></div>
</div>
<script>
// Check for redirect callback closures
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('event') === 'frontend_complete') {
alert("Frontend redirect callback complete!");
}
document.getElementById('loadAgreementBtn').addEventListener('click', async () => {
const button = document.getElementById('loadAgreementBtn');
button.innerText = "Loading Agreement...";
button.disabled = true;
try {
// 1. Fetch data variables from your node backend API
const response = await fetch('/api/get-signing-url', { method: 'POST' });
const data = await response.json();
if (!data.url || !data.integrationKey) {
alert("Configuration Error: Missing signing URL or Integration Key.");
console.error(data);
return;
}
// Unhide the target div container element
document.getElementById('signing-box').style.display = 'block';
// 2. Load DocuSign object explicitly using the fetched Integration Key
const docusign = await window.DocuSign.loadDocuSign(data.integrationKey);
// 3. Configure the Focused View properties inside the exact expected schema
const signingView = docusign.signing({
url: data.url,
"displayFormat": "focused",
"style": {
"branding": {
"primaryButton": {
"backgroundColor": "rgb(0, 0, 0)",
"color": "rgb(255, 255, 255)"
}
},
"signingNavigationButton": {
"finishText": "Submit",
"position": "bottom-right"
},
"signingDeclineButton": {}
}
});
// 4. Mount the clean canvas directly into our div context slot
signingView.mount('#signing-box');
// 5. Catch completion hooks locally
signingView.on('signing_complete', (eventData) => {
console.log('Document signed successfully:', eventData);
document.getElementById('signing-box').innerHTML = "<div style='padding:40px; text-align:center;'><h3>✅ Document Signed Successfully!</h3></div>";
});
} catch (error) {
console.error("Signing sequence initialization broken:", error);
alert("Failed to initialize the clean signature window.");
} finally {
button.innerText = "Review & Sign Contract";
button.disabled = false;
}
});
</script>
</body>My questions:
-
Is there a specific property in the JS configuration object I need to pass to explicitly hide the header?
Am I actually rendering the Focused View, or is my code secretly falling back to the standard Classic Embedded Siging view?
Has anyone run into this header issue before? Any guidance on what I might be missing would be greatly appreciated!
Thanks in advance,
