Branding visualizer

🏞️

Image: Branding visualizer

The branding visualizer is an environment that allows you to:

• design customer interfaces using CSS and HTML
• add your brand's communications to customer journey steps
• add your scripts to enhance the functionality of your customer interfaces

📘

You can enter the brand visualizer using the pencil icon on the right.

Toolbar

The toolbar allows you to manage the editor.

• Safe Mode This mode is turned on by default to prevent the scripts added to the branding editor to access your current admin session's data and to prevent those scripts to act on your behalf.

🛑

Important

Only switch off 'Safe Mode' if you trust the scripts and their third party dependencies added to the branding.

📘

Script preview is not available when 'Safe Mode' is ON

'Safe Mode' prevents scripts from running in the brand editor. This means that changes caused by scripts in the customer journey interfaces won't be visible in the previews.

However, scripts will take effect once the branding policy is applied to an application.

• Refresh If your CSS doesn't seem to render, click 'Refresh'.
• Toggle Mobile/Desktop Preview Click on the mobile phone/computer screen icon to view how your design will look on a mobile or desktop device.
• Toggle Design Editor Click the brush icon to minimize the CSS editor.

Design editor

You can apply the most important colors to your branding right away:

• Background color Defines the background color of your branding. The background can be further styled with CSS.
• Primary color Defines the primary color of your brand. Applied to components in general. Each component can be further styled with CSS.

You can start adding CSS at 'Custom CSS'.

As you start typing in a new line, CSS suggestions will pop up automatically:

📘

Adding new colors for UI components will override the selected Primary color at all times.

Additional script

'Additional script' allows you to apply your web development techniques to Strivacity-hosted applications. You can display and synchronize content from the rest of your domains, embed widgets that create an interactive experience for your customers, or add deep customization by using your web fonts or reorganizing your static HTML and CSS elements as you like.

📘

The 'Additional script' editor supports JavaScript.

Additional content

The additional content fields allow you to display extra elements on specific customer interfaces by applying custom HTML.

📘

Each customer journey preview has different additional content fields that will update when you switch previews.

Additional texts for customer journey steps

The text fields on the right allow you to add your communications directly to the selected customer journey steps:

📘

Each customer journey preview has different additional text fields that will update when you switch previews.

✅

The text fields support basic Markdown syntax.

Preview

You can make sure your application looks exactly how you want it to be before going live.

The branding visualizer shows you immediately how your CSS or HTML renders: the interactive preview area in the middle displays real-time updates applied to different parts of the customer experience.

Available previews:

• Global
• Identifier
• Account chooser
• Registration
• Progressive profiling
• Extra login providers
• MFA enrollment target selection
• My Account

You can switch between customer journey previews using the drop-down at the top:

📘

The UI elements in the branding visualizer are static.

Sample elements in the editor only respond to branding changes but are not affected by how your application is configured. For example, the example social login providers will not change in the editor by assigning the branding policy to an application where different providers are configured.