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?
Screenshot
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>