Branding policy editor

The branding policy editor allows you to customize the appearance and customer-facing content of Strivacity-hosted experiences.

Using the brand editor, you can:

Configure core branding settings
Apply custom CSS
Add custom JavaScript
Add supplemental HTML content and customer communications
Preview customer journey screens and flow states before publishing changes

📘
The editor includes a live preview panel that updates based on the selected customer journey screen.

Branding policy editor layout

The branding policy editor is organized into tabs for different types of customization:

General: Configure core branding settings such as policy metadata, logos, colors, and links.
Custom CSS: Apply custom styling to customer-facing experiences.
Additional script: Add JavaScript for advanced customization and integrations.
Additional content: Add supplemental HTML content to supported customer journey screens.
Additional text: Configure customer-facing communications and supporting text.

Preview

The preview panel displays a live representation of customer-facing experiences using the current branding policy configuration.

Use the journey screen selector in the preview panel to switch between supported customer journey screens and flow states, including:

Sign-in and registration flows
MFA enrollment and authentication screens
Password recovery and account flows
Identity verification journeys
Passkey and organization flows
Redirect, error, and result screens

The preview toolbar also includes controls to:

Reload the preview
Enable or disable script execution
Toggle full-screen preview mode
Show or hide the preview panel
Open the branding framework documentation

📘
Preview content uses sample customer journey data and is intended for branding validation only.
UI elements in the preview respond to branding changes but are not affected by application-specific runtime configuration.
For example, social login providers shown in previews may differ from those configured for a live application.

Documentation

The Documentation button in the branding policy editor links to a detailed reference that supports more advanced customization. If you're working with layout structure, CSS, custom scripts, or translation handling, this resource helps you go beyond the basics.

The documentation includes:

Changelog: Highlights recent updates to the branding framework, including new features, fixes, and deprecations. It also provides migration guidance for changes such as updated CSS selectors or component structures.
How branding works: Covers customization options for the login and account management portals, including layout and CSS configuration, translation settings, and adding custom scripts.
Guidelines: Offers best practices for styling, scripting, event handling, and integrating analytics to ensure a consistent and responsive customer experience.
Knowledge base: Provides practical information on working with CSS, HTML, and JavaScript within the branding policy editor.
Web components: Lists and explains the reusable components available in the branding policy editor, such as buttons, calendars, alerts, and action panels, along with configuration options.

This additional documentation is designed for developers and teams looking to create more tailored, consistent customer experiences. Use it alongside the editor to better understand how each element behaves and how to extend your branding with precision.

Custom CSS

Apply custom CSS styling to customer-facing experiences.

The Custom CSS tab includes selectors for supported experience areas, such as:

Login
My account
Organization portal

CSS changes are reflected in the preview panel in real time.

Custom CSS can be used to:

Override default styling
Customize layouts and spacing
Configure typography and colors
Style individual UI components

Additional script

Add custom JavaScript to supported customer-facing experiences.

The Additional script tab includes selectors for supported experience areas, such as:

Login
My account
Organization portal

Scripts can be used to:

Integrate external services
Embed widgets
Extend UI behavior
Load external resources
Implement advanced customizations

📘
JavaScript execution is disabled in previews by default. To enable script execution in the preview, use the script execution toggle in the preview toolbar.

Additional content

Add supplemental HTML content to specific customer journey screens and placement regions.

The Additional content tab provides granular placement targeting for supported journeys and flow states, including:

Login and registration screens
Password recovery journeys
Identity verification flows
MFA enrollment and authentication
Organization and account flows
Error and result screens

For each supported journey state, content can be placed in regions such as:

Header content
Left content
Right content
Footer content

Available placement options change dynamically based on the selected journey screen.

Additional text

Configure supplemental customer-facing text content for supported customer journey screens.

The Additional text tab allows you to customize contextual text displayed above or below supported experiences, such as:

Identifier screens
Registration screens
Progressive profiling
External login providers
Remembered account experiences

Text placements typically include:

Top text
Bottom text

Available text fields change dynamically based on the selected customer journey screen.

📘
The editor supports basic Markdown syntax.

Code snippets

The Custom CSS and Additional script editors include built-in code snippets for common customization scenarios.

To insert a snippet:

Open either the Custom CSS or Additional script tab.
Select the Code snippets button in the top-right corner of the editor.
Select a snippet to insert it into the editor.
Modify the snippet as needed for your customization requirements.

Available snippets depend on the selected editor.

For example, the Additional script editor includes snippets for:

Event listeners
Form handling
Login block state handling
Static content events
Custom JavaScript structure examples

The Custom CSS editor includes a basic CSS structure snippet that can be used as a starting point for customization.