Introduction

You can configure the E-Signature viewers (Template Designer and E-Signer) with one of the following options. You can configure:

NOTE: If you specify the documentID Viewer control parameter, it is still necessary to specify the templateDocumentId Viewer parameter.

Option 1 - Configure Options to Set When the Viewer is Built

Edit the sample-config.js file available in any of the legacy samples included with the "Client Installer".

Option 2 - Configure Options without Building the Viewer

Set window.pccViewerConfig before the Viewer is loaded. Note that the Viewer is loaded when all DOM elements are available (that is, when the jQuery document ready event fires). Any window.pccViewerConfig options you set will be used instead of the sample-config.js module settings (described in #1) or the query parameters (form or document).

For example, you could update C:\Prizm\Samples\dotnet\mvc\viewers\template-designer-sample\index.html to include the following JavaScript code to configure the following options in the C# Template Designer:

Viewer control parameter for hiding side handles (instead of corner handles) when the handles are closed.
Viewer control parameter for displaying the pages in a single horizontal row (instead of a vertical column).
Viewer parameter for loading the document PdfDemoSample.pdf (instead of having to specify the document as a query parameter).

Example

<script type="text/javascript">
     window.pccViewerConfig = {
            markHandleMode: 'HideSideHandlesWhenClose',
            pageLayout: 'Horizontal',
            templateDocumentId: 'PdfDemoSample.pdf',
     };
</script>

Option 3 - Manually Embed the Viewer

You can disable default embedding of the Viewer and instead use your own code to embed the Viewer into a web page as follows:

Change the id property on the div reserved for embedding to something other than the default pcc-viewer; this will disable auto-embedding.
Create a separate JavaScript file that will hold all of the code for embedding. You can check viewer-init.js for an example. Make sure you reference the id that you specified in your html markup, as shown below:

Example
```
var viewer = $('#pcc-viewer-custom').pccESigner(options);
```

Reference your JavaScript file you created in Step #2 in your web page, after the bundle.js reference.

Example

<head>
   ...
   <!-- load the viewer bundles -->
   <link rel="stylesheet" href="viewer-assets/css/bundle.css">
   <script src="viewer-assets/js/bundle.js"></script>
   <script src="viewer-assets/js/your-javascript-file.js"></script>
   ...
</head>
<body>
   <div id="pcc-viewer-custom"></div>
</body>