Customize How Visier Looks

Change how Visier looks to provide a more consistent product experience for your users.

Overview

You can change settings in Visier to create a more harmonious experience with your own application, such as customizing color palettes and email templates.

At a glance, you can customize:

  • The embedded application, such as the navigation bars and generative AI.
  • Visier notices, privacy statements, and copyright.
  • User content, such as color palettes, company logo, email template, guidebooks, and analyses.
  • Vee
  • Reports

Note:  

  • The customizations in this article provide a more consistent product experience for your customers. However, Visier doesn't offer complete control over branded assets in the application. To make the customizations listed below, you must be licensed to make these customizations. If you are interested, please contact your Customer/Partner Success Manager.
  • If a customization is not included in this article, you cannot customize that asset.

Embedded application

In your embedded application, you can remove or replace Visier branding in the following places.

You have the option to remove Visier's prebuilt navigation bars from your embedded application. For more information about navigation in Visier, see Solution Navigation and Studio Navigation.

To turn off navigation bars:

  1. In a project, on the navigation bar, click Model > Settings> Navigation, Notices & Links.
  2. To remove the vertical navigation bar in the solution experience, turn off Analytics navigation bar.
  3. To remove the vertical navigation bar in a project, turn off Studio navigation bar.
  4. To remove the horizontal navigation bar in the global workspace, turn off Horizontal navigation bar.
  5. When finished, publish your project to production. For instructions, see Publish Project Changes.

Visier logo in navigation bar

If Powered by Visier is enabled and you have a custom company logo in Visier, the Visier logo is visible at the bottom of the solution experience navigation bar, as shown next.

To remove the Visier logo from the navigation bar, do any of the following:

  • Remove your custom company logo. For more information, see Company logo.
  • Turn off Powered by Visier. For more information, see Powered by Visier.

In the solution experience, on the navigation bar, the Help button redirects users to online help.

By default, the Help button redirects users to the Visier Service Portal. You can remove the Help button or replace the Visier Service Portal link with a different link.

  1. In a project, on the navigation bar, click Model > Settings > Navigation, Notices & Links.
  2. To remove the help link, in Help link, turn off the Show/Hide toggle.
  3. To replace the help link with a different link, in Help link, turn on the Show/Hide toggle and type a custom URL.
  4. When finished, publish your project to production. For instructions, see Publish Project Changes.

Powered by Visier

As a Visier partner, you have the option to display a "Powered by Visier" message in the footer of your embedded application. To disable the Powered by Visier footer, contact your Customer/Partner Success Manager.

Note:  

If Powered by Visier is enabled and you have a custom company logo in Visier, the Visier logo is visible at the bottom of the solution experience navigation bar, as shown next.

Visier notices, privacy statements, and copyright

You can remove or replace Visier branding in the following places.

Release notification

At every major release, Visier posts a release notification in the application about new and updated features. To opt out of the release notification, contact your Customer/Partner Success Manager.

Login privacy statement

When a user signs into Visier for the first time, they are shown the Visier Privacy Statement. This statement informs users of the types of personal data that Visier collects as they use the application and the purpose of collecting that data. Before you can remove or replace Visier's login privacy statement, you must first get approval from Visier's Privacy team. For more information, contact your Customer/Partner Success Manager.

Privacy statement

Visier links to a privacy statement in the User dialog, as shown next.

Before you can remove or replace Visier's privacy statement, you must first get approval from Visier's Privacy team. For more information, contact your Customer/Partner Success Manager

After receiving approval, do the following to remove or replace the privacy link:

  1. In a project, on the navigation bar, click Model > Settings > Navigation, Notices & Links.
  2. To remove the privacy link, in Privacy link, turn off the Show/Hide toggle.
  3. To replace the privacy link with a different link, in Privacy link, turn on the Show/Hide toggle and type a custom URL.
  4. When finished, publish your project to production. For instructions, see Publish Project Changes.

Application copyright

Visier has a copyright statement for the application in the User dialog, as shown next.

To remove the copyright notice:

  1. In a project, on the navigation bar, click Model > Settings > Navigation, Notices & Links.
  2. To remove the copyright statement, in Copyright notice, turn off the Show/Hide toggle.
  3. To replace the copyright statement with different text, in Copyright notice, turn on the Show/Hide toggle and type a different copyright statement.
  4. When finished, publish your project to production. For instructions, see Publish Project Changes.

Content copyright

Visier provides out-of-the-box help content to support understanding of our metrics, charts, features, and more. This content is part of Visier's Blueprint. Content from Visier's Blueprint contains a content copyright notice, as shown next. For more information about help content, see Help content.

You cannot remove the content copyright, however, if you write your own help content at the administrating tenant level (for example, edit the explanation of a metric), the copyright is no longer displayed. For more information about changing an object's description or explanation, see Change the Display Name, Description, or Explanation of a Visier Object.

Note:  

  • Editing a metric's explanation impacts inheritance from Visier if Visier later changes that metric as well. For more information, see Blueprint Inheritance.
  • Visier Benchmarks™ are trademarked and not available for customization.

User content

You can change how Visier looks in the following places.

Color palette

Color palettes define the colors in a visualization, including the bars, bubbles, and lines. You can create custom color palettes with your brand colors to use in visualizations. For more information, see Create a Custom Color Palette.

You can change the icon or company logo that appears on the navigation bar. For more information, see Change the Solution Logo.

Note: If Powered by Visier is enabled and you have a custom company logo in Visier, the Visier logo is visible at the bottom of the solution experience navigation bar, as shown next.

Guidebooks and analyses

Visier provides out-of-the-box content in the form of prebuilt guidebooks and analyses. You can edit any guidebook or analysis to better represent your own brand, such as adding images or changing the voice or tone of the content. For more information about editing guidebooks and analyses, see Edit Visier Content.

Icons

Visier provides default icons for the out-of-the-box topics and guidebooks. You can replace these icons with your own images to better represent your own brand. To replace Visier icons in a guidebook or topic, see Create a guidebook and Create topics in the guidebook.

Email templates

Visier contains email templates that represent the types of emails sent to your users for certain events, such as a welcome email for new users. You can customize the predefined email templates to use your own subject line, header image, and text body. For more information, see Customize an Email Template.

PowerPoint template

When users download analyses or visualizations in PowerPoint format, Visier's default PowerPoint template includes Visier branding. You can replace the default template with your own template. For more information about changing the PowerPoint template, see Upload a Custom PowerPoint Template.

Vee

Vee has a default name, greeting message, disclaimer message, input hint, and icon that can be customized. For more information, see Vee for Partners.

To customize Vee: 

  1. In a project, on the navigation bar, click Model > Settings > White Labeling.
  2. In Locale, change or add a locale.
  3. In Display name, type a name. This is the name you want to associate with your embedded analytics AI tool. This name appears in the top left corner of the conversation interface.

  4. In Greeting message, type a message. This message appears in the middle of the conversation interface.

  5. In Disclaimer message, type a message. This message appears at the bottom of the conversation interface.

  6. In Input hint, type a message. This message appears as a prompt in the question field.

  7. In Icon, upload an icon to replace Visier's default icon. This icon appears in the navigation bar and in the middle of the conversation interface.

  8. When finished, publish your project to production. For instructions, see Publish Project Changes.

Reports

You can customize the Reports room to align with your application's branding, creating a seamless user experience.

Note: This capability is currently limited to the Reports room only.

White labeling options

Visier's white-labeling options offer granular control over customization, categorized by design elements and levels of application.

Design element categories

These define the specific types of visual elements you can customize:

  • Typography:

    • Font family: Change the overall font.

    • Font size: Adjust text size.

    • Font weight: Modify text boldness or lightness.

  • Color:

    • Text foreground: Control text color.

    • Background: Set background colors.

    • Border: Define border colors.

    • Hover: Specify colors for elements when a user hovers over them.

    • Semantic colors: Customize colors for specific meanings, such as: success, error, warning, info, danger.

  • Border radius: Adjust the roundness of corners on UI elements.

Levels of application

Customization levels dictate the scope, from broad application-wide changes to very specific component level adjustments:

  • Global (primitive): This is the broadest level, affecting the entire application. Changes at this level act as fundamental building blocks.

  • Brand: Applies to all components that use brand styles.

  • Component: Allows customization of a specific component, overriding global and brand settings for that element.

  • Component state: This is the most granular level, allowing customization of a specific component when it is in a particular state.

White labeling variables

Category and Level

Variable name

Description

Example

Global

Typography

--visier-font-family

Controls the font family of all visible text.

"--visier-font-family": "Times New Roman, serif" will apply Times New Roman as the font across the entire application.

Global

Typography

--visier-font-weight-regular

--visier-font-weight-medium

--visier-font-weight-semibold

--visier-font-weight-bold

Scale of the font weights. These variables control the text boldness or lightness of all visible text.

"--visier-font-weight-regular": 500,

"--visier-font-weight-medium": 600,

"--visier-font-weight-semibold": 700,

"--visier-font-weight-bold": 800,

Global

Border Radius

--visier-radius-base

Controls the roundness of corners on UI elements.

"--visier-radius-base": "3px" will adjust the base unit for all border radiuses to 3px. Increasing this value makes all elements in the application appear rounder.

Global

Color

--visier-color-brand-1

--visier-color-brand-2

--visier-color-brand-3

--visier-color-brand-4

Scale of brand colors, ranging from darkest to lightest. These variables control the colors of UI elements that use the brand color, such as primary buttons and toggles.

"--visier-color-brand-1": "#0C63E7" will apply hex color #0C63E7 to UI elements that use --visier-color-brand-1.

Global

Color

--visier-color-gray-1

--visier-color-gray-2

--visier-color-gray-3

--visier-color-gray-4

--visier-color-gray-5

--visier-color-gray-6

--visier-color-gray-7

--visier-color-gray-8

--visier-color-gray-9

Grayscale, ranging from darkest to lightest. These variables control the base tones used throughout the UI such as text, borders, highlights, hover states, or shadows.

"--visier-color-gray-1": "#7C858E" will apply hex color #7C858E to UI elements that use --visier-color-gray-1.

Component

Color

--visier-color-bg-primary

Controls the primary background color.

"--visier-color-bg-primary": "#FDFDFF" will set the primary background color to hex color #FDFDFF.

Component

Color

--visier-color-button-primary-bg

--visier-color-button-primary-fg

--visier-color-button-secondary-bg

--visier-color-button-secondary-fg

These variables control the background or foreground colors of an individual button component.

"--visier-color-button-secondary-fg": "#FFFF00" will set the text color of secondary buttons to hex color #FFFF00.

Component state

Color

--visier-color-button-primary-bg-hover

--visier-color-button-primary-fg-hover

--visier-color-button-secondary-color-bg-hover

--visier-color-button-secondary-color-fg-hover

These variables control the background or foreground colors of an individual component in hover state.

"--visier-color-button-primary-bg-hover: #008000" will change the background color of primary buttons to hex color #008000 specifically when a user hovers over them.

How to white label the reports room

White labeling is applied using the whiteLabelingConfig object within the additionalAppsConfig object in Visier's SDK embedding script. This allows you to configure the application's appearance. For more information, see additionalAppsConfig fields.

Note: Before white-labeling, ensure you've successfully embedded the Visier application into your environment. For detailed embedding instructions, see Embed the Full Visier Application.

The following code sample is an example of customized CSS variables within whiteLabelingConfig object.

Copy
visier('bootstrap', visierConfig, async function(app) {
    const containerId = ...;
    const url = ...;
    const maxRetry = ...;
    const additionalConfig = {
        whiteLabelingConfig: {
            cssValues: {
                "--visier-font-family": "Helvetica, Open Sans, sans-serif",
                "--visier-color-brand-1": "#FF8C00",
            },
        },
    };
    app.embedApp(containerId, url, maxRetry, additionalConfig);
});

additionalAppsConfig fields

The following fields in the additionalAppsConfig code snippet allow you to white label the embedded Visier application.

Field Description Type Required

 

whiteLabelingConfig

An object containing the configuration settings for white labeling the application.

object

Optional

 

cssValues

An object representing a range of CSS key-value pairs to apply to the UI.

object

Optional

Identify customization variables

To effectively white label your application, you'll need to identify the specific CSS variables that control different UI elements and components in the application. You can do this using your browser's developer tools.

  1. Right click on the page element that you want to customize, and select Inspect.

  2. In the developer tools panel, use the Select an element tool to click on the desired UI area, for example a button.

  3. In the Elements > Styles tab, scroll through the applied CSS rules and styles. Look for CSS variables that start with --visier. These are the variables you can override using the whiteLabelingConfig object. For example, by inspecting the Create report button we can see the variables that are being applied, such as --visier-color-button-primary-bg for the background color and --visier-color-button-primary-fg for the text color.

  4. Optional: You can temporarily modify the CSS variables directly in the developer tools to see the immediate effect. This helps confirm you've found the correct variable.

  5. Once you've found the correct variable, add the customized key-value pair to the whiteLabelingConfig object in your embedding script.