Admins can re-brand the Signer Experience several ways. In particular, Admins can change the following elements:

  • Logo
  • Color Associations
    • 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:

Rebranding OSS with new color scheme and logo

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:

  1. Go to Admin > Signing Customization.
  2. Drag-and-drop your logo to the upload section on the page, or Browse to where your logo resides, and select it.
  3. Continue to add logos for each language in your account (optional).
  4. Select the appropriate language for each uploaded logo.
  5. Click Update Logos.
  6. Click Preview to review your changes, using the language switcher to verify logo changes for every language.

Rebranding OSS with custom logo

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:

  1. Go to Admin > Signing Customization.
  2. Scroll to locate the Colors section.
  3. Click the colored square of the element you want to modify (Primary, Success, etc).
  4. Enter the Hex value or RGBA values of your custom color. Optionally, you can click in the color panel to select your color choice.
  5. Repeat the above steps for all of the color changes you need to make.
  6. Click Update Colors.
  7. 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.

Integrators can modify and/or remove certain visual elements of the Signer Experience to enable a branded customer experience. You can use these options to seamlessly integrate the signing process with your own application.

The following code samples illustrate how to specify the primary and secondary colors of the Signer Experience. These define the interface's overall look-and-feel, also known as its Branding.

package com.silanis.esl.sdk.examples;

import java.util.Map;

public class SigningStyleExample extends SDKSample {

    public Map<String, Object> createdSigningThemes, retrievedSigningThemes, updatedSigningThemes, removedSigningThemes;
    public String signingThemesStringToCreate = "{\"default\":{\"color\":{\"primary\":\"#5940C3\"}}}";
    public String signingThemesStringToUpdate = "{\"default\":{\"color\":{\"primary\":\"#5940C3\",\"secondary\": \"#F31C8B\"}}}";

    public static void main(String... args) {
        new SigningStyleExample().run();
    }

    @Override
    protected void execute() {

        // Create default signing theme
        createdSigningThemes = eslClient.getSigningStyleService().createSigningThemes(signingThemesStringToCreate);

        // Get default signing theme
        retrievedSigningThemes = eslClient.getSigningStyleService().getSigningThemes();

        // Update the default signing theme
        updatedSigningThemes = eslClient.getSigningStyleService().updateSigningThemes(signingThemesStringToUpdate);

        // Delete default signing theme
        eslClient.getSigningStyleService().deleteSigningThemes();

        removedSigningThemes = eslClient.getSigningStyleService().getSigningThemes();
    }
}

Integrators can modify and/or remove certain visual elements of the Signer Experience to enable a branded customer experience. You can use these options to seamlessly integrate the signing process with your own application.

The following code samples illustrate how to specify the primary and secondary colors of the Signer Experience. These define the interface's overall look-and-feel, also known as its Branding.

using System;
using System.IO;
using Silanis.ESL.SDK;
using Silanis.ESL.SDK.Builder;
using System.Collections.Generic;

namespace SDK.Examples
{
    public class SigningStyleExample : SDKSample
    {
        public static void Main (string [] args)
        {
            new SigningStyleExample ().Run ();
        }

        public IDictionary<string, object> createdSigningThemes, retrievedSigningThemes, updatedSigningThemes, removedSigningThemes;
        public string signingThemesStringToCreate = "{\"default\":{\"color\":{\"primary\":\"#5940C3\"}}}";
        public string signingThemesStringToUpdate = "{\"default\":{\"color\":{\"primary\":\"#5940C3\",\"secondary\": \"#F31C8B\"}}}";

        override public void Execute ()
        {
            // Create default signing theme
            createdSigningThemes = eslClient.GetSigningStyleService ().CreateSigningThemes (signingThemesStringToCreate);

            // Get default signing theme
            retrievedSigningThemes = eslClient.GetSigningStyleService ().GetSigningThemes ();

            // Update the default signing theme
            updatedSigningThemes = eslClient.GetSigningStyleService ().UpdateSigningThemes (signingThemesStringToUpdate);

            // Delete default signing theme
            eslClient.GetSigningStyleService ().DeleteSigningThemes ();

            removedSigningThemes = eslClient.GetSigningStyleService ().GetSigningThemes ();
        }
    }
}