Embedded Signing (iFrame)

Setting up Embedded Signing will enable you to have your signers sign documents directly on your website using an iFrame. All you need is your API Access Key, a server-side signature request and our JavaScript library for the client side.

Server Side

The first step to embedding a signature page on your website is deciding whether to use an existing document or to create a new one.

Use existing document: If you already have a document for which Embedded Signing is enabled, all you need to do is fetch the respective document's signing URLs using a standard Get Document call from the Xodo Sign API.

Create new document: If the document you would like to embed has not been created yet, you will be required to either create a new document (Create Document) or create a document from a template (Use Template).

Get Embedded Signing URLs HTTP GET

API Request

If Embedded Signing is enabled for the document you are requesting, each object contained in the signers array will come with an extra embedded_signing_url object containing an Embedded Signing URL for the respective signer.

https://api.eversign.com/document
	? access_key = YOUR_ACCESS_KEY
	& business_id = 1
	& document_hash = j6yMcaF2gQAIIQ

API Response

The API response below has been shortened for simplicity purposes. In order to see how the full response looks like, please jump to the Get Document section.

{
  "document_hash": "A4X5GeinpUtjhz",
  [...]
  "signers": [{
      "id": 1,
      [...]
      "embedded_signing_url": "https://business.eversign.com/document/A4X5GeinpUtjhz-Ffsl2DkD1fkuu2/sign"
  }, {
      "id": 2,
      [...]
      "embedded_signing_url": "https://business.eversign.com/document/A4X5GeinpUtjhz-S2f3fEl23dtjFd/sign"
  }],
  [...]
}

Client Side

After retrieving your Embedded Signing URLs the next and final step is embedding an iFrame on your website. In order to make this as easy as possible, we've built a JavaScript library that places the iFrame into a DOM object of your choice and allows for customization.

To get started, include the following code on your website:

<script type="text/javascript" src="https://static.eversign.com/js/embedded-signing.js"></script>

Once you have included the JavaScript library on your website, simply include the following code and specify all required options to display your iFrame.

eversign.open({
    url: "YOUR_EMBEDDED_SIGNING_URL",
	containerID: "container",
	width: 600,
	height: 600,
	events: {
	  loaded: function () {
		console.log("loaded Callback");
	  },
	  signed: function () {
		console.log("signed Callback");
	  },
	  declined: function () {
		console.log("declined Callback");
	  },
	  error: function () {
		console.log("error Callback");
	  }
	}
});

The eversign.open function comes with a number of parameters: