Customizing Workflow colors

Custom colors can be applied to both Workflows as well as Etch e-signature packets. You can manage Workflow custom colors through the advanced editor, which is what we are covering in this article. Etch custom colors can be managed via API.

• Understanding custom colors
• Applying custom colors

Understanding custom colors

Custom colors allow you to specify the colors of different components within your Workflow and can be managed via the style object in your Workflow (Weld) configuration file.

There are five types of components that you can customize with the following keys: infoColor, linkColor, primaryColor, successColor, and secondaryColor.

infoColor

infoColor controls the colors of informational actions within your Workflow and are typically used to mark incomplete items. For example, the steps on a signature page and the signature fields that have yet to be signed.

linkColor

linkColor controls the colors of any links included in your Workflow, such as links added via explanation text fields. The ‘Sign All’ link on the signature page will also be updated.

primaryColor

primaryColor controls the main colors within your Workflow, including the title underline, the load spinner, and to highlight completed signature fields on the signing page. It’s also the same color used with main actions within the Webform such as page forward (e.g. Next), Review Info, and the Finish & Submit buttons.

Custom primaryColor in Webforms

Custom primaryColor in Workflow signature pages

successColor

successColor controls the color of completed actions within your Workflow, such as finished steps on a signature page and completed Webform cards included in the Webform finish page.

By default, completed Webform cards are not shown on the Webform finish page. To enable them, set "showCompletedForms": true in the finishPage array of your Webform (Forge) configuration file.

secondaryColor

secondaryColor controls the color of secondary actions within your Workflow, such as ‘Edit Info’ and pencil icons in the Webform review page, the ‘Copy Link’ button on the Webform finish page.

Applying custom colors

Each style key can be used individually, meaning you can use some or all of them together. Please note however, that a CSS stylesheet can override the colors specified with custom color keys. We generally recommend using either custom colors or the CSS stylesheet, not both together.

Each style key can be used individually, meaning you can use some or all of them together. Please note however, that a css stylesheet can override the colors specified with custom color keys. We generally recommend using either custom colors or the CSS stylesheet, not both together.

After you’ve decided which style keys you'd like to use, you’ll need to identify the HEX codes of the colors you'd like to use.

From there, you can add your style keys and hex code values to your Workflow (weld) configuration files with JSON formatting. For more information about our advanced editor, please see this guide

Here is an example of a Workflow configuration file with custom colors:

{
  // the "style" object will need to be added in to your
  // Workflow (weld) config
  "style": {
    "infoColor": "#FF33DD", //pink
    "linkColor": "#FFA500", //orange
    "primaryColor": "#3386FF", //blue
    "successColor": "#FFF633", //yellow
    "secondaryColor": "#CC33FF" //purple
  }
}

To apply custom colors to your Workflow:

1. Navigate to the Workflow editor
2. Click on the three vertical dots to the right of Edit Workflow
3. Select Edit Weld JSON from the dropdown menu
4. Add the relevant key(s) and the corresponding hex color code(s) to the "style": {} object
   • e.g. "primaryColor": "#3386FF"
5. Save

Some color updates can be seen live in the Webform preview after you've saved your configuration changes and refreshed the page.

To see all of your color customizations, including those on the Webform completion and signature pages, use a test submission instead.