Generating PDF annotations

The notary service provides a web page with a user interface for generating the PDF annotations with signees’ signatures in the provided PDF file. The web page is located at https://eu2-cloud.acronis.com/notary/annotations.

The procedure requires knowledge of HTML and Javascript.

After completing this procedure you will be able to copy the list of PDF annotations and use it to:

Before you start

If you uploaded a file that was converted to the PDF by the notary service, fetch the ID of the converted PDF file and download the file by following the Fetching signed and converted PDF files procedure.

Creating an annotation form

  1. Create the annotations-form.html and annotations-script.js files using the code from the following examples and put them in the same folder:

    annotations-form.html example

     1<!doctype html>
 2<html>
 3
 4<head>
 5    <meta charset="utf-8">
 6    <meta http-equiv="x-ua-compatible" content="IE=edge">
 7
 8    <title>Sample e-sign form</title>
 9    <style>
10        .form-section {
11            margin: 10px 0;
12        }
13    </style>
14</head>
15
16<body>
17    <h1>Sample e-sign form</h1>
18    <!-- Submission form with POST method -->
19    <form id="esign-form" method="POST">
20
21        <div class="form-section">
22
23            <!-- File input -->
24            <input id="file-input" type="file" name="file" accept=".pdf" />
25
26        </div>
27
28        <div class="form-section">
29
30            <!-- Template mode checkbox -->
31            <input id="template-mode" type="checkbox" name="template-mode" /><label for="template-mode">Enable template mode</label>
32        
33        </div>
34
35        <!-- Form submission button -->
36        <button id="form-submit" type="submit">Send</button>
37
38    </form>
39
40    <!-- Resulting annotations -->
41    <div id="annotations"></div>
42
43    <script src="annotations-script.js"></script>
44</body>
45
46</html>

    annotations-script.js example

     1// TODO: Change the URL of the data center
 2const DC_URL = 'https://eu2-cloud.acronis.com'
 3const ANNOTATIONS_UI_URL = `${DC_URL}/notary/annotations`;
 4
 5const form = document.getElementById('esign-form');
 6const fileInput = document.getElementById('file-input');
 7const formSubmitButton = document.getElementById('form-submit');
 8
 9let annotationsWindow = null;
10
11function submitForm(event) {
12    event.preventDefault();
13
14    if (!fileInput.value) {
15        alert('Please provide a file.')
16        return;
17    }
18
19    let reader = new FileReader();
20
21    const file = fileInput.files[0];
22    reader.readAsArrayBuffer(file);
23
24    reader.onload = postLoadedFile;
25    reader.onerror = function () {
26        alert(reader.error);
27    };
28}
29
30function postLoadedFile(event) {
31    const isTemplateMode = document.getElementById('template-mode').checked;
32
33    annotationsWindow = window.open(ANNOTATIONS_UI_URL, 'annotationsWindow', 'height=800,width=900');
34
35    const payload = {
36        // Set to true to open annotations page in template mode; otherwise open in file mode. Default is file mode.
37        "templateMode": isTemplateMode,
38        // TODO: Change the annotations page language in the ISO 639-1 (two-letter code) format. Default is "en" (english) language.
39        "language": "en",
40        "file": event.target.result,
41        // TODO: Replace the array of signees' emails with your values. Note that the "signees" key is ignored in template mode.
42        "signees": [{
43                "email": "example1@gmail.com"
44            },
45            {
46                "email": "example2@company.com"
47            }
48        ]
49    }
50
51    setTimeout(function () {
52        annotationsWindow.postMessage(payload, ANNOTATIONS_UI_URL);
53    }, 5000); // 5000 milliseconds = 5 seconds
54}
55
56function processIncomingMessage(event) {
57    if (event.origin !== DC_URL) {
58        return;
59    }
60    annotationsWindow.close();
61
62    const data = event.data;
63    switch (data.code) {
64        case "200":
65            let annotationsInput = document.getElementById('annotations');
66            annotationsInput.innerHTML = `JSON annotations: [${data.annotations}]`;
67            alert(data.message);
68            break;
69        case "400":
70            alert(data.message);
71        default:
72            break;
73    }
74}
75
76formSubmitButton.onclick = submitForm;
77window.onmessage = processIncomingMessage;

    In the annotations-script.js file, see the “TODO” comments for additional instructions.

    The resulting annotation form will contain a file input, a checkbox for enabling the template mode of the annotations page, and the form submission button.

  2. Open a command line and run a python HTTP server in the folder with created files:

    python -m http.server --directory "<path_to_folder>"

    Replace <path_to_folder> with your actual path. This will start the HTTP server listening on port 8000.

  3. Open http://127.0.0.1:8000/annotations-form.html in your web browser. The annotations form should appear.

Generating the annotations

  1. [Optional] Check the Enable template mode checkbox to create PDF annotations for a template.

  2. Choose a PDF file and click the form submission button. A popup window with the annotations page will appear.

  3. Add signees’ signatures to the PDF file:

    If the template mode is enabled, add signees by clicking Add signers and drag and drop necessary fields to the PDF file.

    If the template mode is disabled, drag and drop necessary fields of the signees to the PDF file.

  4. [Optional] To add custom fields, open the Custom fields tab, add custom fields by clicking Add custom field and drag and drop them to the PDF file.

  5. [Optional] Mark the fields as optional by selecting them in the PDF file and checking the Optional field checkbox.

  6. Click Preview and send to preview the PDF file with the signatures, then click Send. The window with annotations page will close.

  7. Copy the list of PDF annotations that should appear under the form.