Rebranding the New UX
- 08 Oct 2024
- 2 Minutes to read
- DarkLight
- PDF
Rebranding the New UX
- Updated on 08 Oct 2024
- 2 Minutes to read
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Admins can re-brand the Signer Experience several ways. In particular, Admins can change the following elements:
Branding: The overall look-and-feel of the Signer Experience.
Alerts: The appearance of various informational messages.
Signature: The appearance of the Signature Box Types used in transactions.
By default, the look and feel of the Signer Experience adheres to the brand of OneSpan Sign:
Updating the logo and color scheme inserts your organization's branding assets throughout the Signer Experience. For example:
Logo Customization
The account logos in the Signer Experience can be configured independently for all supported languages. For any languages in your account that do not have a designated logo on this screen, the system will default to the English version of the logo for that language.
Logo specifications
Logo Property | Specification |
|---|---|
File Size | 1 MB Maximum |
File Format | .jpg .png .gif .bmp .svg |
Optimal dimensions | 258px by 40px If your logo is larger than these dimensions, the image will be scaled down to fit the allotted space. If your logo is smaller than these dimensions, it will be stretched to fill the allotted space. |
Background | Transparent background is preferred, but not required |
To change the logo that will be used during the Signer Experience:
Go to Admin > Signing Customization.
Drag-and-drop your logo to the upload section on the page, or Browse to where your logo resides, and select it.
Continue to add logos for each language in your account (optional).
Select the appropriate language for each uploaded logo.
Click Update Logos.
Click Preview to review your changes, using the language switcher to verify logo changes for every language.
Use the Preview button to view changes you make on this page. Use the desktop, tablet and mobile icons at the top of the preview window to see how your changes will look in each format.
Color Associations
The following colors can be updated with your custom color scheme:
Primary
Alerts (Success, Warning, Error, Info)
Signature button
Color values can formatted in Hex or RGBA.
The default colors are accessibility compliant. If you update these colors, you need to make sure that ADA compliance is maintained.
Color association | Affected elements |
|---|---|
Primary | All buttons and top level menu items are displayed in the primary color. The hover color for these items are a lighter shade of the primary color (calculated by the system). |
Success | This color is used for success alerts and the accepted signature box border. |
Warning | This color is used for warning alerts. |
Error | This color is used for error alerts and field validation tool tips. |
Information | This color is used for information alerts. |
Signature | Defines the color of the signature boxes before they are accepted. Note that signature and optional signature buttons have a level of opacity applied to them, to allow for any background text to be seen. Thus, signature fields may appear slightly different from other boxes that use the same color. |
To add custom colors to the Signer Experience:
Go to Admin > Signing Customization.
Scroll to locate the Colors section.
Click the colored square of the element you want to modify (Primary, Success, etc).
Enter the Hex value or RGBA values of your custom color. Optionally, you can click in the color panel to select your color choice.
Repeat the above steps for all of the color changes you need to make.
Click Update Colors.
Click Preview to review your changes.
Other Customization Options
There are other ways to customize your OneSpan Sign account with your organization's branding:
By using the Branding Migration Form to add your organization's logo to other areas of your account.
By contacting our Support Team for assistance with additional branding options.
Was this article helpful?