Back to Docusign.com
Hi,
I am updating an embedded signing flow that uses a iFrame element on a page to use the Docusign JS method defined here (https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/embedding/#docusign-js). I get the recipient URL and pass it to the following code:
var iframurl = "{{iframeUrl}}";
window.DocuSign.loadDocuSign('xxxx').then((docusign) => {
const signing = docusign.signing({
url: iframurl,
displayFormat: 'focused',
style: {
/** High-level variables that mirror our existing branding APIs. Reusing the branding name here for familiarity. */
branding: {
primaryButton: {
/** Background color of primary button */
backgroundColor: '#333',
/** Text color of primary button */
color: '#fff',
}
},
/** High-level components we allow specific overrides for */
signingNavigationButton: {
finishText: 'Custom Button Text',
/** 'bottom-left'|'bottom-center'|'bottom-right', default: bottom-right */
position: 'bottom-left'
}
}
});
/** Event handlers **/
signing.on('ready', (event) => {
console.log('UI is rendered');
});
signing.on('sessionEnd', (event) => {
/** The event here denotes what caused the sessionEnd to trigger, such as signing_complete, ttl_expired etc../ */
console.log('sessionend', event);
});
signing.mount('#agreement');
}).catch((ex) => {
// Any configuration or API limits will be caught here
console.log(ex);
});“xxx” is set property just hidden for my post. “iframurl” is the envelope URL that I used to set on the iFrame elements src. When I use the DocuSign JS method, a new iFrame is created under a div with id “agreement”. “The src is then set to a different URL that the envelope. The issue is that the browser throws this exception: Refused to display 'https://demo.docusign.net/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.” This indicates that the URL set by the DocuSign JS has a sameorigin header set, so it can’t be embedded, which defeats the purpose. Does anyone know what is happening here or can help? Appreciate it!