Skip to content

CUSTOMIZATION.md

Latest commit

 

History

History
202 lines (117 loc) · 6.74 KB

CUSTOMIZATION.md

File metadata and controls

202 lines (117 loc) · 6.74 KB

Compass Customization Guide

This guide explains how-to white-label the Compass application using the supported configuration system.
It documents which parts of the application can be customized, how configuration is applied, and how to validate changes.

Overview

Compass supports white-label customization through a JSON-based configuration file. This configuration controls branding, selected features, reports, and language settings.

Configuration values are injected into both the frontend and backend during deployment.

Configuration File

All supported customization options are defined in config/default.json.

This file is the source of truth for what can and cannot be customized.

Configuration Structure

The configuration file is organized into the following top-level namespaces:

  • branding: Application name, logos, colors, and SEO metadata
  • auth: Authentication behavior
  • cv: CV feature availability
  • skillsReport: Skills report branding, formats, and content
  • i18n: Language and locale settings

Only options exposed in these namespaces are customizable. Core application logic, workflows, and layouts are fixed.

Branding Configuration

Application Identity

  • appName: Name displayed throughout the application
  • browserTabTitle: Text shown in the browser tab

Application name Browser Tab title

Figure 1: Application name and browser tab title

SEO Metadata

  • metaDescription: Search engine description
  • seo.name: Site name for search results
  • seo.url: Public application URL
  • seo.image: Image used for social sharing
  • seo.description: Detailed SEO description

Assets

  • assets.logo: Main logo (SVG recommended)
  • assets.favicon: Browser favicon
  • assets.appIcon: Application icon

Main logo Favicon Application logo

Figure 2: Logo and icon assets

Assets can be placed in the frontend public directory or hosted externally.

Theme colors

colors are defined using RGB values (for example: "0 255 145").

The following colors can be customized:

  • Primary and secondary brand colors (including light, dark, and contrast text)
  • Primary, secondary, and accent text colors

Branding Colors

Figure 3: Theme color application

Accessibility requirement:

After updating colors, run Storybook locally with the chosen configuration and run the accessibility tests to ensure WCAG AA contrast compliance. Non-compliant color combinations will fail accessibility checks.

Feature Configuration

CV Feature

  • cv.enabled: Enable or disable CV functionality

When disabled, all CV-related UI elements are hidden and CV APIs are not registered.

Feature CV

Figure 4: CV feature enabled

Authentication

  • auth.disableLoginCode: Disable login code requirement
  • auth.disableRegistrationCode: Disable registration code requirement

These settings control how users authenticate in the application.

Login code enabled Registration code enabled

Figure 5: Login with code and registration with code enabled

Skills Report Configuration

The skills report supports branding, format, and content customization.

Report Logos

  • skillsReport.logos: One or more logos displayed in generated reports
  • Separate sizing is supported for DOCX and PDF formats

This allows single-brand or co-branded reports.

Download Formats

  • skillsReport.downloadFormats: Control which formats are available (DOCX and/or PDF)

Report Content

Partners can control which sections and fields appear in the report, including:

  • Summary section
  • Experience title
  • Company name
  • Date range
  • Location

Skills Report customization

Figure 6: Skills report customization

Localization Configuration

Compass supports multiple languages through configuration.

User Interface Locales

  • i18n.ui.defaultLocale: Default UI language
  • i18n.ui.supportedLocales: Available UI languages

Conversation Locales

  • i18n.conversation.default_locale: Default conversation language
  • i18n.conversation.available_locales: Locale-specific configuration, including date format

Language Switcher

Figure 7: Language switcher interface

For full translation setup, see the Language Guide.

Sensitive Data Fields Configuration

The sensitive data form fields can be customized to collect different user information.

  • sensitiveData.fields: Configuration for sensitive data collection fields

This allows customization of:

  • Which fields are displayed (name, email, gender, age, etc.)
  • Field types
  • Validation rules and error messages
  • Localized labels and values

Sensitive Data Fields

Figure 8: Sensitive data collection fields

For the complete schema documentation and examples, see the Sensitive Data Fields Configuration Guide.

Applying Configuration Locally

The configuration is applied using the inject-config.py script.

Navigate to the config directory and run:

cd config
python3 inject-config.py

This script reads the configuration file and injects values into:

  • Backend .env file
  • Frontend public/data/env.js file

You can also apply only specific namespaces:

python3 inject-config.py --config default.json --namespaces branding auth

Configuration Reference

Refer to default.json for the complete configuration structure and all supported options.

Important Notes

  • If a configuration value is missing or contains a typo, the application will fall back to its default value
  • If changes do not appear after deployment, verify injected environment variables
  • Configuration keys must match the structure in default.json exactly