This advanced feature is for customizing the eSignAnyWhere Viewer for the signers. You can change the colors and logo to align them to your CI and set eSAW Viewer behavior. Therefore you have to upload a ZIP-Archive with the new design settings. You can download a design template and change it. Moreover you are able to set a redirect URL when a document is finished.
You can find the the configuration for the customization of eSignAnyWhere in your organization settings in the section “Design of the document viewer for recipients”
The next screenshot shows these configurations:
If the feature is available for your organization, you can:
The Customisation.zip file contains:
In the files you can find the following:
If you have modified the files just put them in an archive and upload via UI. You can use svg instead of png, gif or jpg.
Following feature flag is necessary for this feature: UseCustomizationId Please note the following: This is a non-default feature of eSignAnyWhere. If you are interested in this optional feature please contact us. |
In detail the following options are possible:
Note: Not all sections of the XLF file are allowed to be configured that way (e.g. to prevent possible problems with changing audit trail texts)
Please note: It is not recommended anymore to change the XLF files (SignAnyWhere Viewer) directly!
The following properties are allowed to change:
"display": {}, "visibility": {}, "width": {}, "height": {}, "border-radius": {}, "margin": {}, "margin-top": {}, "margin-bottom": {}, "margin-left": {}, "margin-right": {}, "padding": {}, "padding-top": {}, "padding-bottom": {}, "padding-left": {}, "padding-right": {}, "color": {}, "background-color": {}, "background-repeat": {}, "background-position": {}, "border-color": {} |
Please also see the next sample:
#topBar { background-color: red } #leftBarView{ visibility: hidden } |
Please note that both elements were a "div" element before version 21.16. With version 21.16 and the versions afterwards both elements were changed to a "button" element.
Before the version 21.16 please see the following configuration for hiding mouse and SignOnPhone
div[title='Mouse'] { visibility: hidden; } |
With 21.16 and the versions afterwards see the following configuration for hiding mouse and SignOnPhone
button[data-id='Mouse'] { visibility: hidden; } |
This example removes both the "SignOnPhone" option from the device selection dialog, but also the QR code and App links from the SignOnPhone dialog shown when no SIGNificant Device Driver was found.
Note: the dialog itself, its buttons and the descriptive text of the dialog remain visible. Other than when using the instance-wide custom.css, you cannot replace the text shown on top. Only in an instance-wide custom.css you can replace this text.
Before the version 21.16 please see the following configuration for hiding mouse and SignOnPhone
div[title='SignOnPhone'] { visibility: hidden; } #sopProtocolLink{ visibility:hidden; } .inSigningProgress{ visibility:hidden; } #qrcodeImage > canvas{ visibility:hidden; display: none; } |
With 21.16 and the versions afterwards see the following configuration for hiding mouse and SignOnPhone
button[data-id='SignOnPhone'] { visibility: hidden; } #sopProtocolLink{ visibility:hidden; } .inSigningProgress{ visibility:hidden; } #qrcodeImage > canvas{ visibility:hidden; display: none; } |
If you removed both Mouse and SignOnPhone, the device selection looks like:
Without those configuration the following settings will be visible:
For an instance-wide custom.css (not within Customization.zip) you could change the descriptive text above/instead the QR code image with following CSS definition:
#sopMainPanel:after{ content: 'Attention: The sender defined to record a biometric (handwritten) signature. This requires to install the Device Driver.'; } |
Open variables.xml and look for the following lines of code to change the colors of for example the page navigation background.
Replace the following line:
<variable name="lighterGrayColor" value="#{[color:#d3d0d0]}#" comment=" default: #d3d0d0 used as thumbnail background, page navigation background, disabled form fields, menu button hover effects " category=""/> |
With this one:
<variable name="lighterGrayColor" value="#{[color:#8b8989]}#" comment=" default: #d3d0d0 used as thumbnail background, page navigation background, disabled form fields, menu button hover effects " category="" /> |
After the page navigation background color we are now changing the document background color. Therefor, search for the following line and change it to the lines below:
Replace the following line:
<variable name="lightestGrayColor" value="#{[color:#ebeaea]}#" comment=" default: #ebeaea mainly used for the document background and menu backgrounds " category=""/> |
With this one:
<variable name="lightestGrayColor" value="#{[color:#EEE9E9]}#" comment=" default: #ebeaea mainly used for the document background and menu backgrounds " category="" /> |
After the document background color we are now changing the top page navigation. Therefore, search for the following line and change it to the line below.
Replace the following line:
<variable name="defaultColor" value="#{[color:#661864]}#" comment=" default: #661864 affects the cancel button border, active page navigation bar items, top small bar, focused element in the document, upload progress bars, finished message background color, active page border, active thumbnail border, icons and headers in dialogs, batch signing progressbar foreground, SignOnPhone background color " category="" /> |
With this one:
<variable name="defaultColor" value="#{[color:#000088]}#" comment=" default: #661864 affects the cancel button border, active page navigation bar items, top small bar, focused element in the document, upload progress bars, finished message background color, active page border, active thumbnail border, icons and headers in dialogs, batch signing progressbar foreground, SignOnPhone background color " category="" /> |
After this configurations the viewer should look like the following:
For changing the Logo you have to put your Logo in the subfolder /files. Then you have to change the variables.xml to set the new files (e.g. my-logo-large.png and my-logo-small.png).
<variable name="logoCollapsedUrl" value="#{[image:my-logo-small.png]}#" ... /> <variable name="logoExpandedUrl" value="#{[image:my-logo-large.png]}#" ... /> |
Save the files and pack it in a zip-file (e.g. “my-style.zip”), with same structure as the downloaded Customization.zip, and upload it as new design in your organization settings.
There are to places in the XML where you can define the logo:
Loading screen | Top bar |
---|---|
It may take some minutes until the new design is applied to your eSignAnyWhere Viewer. |
Viewer Preferences
|
Document PoliciesThese policies, also called "Global Policies" sometimes, define which of the features of a client are allowed on a signer activity - in case the client application supports this feature. Please note that the SignAnyWhere Viewer does not support all of these.
|
ConfigurationsConfigurations for API integrations, where you directly configure the workstep per recipient. WorkstepIdStampConfiguration In the configuration of the workstep you can define the stamp imprint: |
NotificationConfiguration Also the notification configuration is possible via the workstep configuration.
StampImprintConfiguration You also can define the stamp imprint for signature fields configuration.
|
SignAnyWhere Viewer – Opening LinkOpening a workstep with the SAW Viewer is quite easy. Just reference to the SAW Viewer endpoint and use a workstepid parameter. <http|https>://<server>/<virtualDirectory>/SignAnywhere.html?WorkstepId=<WorkstepId> Parameters |
|
SignAnyWhere Viewer Client Finish ActionYou can configure a client finish action to be redirected to an predefined URL for the signer. |
|