DocEndorse - Help - Document Viewer

Document Viewer

Our document viewer provides an interface through which you can fill and sign documents or get documents fill and signed quickly and easily. You can also quickly embed our editor into your app or platform to facilitate the editing of documents directly within your application.

To install and use our document viewer, the developer must first sign up for an account. After signing up, the developer must go to our Admin page, click generate a token and enter the domain name of the website or app that will display our document viewer.

The developer must then head over to the content management system of his/her website and add the container element that will hold our document viewer.

example.html

 <div class="docendorse_container">
</div>

After establishing the element container, the developer must asynchronously load and initialise our javascript SDK, and then mount the viewer. The viewer is mounted by entering the css selector of the container element (or the container element itself), and any additional options.

example.html

 <script>
const docendorse = new Docendorse(USER_KEY);
const viewer = docendorse.viewer;
viewer.mount('.docendorse_container');
viewer.present({
    session_viewer_token: token,
    user_email: recipient_email,
    document_id: id,
    user_photo: url [optional; https url for the a 2x2 photo of the signatory]
});

viewer.on('onReady',function(viewer){

});


</script>
<script async defer src="https://js.docendorse.com/sdk/v3/docendorse.js"></script>

Initialisation Options

When you present the signature you must also provide the initialisation options some of which are mandatory. These are detailed below.

session_viewer_token
Type: String Default: ''
The session_viewer_token is obtained from the response of the API call to initiate edit session. This token is mandatory as it is needed to ensure that a secure session is made to our servers. There is also a time limit on this token and as such it should be used immediately.

user_email
Type: String Default: ""
This identifies the person/entity that will edit the document that will be opened

document_id
Type: integer Default: ""
The ID of the source document. This ID is obtained from the templates page within docendorse

user_photo
Type: String Default: ""
Sets the photo that is shown inside of the editor when it is opened the by user.

Callback Methods

documentLoaded
A callback that is triggered when the document is loaded in the editor. The data variable provides further details.

example.js

 viewer.on('documentLoaded',function(data) { // update your UI
});

documentClosed
Indicates that the editor was closed by the signatory.

example.js

 viewer.on('documentClosed',function(data) { // update your UI or save to database
});

documentSaved
Indicates that the document was saved by the signatory.

example.js

 viewer.on('documentSaved',function(data) { // update your UI or save to database
});

documentCompleted
Indicates that the document has been completed by signatory. Information about the status of request will be provided in the data variable.

example.js

 viewer.on('documentCompleted',function(data) { // update your UI or a database
});

documentSigned
Indicates that the recipient has signed the document. The data variable will provide further detail.

example.js

 viewer.on('documentSigned',function(data) { // update your UI or a database
});

onError
Indicates that an error occured inside the editor.

example.js

 viewer.on('onError',function(data) { // update your UI or a database
});

loading
Indicates that a document is currently loading.

example.js

 viewer.on('loading',function(data) { // update your UI or a database
});

notification
A notification was created in the editor. The data variable will say more about the notification type and message.

example.js

 viewer.on('notification',function(data) { // update your UI or a database
});

onOpen
Indicates that the viewer is open

example.js

 viewer.on('onOpen',function(data) { // update your UI or a database
});

afterPresent
Called after all animations and transitions are complete and after the editor has been opened.

example.js

 viewer.on('afterPresent',function(data) { // update your UI or a database
});