White Labeling

White labeling is a term for branding a product that you have purchased. Our white labeling allows you to personalize the logo, color scheme, and legal text of the signer page, making our product blend seamlessly into yours.

Before you can do anything with white labeling, you will need to create an app. White labeling is available as a paid add-on for Premium API plans, which you must have in order to use white labeling in production mode. Otherwise, you can only use it in test mode. All updates made to white labeling options by users who purchase the white labeling add-on for the Premium plan are immediately active in production. We recommend creating a test app for previewing white labeling changes.

The white labeling options are passed in the create API app (/api_app) and update API app (/api_app/[:client_id]) endpoints.

Custom colors

All customizable color elements require valid six-character hexadecimal codes for values. All elements are optional, and any element that you choose not to customize will be set to its default value. If you choose not to customize the value for an element that has a hover state, its hover state will inherit from its active state.

Note: The primary button color is shared with other elements:

  • the word, "Loading," on the loading page
  • the required fields counter circle
  • the selected tab in the signature modal
  • the border of the secondary button
  • the border of the selected signature image
  • the color block on the confirmation page.

The table below lists all customizable color elements.

Element Default Color
page_background_color #F7F8F9
header_background_color #1A1A1A
text_color1 #808080
text_color2 #FFFFFF
link_color #00B3E6
primary_button_color #808080
primary_button_text_color #FFFFFF
primary_button_color_hover #00B3E6
secondary_button_color #FFFFFF
secondary_button_text_color #00B3E6
secondary_button_color_hover #FFFFFF
secondary_button_text_color_hover #00B3E6

Here is a layout of customizable elements: example of a white labeled signing flow with parameters mapped to the element they control the styling for

Some customizable color elements must meet a minimum contrast ratio of 2.1 with adjacent elements, for usability reasons. The contrast element header_background_color_light is not customizable. It has a value of #F7F8F9.

Take a look at this contrast ratio UI and formula to learn more about contrast.

Element Contrast Elements
text_color1 header_background_color_light
text_color2 header_background_color
primary_button_color header_background_color, header_background_color_light
primary_button_text_color primary_button_color
primary_button_text_color_hover primary_button_color_hover
secondary_button_text_color secondary_button_color
secondary_button_text_color_hover secondary_button_color_hover

Legal version

The legal_version element is related to our terms of service. Its default value is terms1.

Value Description
terms1 I agree to be legally bound by this document and the HelloSign Terms of Service. Click on 'I Agree' to sign this document.
terms2 By clicking "I Agree" you are legally signing this document and agreeing to the eSignature Terms of Service.

Error types in white labeling

Validation errors are JSON-encoded and returned as a value on error_msg (for more info on errors, see the warnings and errors page). An error includes the error type and the invalid element name or names. Here is a list and details of possible error types that can be returned:

Error Description
invalid_element_name Invalid element name.
invalid_legal_version Invalid value passed for legal_version.
invalid_hex_code Invalid hex code.
invalid_contrast_ratio Contrast ratio is less than minimum 2.1.

Example

Here is an example of a white labeled embedded signer page.

Scranton Paper’s Partner Portal is the company’s internal tool for managing Partnerships. Pamela is logged in and is signing a mutual NDA with a new partner, JN Projects. HelloSign’s signing functionality is white labeled and embedded within the portal.

Image Details
The initial signing page in this example has been white labeled and has different colors. The signer page is embedded within Scranton Paper’s Partner Portal
Shows the white labeling once a user clicks to sign the signature box. Click to sign signature box
Shows the white labeling in the signature modal as they choose from available signature options Choose multiple signature options
Shows the signature added to the white labeled document The signature is displayed within document
Shows the terms acceptance page with white labeled legal copy Click the 'I agree' button to confirm signed document
Shows the white labeled page once signing is complete The document is signed and completed

Note: White Labeling is also available for non-embedded signature flows