Now that we have the embedded_edit_url, we can show the document in the iFrame. We'll do this with using the SignWell JavaScript library.

<script type="text/javascript" src="https://static.signwell.com/assets/embedded.js"></script>

Note: If you need to use the "integrity" attribute in the JS script tag, make sure you use the most current hash that matches the embedded.js file. This file can and will change at times. You can dynamically retrieve the correct hash at this endpoint: https://static.signwell.com/assets/embedded.txt

Once you've added the SignWell JavaScript library to your website or web application, you'll use the following code to display the iFrame.

var signWellEmbed = new SignWellEmbed({
  url: '[embedded_edit_url here]',
  events: {
    completed: e => { 
      console.log('completed event: ', e) 
      //document successfully sent/completed
    },
    closed: e => { 
      console.log('closed event: ', e) 
      //SignWell iFrame closed
    }
  }
})

signWellEmbed.open()

// The embedded_edit_url expires after it's opened the first time. 
// You can regenerate a new embedded_edit_url by making another GET request to the document.
// You can also get a new embedded_edit_url by calling signWellEmbed.newEditUrl in the events.documentLoaded callback.
//
// Once the embedded iFrame has loaded and the document is available, you can
// retrieve the current document data at any time by calling:
// 
//   signWellEmbed.getDocument()
//
// This method returns a Promise that resolves with the latest document details,
// including fields, recipients and metadata from the embedded iFrame.
//
// The getDocument() method is supported inside all embedded event callbacks
// (documentLoaded, iframeLoaded, closed) as well as outside of callbacks during
// normal operation.
//
// Examples:
//
// // Inside the iframeLoaded callback
// signWellEmbed.on('iframeLoaded', (e) => {
//   signWellEmbed.getDocument()
//     .then(doc => console.log('Document data:', doc));
// });
//
// // Inside the closed callback (return the Promise to ensure proper cleanup)
// signWellEmbed.on('closed', (e) => {
//   return signWellEmbed.getDocument()
//     .then(doc => console.log('Final document state:', doc));
// });
//
// // Outside of any callback
// signWellEmbed.getDocument()
//   .then(doc => console.log('Document data:', doc));

There are multiple options and events you can use when creating the SignWellEmbed object.

Name	Description
`url` (string)	This is your embedded edit URL. It's the only required option.
`containerId` (string)	The default behavior will open a modal with the iFrame. Instead, using this option, you can pass an ID of a DOM object on your website where the iFrame will be embedded.
`allowClose` (boolean)	Whether the document can be closed before a document has been updated and sent. Defaults to `true`.
`requestingRedirectUrl` (string)	A URL where people will be redirected to after they finish updating the document.
`start` (string)	Determines which step to show when the iFrame is opened. Possible values: `document_view` (Default) `edit_recipients` `edit_files`
`type` (string)	In special cases where the person updating the document is the only person signing, this can be set to `sign_and_share`. Most cases will use the default `request_signature`.
`showHeader` (boolean)	Whether to show the header on the document view page when editing a document or template. Defaults to `true`.
`allowDownload` (boolean)	Hides the download and PDF buttons/actions when set to `false`. Defaults to `true`.
`allowShareLink`(boolean)	Hides the share link button/action when set to `false`. Defaults to `true`.
`showSendButton`(boolean)	Hides the send button when set to `false`. Defaults to `true`.
`allowAddContacts`(boolean)	Hides the ability to add contacts when set to `false`. Defaults to `true`.
`allowCC`(boolean)	Hides the ability to add CC recipients when set to `false`. Defaults to `true`.
`signatureDefaultName`(boolean)	Defaults the person's name on typed signatures when set to `true`. Defaults to `true`.
`showProgressBar`(boolean)	Hides the progress bar when set to `false`. Defaults to `true`.
`events.completed`	Callback triggered when the document is successfully updated and sent.
`events.iframeLoaded`	Callback triggered when the iFrame is loaded.
`events.documentLoaded`	Callback triggered when the document is loaded.
`events.closed`	Callback triggered when the iFrame is closed.
`events.error`	Callback triggered if there is an error.