Page History

...

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:

Image Modified

If the feature is available for your organization, you can:

• set a redirect URL for finished documents
• upload a design
• reset to default design
• download a design template
• download current design

The Customisation.zip file contains:

• variables.xml: contains the style configuration of eSignAnyWhere. The comments in the file will help you to modify it.
• global_variables.xml: contains settings for the eSAW Viewer
  • Note: In the global_variables.xml you can find the variable ContentSecurityPolicy. This variable allows you to integrate the viewer in an IFrame. Just enter the page URL in the “value” area on which you want to integrate the viewer. In addition to the possibility of the customization zip there are additional configurations for further scenarios available via API; and via _global.xml for on-premise. These are only required in exceptional cases or for special integration scenarios. Example: WhitelistedPostMessageClients
• files/

In the files you can find the following:

• logo_topbar
• logo_loading
• Localizations.template.custom
  • Here you can customize localizations for a specific eSAW organization
  • You can create your own Localizations.*.custom.json files, modify the elements which should be customized and add the file to the customization package
• custom.css
  • Here you can customize the layout for a specific eSAW organization
  • You can adapt the layout of the SAW Viewer

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.

Customization of localizations

In detail the following options are possible:

• Customize localizations for a specific eSAW organization (only possible in combination with eSAW and Customization Service):
  • The WSC customization package contains a Localizations.template.custom.json containing all keys & english values of the XLF but in JSON format.
  • You can create your own Localizations.*.custom.json files (e.g. Localizations.de.custom.json), modify the elements which should be customized and add the file to the customization package.
  • For better maintenance all items which have not been changed should be removed from the JSON file.

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)

• Customize localizations for the whole SSP instance (or in case Customization Service is not used):
  • Grab the Localizations.template.custom.json from the default customization service package (see Release Notes)
  • Modify the file like described above (content, filename)
  • Place the file in the i18n folder next to the XLF files
• Combination of these two possibilities
  • In case of a 'combined' customization (JSON files available in Customization Service and i18n folder) the two JSON files will be merged. In case items are included in both files, the items from the Customization Service will override the ones from the i18n folder.

Please note: It is not recommended anymore to change the XLF files (SignAnyWhere Viewer) directly!

Customization of the SAW Viewer Layout (custom.css)

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": {}

...