DocVerify Easy Sign System Integration

Basic Integration

The DocVerify Easy Sign System will allow you to easily integrate DocVerify e-signature platform inside an IFrame directly within your own web site giving you full control, and allowing the first signer to sign the document directly from your own desired web pages.

The system works by accessing your document library, and on demand creating a new e-signature document for a signer to sign for the e-signature platform only. The system is also fully integrated with our Smart Tags, which will allow you to designate special fields, and locations where you want signature elements to appear within the document. The Smart Tags will also allow you the flexibility of creating any type of text field within your PDF for DocVerify to populate. In addition to the Smart Tags, you can also create signature elements on the fly using our XML system. Please refer to both the Smart Tags and XML documentation for more information about the two systems.

The Easy Sign System also works with the DocVerify URL Push or Web Hook system. If both are activated, DocVerify will update your system in real time when new signature documents are created and their status as signers do things such as view or sign documents. The system allows up to three signers per document. The first signer signs through the Easy Sign System, but all others will sign through the normal workflow.

This feature may require special activation if not included with the edition, and is for the e-signature platform only, and not the e-notary platform.

For more information visit www.docverify.com or contact DocVerify sales at sales@docverify.com.

To use the system, you must first activate it after the feature has been enabled for you.

To activate:

1. Sign in to DocVerify
2. Go to "My Account"
3. Click on the API tab
4. Click on Active Easy Sign

After activation, you will receive an "IKey", which you will use to access the Easy Sign system from within your own web site

Note: By using the DocVerify Easy Sign System you agree to the DocVerify Terms of Use. It is also the responsibility of the originator to authenticate the signer when using the Easy Sign System as by design, every time the iframe successfully loads a credit will be deducted from the account.

Precautions: Although not required, it is highly recommended to utilize javascript in order to hide certain aspects of the url when submitting to DocVerify such as creating the src link for the iframe.

IMPORTANT: The Easy Sign system should be in a secure authenticated area of your website in order to maintain the highest levels of authenticity. We also HIGHLY recommend having a link somewhere beforehand where your clients can click to read the template or document they're about to sign before accessing the system. Also intermediate or advanced knowledge of both HTML and Javascript is required.

You MUST have an active DocVerify account and this feature must be enabled as it is not available to all editions for you to be able to do any of the integrations below.

If you have not already uploaded a document into your DocVerify library, you will be required to do so as a template is required to use it with this Easy Sign method. Please refer to the online help section on how to add or create a new template document by clicking the "Online Help" button found on the top after you have signed in to your account.

Recommended: How to get the IFrame HTML:

Once you have created a template or added a document to the library, perform the following steps below to get the Easy Sign Iframe HTML:

1. Go to www.docverify.com, and Sign In.
2. Place your mouse or point on the "Add New" button on the top row.
3. Select "Document Library" from the menu.
4. Your library list page will load, and select the respective template you wish to use by clicking the "Edit / Get Info" button.
5. Scroll down below the template review section to the section labeled "Easy Sign".
6. Click the button "Show Easy Sign HTML Code", and copy the the HTML from within the box.

The HTML is a good starting point, and from here you can add more properties to it as needed.

How to get your document library Template ID:

Once you have created a template or added a document to the library, perform the following steps below to get the Template ID:

1. Go to www.docverify.com, and Sign In.
2. Place your mouse or point on the "Add New" button on the top row.
3. Select "Document Library" from the menu.
4. Your library list page will load, and select the respective template you wish to use by clicking the "Edit / Get Info" button.
5. Copy that template ID because it is what you will be referencing when using the IFrame.

Basic Integration:

<iframe id="dviframe" src="http://www.docverify.com?ikey={YOUR IKEY HERE}&email={EMAIL ADDRESS OF SIGNER}&templateid={TEMPLATE ID FROM YOUR DOCUMENT LIBRARY}" width="840" height="1150" frameborder="0">

Simply copy and paste the above HTML IFrame code into your existing web site, replace the ikey with your DocVerify IKey, replace the email with the signer's email, and replace the templateid with the Template ID from your DocVerify library.

For example, if our ikey is "1234567890", the signer's email is "signer@domain.com", and the template id is "ABCD1234-0000-0000-0000-ABCD1234ABCD". The Iframe HTML would look like the one below.

<iframe id="dviframe" src="http://www.docverify.com?ikey=1234567890&email=signer%40domain.com&templateid=ABCD1234-0000-0000-0000-ABCD1234ABCD" width="840" height="1150" frameborder="0">

Notice that the "@" sign was changed to "%40", and that's because it was url encoded. You must url encode the source or else it may not work. You also have complete control over the styling of the Iframe using CSS.

And that's it.... every time the IFrame loads a new document is created on the fly for the signer to sign right within your own web site

Important: All IFrame source MUST be URL Encoded.

Note: The system uses signature credits every time the page is called, reloaded, or refreshed. It is highly recommended to utilize the uniqueid parameter.

Integration with Unique ID's:

DocVerify allows you to go one step further from the basic integration by allowing you to make each IFrame session unique when the IFrame is called. The unique id helps to keep new documents from being created in case the signer happens to refresh their browser.

Unique ID's are generated on your own web sites and whenever a uniqueid is included, DocVerify will create a new document when the page is first loaded, and if the signer happens to refresh their screen or the page reloads for whatever reason, you will be able to call the document simply by using the same uniqueid and signer email. Unique ID's have a life span of 60 minutes, and after 60 minutes if the page is refreshed or reloaded using the same unique id, a new document will be created and additional charges may be incurred. The uniqueid is also only passed one time through the webhook with the "new" status. It is your responsibility to create a one to one reference in your database connecting the unqiueid with the DocVerify ID as all subsequent calls will only include the DocVerify ID.

<iframe id="dviframe" src="http://www.docverify.com?ikey={YOUR IKEY HERE}&email={EMAIL ADDRESS OF SIGNER}&templateid={TEMPLATE ID FROM YOUR DOCUEMENT LIBRARY}&uniqueid={YOUR GENERATED UNIQUE ID HERE}" width="840" height="1150" frameborder="0">

Simply copy and paste the above HTML IFrame code into your existing web site, replace the ikey with your DocVerify IKey, replace the email with the signer's email, replace the templateid with the Template ID from your DocVerify library, and auto-generate your own unique id.

And that's it.... every time the IFrame loads a new document is created on the fly for the signer to sign right within your own web site

Important: All IFrame source MUST be URL Encoded.

IFrame Testing:

You can easily test the IFrame from within your own web site without incurring any charges until the functionality is achieved on your web site If the testmode parameter is included, and "testmode=true", the IFrame will load with a test document that will have a similar layout as the actual live documents. Simply use the code below as a reference, and replace ikey with your own DocVerify IKey. Once the iframe is set, and ready to use you must remove what you added from this section in order to use it with your own templates.

<iframe id="dviframe" src="https://www.docverify.com?ikey={YOUR IKEY HERE}&testmode=true" width="840" height="1150" frameborder="0">

Templates with Smart Tags:

The DocVerify Easy Sign System is also integrated with the DocVerify Smart Tags system. Please refer to the Smart Tags and XML documentation about more information on how to apply them to your templates. If the template in your DocVerify library has Smart tags, it is very easy to pass parameters directly to DocVerify, and DocVerify will take those parameters and their respective values and replace them on the fly when the document is first created. You can have multiple parameters and values for each transaction.

For instance and for simplicity, let's say you had a credit card authorization form that only had one area to be populated named "city", and you wanted the value of city to be populated with "Dallas". You would simply use the IFrame src below to pass the parameter and value.

<iframe id="dviframe" src="http://www.docverify.com?ikey=1234567890&email=signer%40domain.com&templateid=ABCD1234-0000-0000-0000-ABCD1234ABCD&city=Dallas" width="840" height="1150" frameborder="0">

It doesn't get any easier than that, and remember to url encode before sending the data to DocVerify.

Note: It's best practice not to include sensitive personal data in the url because even though the transmission is encrypted the url being requested may not be, could be exposed and intercepted. Also, browsers have character limits on URL's, and that it differes depending on the browser the client is using. You want to make sure not to exceed those limits.

Get the DocVerify ID:

The DocVerify ID can be retrieved once the page is processed in the IFrame. It is in a HTML hidden input tag with the id "docverifyid". You can use Javascript to retrieve the value of the tag from the child Iframe. Please refer to Javascript or Jquery documentation found online on how to get this value.

Javascript or Server Side:

In some cases you will have to either use javascript for client side source manipulation of the Iframe src or use server side applications to manipulate or change the IFrame src. We will not be discussing any of the server side methods because any number of technologies such as .Net, PHP, Java, Ruby, etc., can be used. For most Javascript will do the job.

For this example we will use Javascript, and the only assumption we will make is that the page will have a textbox with the id of "txtemail" where the signer can enter their email address; however, this email address can be derived from any number of places, but for this example the signer will enter it.

<script type="text/javascript">

//set IKey

var ikey = "1234567890";

//Set DocVerify Template

var templateid = "ABCD1234-0000-0000-0000-ABCD1234ABCD";

//Retrieve the signers email from the textbox and urlencode at the same time

var email = encodeURI(document.getElementById('txtemail').value);

//create the source string for the IFrame

var src = "http://www.docverify.com?" + "ikey=" + ikey + "&email=" + email + "&templateid=" + templateid;

// set the iframe src

window.frames['dviframe'].src = src;

</script>

Javascript Sample Form File

Download Javascript Sample Form File

There is lots of information out there on the web on how to do all of the above, we also recommend taking a look at jquery as well for simplifying Javascripting.

Javascript Tools:

Javascript Obfuscator

Javascript JQuery

Post Message to Parent Frame:

When using IFrames, and if you're not using the Webhook it may get difficult knowing when the signer has completed the transaction in the child Iframe. DocVerify also utilizes the window.parent.postMessage javascript function to send a message from the DV Iframe to the parent frame that it is residing in. When the transaction completes the message "completed" will be sent to the parent. You can search Google as there are a few ways of consuming the postMessage messages from the DV Iframe as it's best to set up a listener to wait for the event to occur.

More Help or Common Troubleshooting:

You can visit the DocVerify Online Help section by signing in and clicking on the "Online Help"s after signing in, and also visit the DocVerify Community for more help or common troubleshooting issues.

Getting Started Easy Sign Template

Download Template