OneSpan Sign Developer: New Signer Experience – Branding Customization

OneSpan Sign’s new signer experience now features more powerful options to re-brand your signing ceremony compared to previous customization options. Users even have the option to modify the color scheme in order to have a more consistent look and feel with your brand.

In this blog, we will introduce this Color Customization feature, then walk through other available customization options. Let’s get started!

Color Customization

Account administrators can customize the new signer experience branding via the new sender interface. This can be done from the Signing Customization page under the Admin section as shown below:

The following colors can be updated:

•    Primary
•    Alerts (Success, Warning, Error, Info)
•    Signature & Optional Signature button

TIPS:

• The default color options are accessibility compliant. However, if you have updated these colors, you need to make sure that ADA compliance is maintained.

Color Association

Next, we will demonstrate  what effect each color change will have, so that you will have a better idea of how to set up them.

Primary Color

Primary color will be applied to all buttons and top level menu items. The color displayed while the cursor hovers over the option will be calculated by the system as a shade of the primary color.

Success Color

This color will be used for success alerts, signing progress, signing completion, and accepted signature box border.

Error Color

This color will be used for error alerts, number of signatures required per document, and field validation tooltips.

Information Color

This color will be used for information alerts.

Signature & Optional Signature Box

This section defines the color of the signature boxes before they are accepted.

TIPS

• 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.

Logo Customization

The account logos in the new signer experience can now be configured independently for all supported languages. Use the Branding Migration forms, upload the logo file, and inform our Support Team how you want to customize your New Signer Experience.

Notes:

•    Even if you have already re-branded your account for a previous signer experience, you still need to send us a request for the new signer experience
•    The maximum dimensions for the account logo in the new signing ceremony is: 258px by 40px. Anything larger will be scaled down to fit by the system
•    The supported image types are: jpeg/jpg, png, gif, bmp

Field Font Size in UI

Font Size within an Unconfirmed Document

When a signer accesses an unconfirmed document within the new signer experience, all text for signature fields, labels, and input fields will be set using the font size defined for that field.

•    If the text does not fit within the field container using the defined font size, the system will automatically reduce the font up to a maximum of 8 pixels to try and fit the text within the field
•    If the text still does not fit after maximum resizing, it will bleed out of the field
•    If the font size for a given field is set to “auto-fit”, the system will ignore that setting and default the font size to 12 pixels and then apply a similar logic

Font Size within a Confirmed Document

When a signer accesses a confirmed document within the new signer experience, all text for signature fields, labels, and input fields will be set using the font size defined for that field.

•    If the text does not fit within its container, it will be auto-scaled to fit the container.

Looking Ahead to Future Installment

By now, we’ve covered the color and logo customizations, as well as the expected behavior for font sizes in fields. In next blog of this series, I will showcase all the changes to UI text messages. Together with today’s blog, these articles will paint a more complete image of how much flexibility you’ll have to customize the new signer experience.

If you have any questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the Developer Community Forums. Your feedback matters to us!