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 eversign API.

How do I know Embedded Signing is enabled? When fetching your document using the API, check whether the document's embedded_signing_enabled object is set to 1. If not, this document cannot be embedded.

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).

Important When creating a new document or creating a document from a template, please ensure the embedded_signing_enabled parameter is set to 1 in your API request. Only then your new document will be eligible for Embedded Signing.

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/api/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://s3.amazonaws.com/eversign-embedded-js-library/eversign.embedded.latest.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 () { alert('loaded Callback'); }, signed: function () { alert('signed Callback'); }, declined: function () { alert('declined Callback'); }, error: function () { alert('error Callback'); } } });

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

Parameter Description
url This is where the Embedded Signing URL you retrieved earlier is placed.
containerID The ID of a DOM object on your website which your iFrame will be placed into. (e.g. myTable for <table id="myTable">)
width The width of your iFrame in pixels.
height The height of your iFrame in pixels.
events.loaded Callback function triggered when the iFrame has finished loading.
events.declined Callback function triggered when the document has been declined.
events.error Callback function triggered when the iFrame or document failed loading.