We’re using the Docusgin Embedded Signing flow with the "default" view. When loading up a document, the embedded loader appears on the screen's left, but when using the "focused" view the loader is well aligned at the center. However, there is no way to modify this. Is there something we can pass or is there a bug with our container?
Ts Code
<script lang="ts">
import { goto } from '$app/navigation';
import { PUBLIC_DOCUSIGN_INTEGRATION_KEY } from '$env/static/public';
import Loader from '$lib/components/Loader.svelte';
import formStore from '../store/index';
import Alert from '$lib/components/Alert.svelte';
const infoMessage =
'To ensure a safe and secure signing process, we use DocuSign to allow you to review and sign your contract online. Click the button below to access your contract and complete the signing with confidence.';
export let signingUrl: string;
let isLoading = false;
let loaded = false;
let policyAgreed = false;
// Go the next step
const redirect = () => {
formStore.updateContractSigning({ accepted: true });
goto('/thank-you');
};
// Load the DocuSign script asynchronously
const loadDocuSignScriptAsync = () => {
return new Promise<void>((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://js-d.docusign.com/bundle.js';
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error('Failed to load DocuSign script'));
document.head.appendChild(script);
});
};
// This function will initialize DocuSign and configure the signing options
const handleViewContract = async () => {
try {
loaded = true;
isLoading = true;
await loadDocuSignScriptAsync(); // Ensure script is loaded before accessing DocuSign
const docusign = await window.DocuSign.loadDocuSign(PUBLIC_DOCUSIGN_INTEGRATION_KEY);
const signing = docusign.signing({
url: signingUrl,
displayFormat: 'default',
style: {
branding: {
primaryButton: {
backgroundColor: '#FF6B00', // Background color of primary button
color: '#fff' // Text color of primary button
}
},
signingNavigationButton: {
finishText: 'Finish', // Custom text for the finish button
position: 'bottom-center' // Position of the finish button
}
}
});
// When the DocuSign UI is ready
signing.on('ready', (event: any) => {
console.log('UI is rendered', event);
policyAgreed = true;
const agreementDiv = document.getElementById('agreement');
if (agreementDiv) {
agreementDiv.style.backgroundColor = 'white'; // Solid white background
}
});
// When the signing session ends
signing.on('sessionEnd', (event: any) => {
console.log('Session ended', event);
document.body.classList.remove('overflow-hidden'); // Restore scrolling
const agreementDiv = document.getElementById('agreement');
if (agreementDiv) {
agreementDiv.style.backgroundColor = ''; // Reset background
}
if (event.sessionEndType === 'signing_complete') {
agreementDiv?.remove();
redirect(); // Proceed to the next step
}
});
signing.mount('#agreement');
} catch (error) {
console.log('Error initializing DocuSign:', error);
}
finally {
isLoading = false;
}
};
</script>
<div class="flex flex-col items-center justify-center">
{#if isLoading}
<Loader message="Loading contract details..." />
{/if}
{#if !loaded}
<div>
<Alert type="info" message={infoMessage} />
</div>
<button
class="mt-6 w-full md:w-auto py-3 px-6 text-lg font-semibold rounded-md text-white bg-secondary hover:bg-secondary-dark transition duration-300 ease-in-out"
on:click={handleViewContract}
>
View Your Contract
</button>
{:else}
<p class="text-gray-200 mb-6">
Please take a moment to review the summary of your subscription and carefully sign off on the
terms and conditions to complete the process.
</p>
{/if}
</div>
<!-- DocuSign signing ceremony container -->
<div
id="agreement"
class={`w-full ${policyAgreed ? 'absolute top-0 left-0 z-50 h-full' : ''}`}
style="box-sizing: border-box;"
></div>
[I work for Docusign]
This is a known bug in the Docusign JS embedded signing feature. It has Docusign internal bug number C2A-3615.
It is planned to be fixed but we don't have a schedule yet. When it is fixed, you will not need to change your application software, the loading indicator will be moved to the center for all apps.
Thank you for using Docusign, I'm sorry this bug is not yet fixed.