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 } |
Example to hide the SignOnPhone or Mouse button in the viewer:
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; } div[title='SignOnPhone'] { visibility: hidden; } |
With 21.16 and the versions afterwards see the following configuration for hiding mouse and SignOnPhone
button[data-id='SignOnPhone'] { visibility: hidden; } button[data-id='Mouse'] { visibility: hidden; } |
Result of both actions:
Without those configuration the following settings will be visible:
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 Policies
|
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. |
|