Customizing the Signer Ceremony

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:

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.

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.

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();
    }
}

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 ();
        }
    }
}